Magento Gallery Widget. What’s new?

Magento 2 Gallery Widget

A few years ago, we introduced you to The Gallery Widget for Magento. We are sure that this widget was very useful to you and transformed your site, making it even more convenient for users. However, we did not tell you about another possibility that is available thanks to that widget. And now we will tell you about this function.

Preparation

Since the gallery widget runs on the Fotorama plugin, it can be used not only to create a gallery of pictures but also to work with other NTML content. In this article, we briefly touch upon the creation of a gallery of customer reviews, which may well be a great addition to your site, which may well increase your conversion and income.

Setup

Actually, let's get started. Let's say we want to see our customer reviews at the bottom of the site. First of all, we need HTML with all real user reviews. The way to create a feedback slider that we will use will consist of putting all the site’s development in one template, which can be called client-testimonials.phtml. Also, for more simple editing, you should add a script to the same template that is responsible for calling the gallery. 

When creating the gallery widget, we used the data group as a place to store all images with their various properties. In the case of creating a review gallery, we also use the data group, but now all information with reviews that you put there will be stored in this group.

Now, it is time to move all this to our bottom of the site. To do this, we take testimonials.phtml and place it inside our theme, which is located in the Magento_Theme / template folder. After that, create a link to it in the default.xml file, which is also located in the Magento_Theme / template folder.

Magento 2 Gallery Widget

Enhancements

After all these operations, you may have a question in your head, “How to edit reviews now?”. It’s not surprising, because from time to time customers will want to change or edit their reviews. Since not everyone will be uniquely comfortable working with the source code, moving all the reviews into a static block is a good solution to this problem. For starters, you should copy and move our entire HTML layout straight into our static block. If it comes to Javascript, then a good solution is to save it in a separate web / js file which is inside the topic and declare it in requirejs-config.js along the way. If you decide to move all this at once into a static block, then any typo in the code can completely break your entire gallery of reviews, but we don’t want this? So feel free to move Javascript separately. 

So, you put everything in a static block, but the work is not finished yet. All this can’t work properly without calling a script and the data-mage-init attribute will help you with this, so remember to add it.

Final touches

We are very close to the finish line. You just have to edit and update the instructions in the main default.xml file. The reason for this is that now instead of calling a regular template file, we call a static block and from now on since we no longer need the template file, we can safely erase it from the code.

Now, the heart of our review gallery widget has been beating and working properly. Now you can safely experiment with the СSS file of your theme and customize the styles of this widget and modify its appearance in every way.

As you can see now, the gallery widget is quite flexible and can work with both conventional images and HTML data. Thanks to it, you can transform your site and make it very convenient for your users. If you have any questions about the process of customizing this widget, write to us and our Team of Magento 2 Developers and they will be happy to answer all your questions and help you in all technical aspects.

You may also be interested in the following articles:

Comments (0):
Leave a comment:
*Your comment will be published after approval by site administrator.