Product Grid Gallery¶

This webcomponent is responsible for displaying a product gallery in a form of a grid. It is used to create Product Gallery module.

Note: This webcomponent uses specific css classes and settings to adjust how the gallery is displayed. You may use your own classes or settings, to change that behaviour.

Attributes¶

Attribute name	Type	Description
display-mode	string	Display mode of the gallery. This component is only used when `displayMode` is set to `grid`
data-max-desktop	string	maximum number of images to display in the list (on desktop)
data-max-mobile	string	maximum number of images to display in the list (on mobile)

Event Bus events¶

This webcomponent listens to the following events with the Event Bus:

product.stockChanged

Example¶

    <product-grid-gallery id="product-grid-gallery-1234" display-mode="grid" class="product-gallery product-gallery__grid" data-max-desktop="9" data-max-mobile="3">
        <div class="featured-image">
            <a class="js__gallery-anchor-image" href="path/to/image.webp">
                <span class="sr-only">Featured photo. Press Enter or Space to open the selected photo in fullscreen view</span>
            </a>
            <img src="path/to/image.webp" />

            <a class="js__gallery-anchor-image btn open-gallery-button js__open-gallery-button" href="path/to/image/webp">
                <h-icon>
                    <svg class="icon">
                        <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-maximize-2"></use>
                    </svg>
                </h-icon>
                <img src="path/to/image.webp" />
                Open Gallery <span class="hidden-md-only hidden-lg-only hidden-xl-only hidden-xxl-only">(3)</span>
            </a>
        </div>

        <ul class="product-gallery__grid-images" aria-label="{{ translate('List of product images') }}">
            <li class="product-gallery__grid-image">
                <a>Image 1</a>
            </li>
            <li class="product-gallery__grid-image">
                <a>Image 2</a>
            </li>
            <li class="product-gallery__grid-image">
                <a>Image 3</a>
            </li>
        </ul>
    </product-grid-gallery>