Barbershop website development using 1C-Bitrix

Barbershop Website Development with 1C-Bitrix

A barbershop website is a portfolio of masters and a booking entry point. Not a corporate portal or media project. The visitor arrives with one goal: choose a master, view their work, and book an appointment. The second task is selling men's grooming products and care items. With 1C-Bitrix, both tasks are solved with one installation: iblocks for service and master catalogs, the sale module for a merchandise shop, and integration with booking systems via REST API.

Service Catalog and Masters

"Services" iblock contains elements: men's haircuts, beard modeling, royal shaving, combo packages (haircut + beard), gray hair camouflage, children's haircuts. Properties of each element: duration (minutes), category (basic / premium), process description, result photos.

"Masters" iblock — the key for a barbershop. Properties:

• Photo — mandatory professional quality, processed with resize on upload via CIBlock::ResizeImageGet
• Specialization — binding to service iblock elements (multiple property type E)
• Experience — numeric field
• Portfolio — multiple "File" property (before/after work photos)
• Rating — numeric, updated by agent based on reviews
• Schedule — binding to HL-block schedule
• External ID — master identifier in YCLIENTS / Dikidi (string)

On the master's detail page, a portfolio gallery is displayed in "before/after" format with a comparison slider (JS implementation without third-party libraries — two <img> elements in a container with overflow: hidden and input[type=range]). Below the gallery — reviews bound to the master via property type E in the reviews iblock.

Online Booking: YCLIENTS and Dikidi Integration

Most barbershops already use YCLIENTS or Dikidi for internal management. Duplicating the schedule on the website is a path to de-synchronization. The correct approach is API integration.

Interaction scheme:

1. Visitor on site selects a master (from Bitrix iblock)
2. Using master's UF_EXTERNAL_ID, a request is sent to YCLIENTS API: GET /book_staff/{staff_id}/services — retrieve current services with prices
3. Visitor selects service → request GET /book_dates/{staff_id} — available dates
4. Selects date → request GET /book_times/{staff_id}/{date} — free slots
5. Confirms booking → POST /book_record — creates record in YCLIENTS

All API requests go through a server proxy (Bitrix controller), not directly from browser — this hides the API key and allows caching responses. Available dates list is cached for 5 minutes in CPHPCache, slots — for 2 minutes.

If the barbershop doesn't use an external booking system — booking is built on its own Highload-block schedule similar to other service projects: master × date × time, slot generation by agent, protection against double booking through status verification at confirmation time.

Reverse synchronization. When booking is created/canceled through YCLIENTS admin panel, a webhook sends data to Bitrix endpoint, which updates the local cache. This ensures the website shows current slots even if booking was made by phone.

Merchandise Store: Grooming Products

The store section is built on standard catalog + sale combination. Products — hair pomades, beard oils, shampoos, balms, accessories. Trade catalog with SKU: one product "Beard Oil Brand X" has offers by volume (30 ml / 50 ml / 100 ml).

Implementation features:

• Master recommendations — on master's detail page, a "Recommends" block is displayed with bindings to catalog products (property type E in masters iblock, link to trade catalog)
• Purchase during booking — in the online booking process, option to add product to cart is offered. Implemented via cross-sell component (catalog.section.list with filter by master recommendations)
• In-shop pickup — delivery service sale.delivery with "pickup" type, bound to barbershop address. Customer collects order on next visit

Payment — online via sale.paysystem or at visit. For self-pickup orders, payment on receipt is selected by default.

Blog on Men's Style

Blog section on iblock with categories: haircuts (trends, selection by face type), beard (care, styles), style (clothing, accessories). Each article — element with SEO properties: title, description, og:image. Article author is bound to masters iblock — this builds personal brand and internal linking.

URLs are formed by template /blog/category/article-name/. Breadcrumbs — via breadcrumb component with custom template. XML sitemap is generated by Bitrix SEO module with inclusion of all sections: services, masters, blog, store.

Technical Foundation

• Responsiveness — mobile-first, booking on mobile takes 3 taps: master → service → time
• Composite cache — for service catalog, master pages, blog. Store and schedule — no cache, AJAX
• Notifications — SMS reminder 2 hours before visit via messageservice, push notification if PWA wrapper is present