Elegrant: Gallery with Product Binding

What this solution does

The module is designed for creating interactive galleries in interior design projects, furniture showrooms, fashion collections, and commercial catalogs. It enables displaying images with the ability to instantly purchase associated items, eliminating the need for manual layout or deep catalog structure modifications.

Upon installation, you receive a ready-made 'Gallery' information block with preconfigured properties and the elegrant:gallery component located in the /local/components/elegrant/gallery/ directory. The system features direct binding to the product information block and a simplified administrative form that consolidates all necessary fields onto a single tab.

The gallery automatically switches between a grid and a slider layout based on the number of elements and settings. The slider is built on the Swiper library and supports four display modes: classic, with the edge of the next slide visible, centered, and large. Features include auto-scrolling, dot pagination, and configurable slide counts for desktop and mobile devices.

Clicking a card opens a modal window displaying an enlarged image and a list of associated items with prices and links. Three opening animation options are available: no animation, smooth fade-in, and zoom effect.

The hotspots feature allows adding interactive markers to images via a visual editor in the administration panel. Points are created by clicking on the image and repositioned via drag-and-drop, then linked to specific products from the catalog.

The Gallery with Product Binding displays images with tooltips showing the product name and price. Navigation dots are available in the modal window and optionally on slider cards. Six visual templates are provided: classic, dark, minimalism, warm, accent, and red. Colors for arrows, the modal window, and dots can be overridden. The block header is customizable by text, size, and weight; it can be displayed above the block or in a single line with the arrows. Navigation arrows can be toggled on or off, with adjustable position, size, and border radius. Optional image zoom on hover is supported. Lazy loading for images is implemented.

Module settings are consolidated into logical sections: general, design, slider, cards, and modal window. Parameters can be overridden at the component level for specific pages. Tooltips in the settings interface provide previews of templates and slider types.

For content managers, the workflow involves uploading an image to the gallery element and binding one or more catalog products to it. If needed, dots are placed directly on the image. Once the component is published on the page, the block is ready.

Technical features: the solution operates on the standard iblock module and is compatible with standard product catalogs. The frontend is built with native JavaScript, with no dependency on BX.ajax or BX.ready.

Responsive layout ensures correct display on desktops, tablets, and mobile devices. Configuration parameters are stored in the module and component settings.

The module supports the 'Shop the Look' scenario, featuring interactive points on room photos that open product details in a modal window. It enables the creation of collections and lookbooks for the fashion industry, as well as showcases for furniture, lighting, and decor. The tool allows building landing pages with interactive collections without custom development.

Requirements: 1C-Bitrix: Site Management platform and the 'Information Blocks' (iblock) module.

General iT can install and configure this module and check how it works on your website.