Full width product gallery

Question

I am using a custom theme built off of Amasty's Jet Theme. I am trying to use the grouped product type to sell parts from a schematics image. The idea is to have the schematic full width across the top of the product page, with all of the grouped items listed below. I was able to get the grouped items moved by extending the catalog_product_view_type_grouped.xml layout and moving them with

<move element="amtheme.short.info" destination="columns" before="amtheme.product.wrap"/>
<move element="amtheme.product.wrap" destination="columns" before="-"/>
<move element="amtheme.product.info" destination="columns" after="amtheme.product.wrap"/>

However, I can't figure out how to override the fotorama gallery. I tried messing with some settings in the view.xml file but I want this change for grouped products only. Is there any way this can be done?

Answer 1

Yes, you can change gallery settings only for grouped products and you can add CSS class so that you can write styles only for those products.

Step 1.

Open view.xml from your design, e.g. app/design/frontend/{Vendor}/{theme}/etc/view.xml

Step 2.

Add your custom vars to gallery

<var name="gallery">
    <var name="grouped_products">
        <var name="some">
            <var name="setting">value</var> <!-- Your custom data -->
        </var>
    </var>
    ...
</var>

Step 3.

Copy from vendor/magento/module-catalog/view/templates/product/view/gallery.phtml and paste to app/design/frontend/{Vendor}/{theme}/Magento_Catalog/templates/product/view/gallery.phtml, but do not replace the file if it exists.

Step 4.

Open gallery.phtml from step 3 and add new var: $productType = $block->getProduct()->getTypeId();

Next

<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">

Change to:

<div class="<?= $productType ?> gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">

The var $productType always returns a string such as 'grouped', 'configurable', so you can write styles only for a particular product type.

Step. 5

Use your custom vars for fotorama settings. In gallery.phtml you can see lot of configuration for fotorama gallery. You can change the options or add own vars based on product type like this:

<script type="text/x-magento-init">
    {
        "[data-gallery-role=gallery-placeholder]": {
            "mage/gallery/gallery": {
            "mixins":["magnifier/magnify"],
            "magnifierOpts": <?= /* @noEscape */ $block->getMagnifier() ?>,
            "data": <?= /* @noEscape */ $block->getGalleryImagesJson() ?>,
            "options": <?= /* @noEscape */ $block->getGalleryOptions()->getOptionsJson() ?>,
            "breakpoints": <?= /* @noEscape */ $block->getBreakpoints() ?>,
            
             <?php if ($productType === 'grouped') : ?>
                "fullscreen": {
                   "test": "<?= /* @noEscape */ $block->getVar("gallery/grouped_products/some/setting/value") ?>"
                }
             <?php else: ?>
                "fullscreen": <?= /* @noEscape */ $block->getGalleryOptions()->getFSOptionsJson() ?>,
             <?php endif; ?>

            }
        }
    }
</script>

Mark my answer if I helped.