I want to have the photo gallery in a tab like some of the other content. I then tried as per below.

In my app/design/frontend/Vendor/Theme/Magento_Catalog/layout/catalog_product_view.xml I have the following :

<referenceBlock name="product.info.details">
 <block class="Magento\Catalog\Block\Product\View" name="gallery.tab" as="gallery" template="product/view/photogallery.phtml" group="detailed_info" >
         <argument translate="true" name="title" xsi:type="string">Gallery</argument>
 <move element="product.info.media" destination="gallery.tab" after="-" />

then I have in app/design/frontend/Vendor/Theme/Magento_Catalog/templates/product/view/photogallery.phtml just one line.

<?php echo $block->getChildHtml();?>

It all displays as I wish (i.e. in a tab, all photo loaded) but throw a javascript error while loading the page.

gallery.js:453      Uncaught TypeError: Cannot read property 'setOptions' of undefined

For configurable product there is an error too though not the same :

gallery.js:487      Uncaught TypeError: Cannot read property 'data' of undefined

Additionally, the refresh of the gallery for configurable+swatch products is then not working neither


I tried as well to change in the layout file app/design/frontend/Vendor/Theme/Magento_Catalog/layout/catalog_product_view.xml so that it put the Gallery block in the details group directly, it simply does not show any gallery anymore.

<move element="product.info.media" destination="product.info.details" after="-" />
<referenceBlock name="product.info.media" group="detailed_info">
        <argument translate="true" name="title" xsi:type="string">Gallery</argument>

How can I safely move the Gallery to a tab?

Edit 2016-10-06 : It appears that the issue comes at the initialization of the fotorama. Where is that triggered?

Edit 2016-10-07 : Now, I figured out that the Javascript error appears if my photogallery tab is NOT the first one. if it is the first one, then no problem.

Further test showed that if the Gallery is nested in a div that has display:none; then it throws me the errors.

  • Is your gallery.tab being rendered by its parent? If the parent is a <container /> element then it will be rendered automatically, but if the parent is a <block /> then that block's template has to specifically render your block. – Vincent Hornikx Oct 3 '16 at 10:50
  • in my first attempt, it is in a block that has a phtml file associated. as I said, it renders but has an HTML error. I'll try to do a derivative with a container instead. – Memes Oct 3 '16 at 11:06
  • Tried with a container, no luck. – Memes Oct 3 '16 at 11:28
  • Can you post more of your layout so we can see in which parent element your element is? – Vincent Hornikx Oct 3 '16 at 11:32
  • I edited with the full path – Memes Oct 3 '16 at 11:48

As @Aaron Allen said in his comment, the code I posted almost work. In fact, it worked when it was the active tab, otherwise, the fact that it had display:none; because the jQuery tabs hide it made it throw the JS errors.

I then found this code of jQuery tabs and I adapted it a bit

  // For each set of tabs, we want to keep track of
  // which tab is active and its associated content
  var $active, $content, $links = $(this).find('a');

  // If the location.hash matches one of the links, use that as the active tab.
  // If no match is found, use the first link as the initial active tab.
  $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);

  $content = $($active[0].hash);

  // Hide the remaining content
  $links.not($active).each(function () {
    $(this.hash).height(0);//Here I replace the hide by a height=0

  // Bind the click event handler
  $(this).on('click', 'a', function(e){
    // Make the old tab inactive.
    $content.height(0);//Here I replace the hide by a height=0

    // Update the variables with the new link and content
    $active = $(this);
    $content = $(this.hash);

    // Make the tab active.
    $content.height('auto');//Here I replace the show by a height=auto

    // Prevent the anchor's default click action

I coupled this with a overflow:hidden; on all my contents and that did the trick

I know this is more a hack than a real solution but I really need to get my project going so that will do.

  • where you made this change ? – Manthan Dave Sep 11 '17 at 19:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.