Flex Layout Module for PrestaShop and thirty bees

///Flex Layout Module for PrestaShop and thirty bees

If you did not notice in the last week we have made all of our paid modules free. One of the paid modules we have made free is our Flex Layout module. This is one of the modules that I think is under appreciated in our library. I got the idea for this module by shopping on a big US store’s website. In seeing the different categories and some of the product pages, I noticed that they were different. Some of the pages had a different layout, especially categories with fewer products in them. This made me want to create something similar for thirty bees and PrestaShop.

How the module works

This module is not very turn key. The reason being is so many templates use so many different styles in them. So we cannot include any template files with the module, they need to be custom made. Even with that stipulation the module is very powerful. I wanted to go over some of the things that you can accomplish with the module, so everyone can see the true beauty of the module. From a technical standpoint the module overrides the current template and sets a new template, the one you choose in the module.

Module Interface

The module interface is very simple once you get it installed. From the configuration screen you are able to upload your custom product page or category page templates. This part of the module is very straightforward and just really allows you to upload the custom templates you have made for your site. The possibilities are really endless in what you can do with the module.

Flex Layout Module

Making a Sample Template

We are going to make a simple sample template off of the thirty bees default theme, so you can see exactly what this module does. You will have to know how edit code to do this tutorial, but it should not be too complicated. We are going to open up a product.tpl file from our default theme, and make a couple of edits to change the look of the page.

Here is the stock product.tpl view from the thirty bees theme.

thirty bees flex

What I want to do is create a template that is a bit wider and move the buy block to below the description. Because the short description on this page is very long, it will look better if I do that. So I open a local copy of the product.tpl. The first thing I do is find the class pb-left-column. It is currently a md-5, I want it to be a little bit wider, so I change it to a md-6 width. Then I find the pb-center-column, it is currently a sm-4, but I want ti take up the rest of the width of the page, so I am going to change it to a sm-6.

 

Then, for looks I adjust the smaller images to be larger and also use the larger home_default images instead of the cart default images, so they are not blurry. Lastly, I hide the product extra buttons hook, just to make sure the page height lays out correctly. The result in doing this is the image below.

thirty bees edited

 

Once you have created the template, you have to give it a name other than product.tpl, I named this template product-wider.tpl. Now you can upload the template in the module configuration page. Here you also have the ability to set the template as a global template in your shop.

Product wider

Or, if you want to use the template just for a single product page, you can go into the product and use the template switcher tab, to switch the template that the product uses.

Template switcher

 

The category templates work exactly the same way as the product templates. You are able to create custom category pages just as easily as we just created a custom product page. Like the product pages you are able to set the template globally, or you can select the template to be used from the category page of the back office.

Conclusion

Like I stated in the beginning, with every theme being different, we cannot distribute templates with the module. The best practice is to start with your current product.tpl file or category.tpl files. This will allow you template to blend in, use the variables from your theme, and mesh well with your site.

 

Download the module
2018-08-01T08:44:56+00:00