Magento 2 Widgets – gallery widget explained – client testimonials showcase

Further to our previous post about Magento gallery widget (in which we explained how to build image gallery) we’d like to show another possible use of this widget. Because it’s based on Fotorama plugin, gallery widget is able to work not just with images but with other HTML content as well. And we’ll demonstrate how by building a client testimonials gallery which we’re going to display in the footer of our web shop.

First thing we need is HTML with actual testimonials. We can opt for one of two places for storing our HTML content.

Gallery content in template file

One way to build our testimonials slider is to place all of our HTML markup in one template file; we can name it client-testimonials.phtml. For easier editing and customising we’ll put our script for calling gallery widget in the same file as well, so our template will have the following code:

<-- Container for testimonials -->
<ul class="testimonials">
 	<li>Testimonial #1</li>
 	<li>Testimonial #2</li>
 	<li>Testimonial #3</li>
 	<li>...</li>
</ul>
<-- Script that calls gallery widget -->
<script>
require ([
'jquery',
'mage/gallery/gallery'
], function ($, Gallery) {
 
    $(function () {
        // parse HTML to get client testimonials in array of objects
        var testimonialsList = document.querySelectorAll(".testimonials li");
        var data = [];
        var i;
        for (i = 0; i < testimonialsList.length; i++) {
            var obj = { html: testimonialsList[i].outerHTML};
            data.push(obj);
        }
 
        $('.testimonials') // we expect that page contains markup tag with class .testimonials
            .each(function (index, element) {
                Gallery({
                    options: {
                        "nav": "dots",
                    },
                    data: data, // contains previously parsed testimonials
                    fullscreen: {}
                }, element); // 'element' is simgle DOM node.
        });
    });
});
</script>

In the code above, the only difference to image gallery from our previous post is content of data group. Unlike image gallery, where data group specify paths to images, here data group here contains HTML content (as array of objects) that we previously parsed and saved in data array.

Since we already mentioned that we want testimonials to display in website footer, we’ll put the testimonials.phtml file inside our theme’s Magento_Theme/template folder and reference it through default.xml inside Magento_Theme/layout folder:

<referenceContainer name="footer-container">
    <block class="Magento\Framework\View\Element\Template" name="testimonials" template="Magento_Cms::testimonials.phtml" before="-"></block>
</referenceContainer>

Gallery content in static block

Working with clients it’s safe to assume they’ll want to change the gallery content (e.g. testimonials) from time to time. Since it’s not convenient for them to fiddle with source code (in our previously created template file), let’s try to make the whole process easier by placing testimonials in static block. We already have the code, we just need to make a few adjustments with organising our files.

For starters we need to copy/paste our HTML markup (from testimonials.phtml) into our static block. As for javascript, we’d advise against placing it in static block because the involuntary and accidental changes or typos in js script can break the whole gallery. That is why its best to save javascript as a separate file inside web/js folder of our theme and declared it in requirejs-config.js which is a config file that uses requireJs.

var config = {
  "map": {
    "*": {
      "testimonials": "js/testimonials",
    },
  },
};

However, we still need to call the script in our static block and Magento 2 way for doing it is by using the data-mage-init attribute:

<ul class="testimonials" data-mage-init='{"testimonials":{}}'>
    <!-- Client testimonials -->
</ul>

We are almost done. In one last step we need to update the instructions in layout file default.xml because we are calling static block instead of template file which is of no more use and can be deleted from our codebase:

<referenceContainer name=“footer-container">
  <block class="Magento\Cms\Block\Block" name="testimonials" before="-">
    <arguments>
      <argument name="block_id" xsi:type=“string">testimonials</argument>
    </arguments>
   </block>
</referenceContainer>

As for functionality our content gallery is finished. What’s left to do is to refer to website’s style guide and start working with (s)css to add some styles and visually enhance it.

Wrapping up

Hopefully, in this mini, two-part series on Magento gallery widget we gave you enough input to build your own gallery, weather with images or HTML content. As we already mentioned widget is based on Fotorama plugin and therefore inherits all its pluses and downsides.

What we consider the biggest drawback to using this widget is the fact that it’s limited to just one item (image) per slide. Also it’s worth noting that the Fotorama plugin is not being maintained anymore and Magento team might decide to drop using it in future software releases and build their gallery widget on some other plugin.

However, for the time being, this widget is safe to use; if not in production then in development phase for easy prototyping and experimenting with layout.