Installation

Builders

Widgets

Features

How tos

Others

PrestaShop module integration

Integration

Element Flow is compatibile with all most all PrestaShop modules, expect other page builders.

What Element Flow does mostly is to style the front office, it doesn't change the way how PrestaShop works, that's the reason it has great compatibility with other modules.
Most (lets say 85%) PrestaShop module can work with Element Flow without any integration. Element Flow has 3 widgets to load PrestaShop modules in different ways, they are "PrestaShop modules" widget, "Hooks" widget and "Custom templates" widget. Here is video of how to add prestashop modules in Element Flow.
For the rest 15%, will be build integation for popular modules. Some integration requires to edit files, they will be listed blow.
If the module you are going to use isn't in the list blow, then it's most likely compatible, if it doesn't work fine, then contact us, we provide free integration service, no guarantee.

Read moreShow less

Advanced search 4/5 (5 custom template files built-in)
Amazing filter
WK Products Search Plus
Estimated delivery (1 custom template file built-in)

Read moreShow less

displayProductAdditionalInfo

appfree
ph_sendproduct_tofriend
cartquotationwizard
cdproductcomparisonplus
ets_reviews

Read moreShow less

displayProductActions

alcaqtydiscountbuttons
advansedwishlist

Read moreShow less

0. Modules add data to the buy form.

For modules that add data to buy from on the product page, add a from="add-to-cart-refresh" attribute to every form field to make sure they get submitted when the Add to cart button is clicked. Form files can be placed to wherever you like on the product page, as long as they have the form attribute, they can be submitted correctly. Here are some examples:

Read moreShow less

<input type="text" name="message" form="add-to-cart-or-refresh">

<select name="message" form="add-to-cart-or-refresh">
  <option value="1">1</option>
  <option value="2">2</option>
</select>

<textarea name="message" form="add-to-cart-or-refresh"></textarea>

1. SEO Audit

Add this code to the hookDisplayOverrideTemplate function in the modules/ets_seo/ets_seo.php file.

if ((int)Tools::getValue('eb_id') && Tools::getValue('stsitebuilder')) {
    return;
}

2. Gift card

1. Add this code to the desired place for the gift card module to show out on the product page using the "HTML" widget.

<div id="gift_product"></div>

2. Add the code below to every field in the /modules/giftcard/views/templates/hook/v1_7/gift_radios.tpl file.

form="add-to-cart-or-refresh"

3. Additional Product Attributes / Custom Product Fields

Do two changes to the the /modules/an_productfields/views/js/front.js file.

1. Add this code to the first line in the chacgedPositionAnFields function. If you have the Quick View feature, then add the code to the changedPositionAnFieldsModal function too. The module uses these two functions to move fields to the desired position. With Element Flow, custom fields can be placed directly in the desired position.

Read moreShow less

return false;

2. Remove this coe

$('.elementor-element .js-an-pf-fields-wrap').not('.js-an-pf-position').remove();

4. Amazzing filter v3.*

1. Add filters to the listing page by using the "PrestaShop modules" widget. Module: amazzingfilter Hook: displayAmazzingFilter

2. Add this code to the custom js code field in the Amazzing filter module.

if(typeof(customThemeActions)){
	customThemeActions.updateContentAfter = function(jsonData){
		if(typeof(jsonData['stsb'])=='undefined')
			return;
		elementorFrontend.updateStsb(jsonData['stsb']);
	}
}

3. See the Screenshot, replace the code marked in the red box in the \modules\amazzingfilter\views\js\front.js file

with

af.$dynamicContainer.animate({'opacity': 1}, 350);

4. Repalce this code in the \modules\amazzingfilter\controllers\front\ajax.php file

exit(json_encode($this->module->prepareAjaxResponse($params)));

With this

$res = $this->module->prepareAjaxResponse($params);
if (Tools::getValue('euid') && Module::isInstalled('stsitebuilder') && Module::isEnabled('stsitebuilder')) {
    $eb = Module::getInstanceByName('stsitebuilder');
    if($eb_res = $eb->displayAjaxRefresh(true, true))
        $res = array_merge($res, $eb_res);
}
exit(json_encode($res));

5. Easy filter

Two ways to add filters to the category page

Use the Custom template widget to load the easyfilter_filters.tpl and easyfilter_active_filters.tpl files.
Use the Product filters widget, but color settings won't work; they are for the PrestaShop native facted filter module. Use color settings in the easy filter module.

It's popular to show a Filter button on mobile, filters show out from the side when the filter button is clicked. Then how to do that?

Please take these steps.

Open up the category page template in the editor.
Drag and drop the Custom template widget to where you like the Filter button to be.
Select easyfilter_filter_button.tpl from the Select a template tpl drop-down menu.

It doesn't make sense for the filter button and the filters both showing out, use the Visibility feature in the Responsive tab under the Advanced tab to hide one of them.

Read moreShow less

6. WebP module

All images you upload are in the /img/cms/ folder, so add the /img/cms/ folder to the WebP module to generate .webp images.

Once .webp images are generated, you may find an image appearing twice in the file manager. See the attached pic, there are menu02.jpg and menu02, select menu02, never select menu02.jpg, because the file manager hides file extensions, the full name of menu02.jpg is menu02.jpg.webp, if you select menu02.jpg.webp for an image widget, the image won't show out on Safari.

Read moreShow less

7. PrestaShop Checkout

It can work fine on the checkout page without any integration.

This is about to show the express checkout button on the product page. The PrestaShop checkout module uses these selectors to find the mina Add to cart button

.product-container .product-add-to-cart button.add-to-cart
.product-add-to-cart .product-quantity

They should make the selectors be configurable. Anyway, we can easily add the required css classes to the product page to make the PrestaShop Checkout module find the main Add to cart button.

You can add the css classes to existing elements. I prefer to wrap the Product buttons widget in two containers to make all changes about the button.

Add product-container to the outer container.
Add product-add-to-cart to the inner container.
Add product-quantity to the product buttons widget.
Add add-to-cart to the Add to cart button.
Add the product-details-simplified.tpl file to anywhere in the product page via the Custom template widget.

Read moreShow less

8. Store Reviews, Product Reviews and Google Rich Snippets (lgcomments)

The lgcomments uses the displayFooter hook to display the review badge by default. In Element Flow, you can display the review badge wherever you like by using the CustomLGCommentsWidgetPosition hook. Follow these setps:

Remove the lgcomments module from the displayFooter hook.
Use the PrestaShop modules widget to add the review badge to your site.
Module: Custom module
The name of your module: lgcomments
Hook: Custom hook
The name of your hook:CustomLGCommentsWidgetPosition

Read moreShow less

9. All-in-one Rewards: loyalty referral affiliation review

The loyalty points info on the product page isn't updated after switching the product combination. The All-in-one Rewards module requires the product-detials tab, so the solution is to use the Custom template widget to add the product-details div to the product page by loading the built-in product-details-data-only.tpl file.

For more info, check the Product details section on the Product page builder page.

Read moreShow less

10.Minimum and maximum purchase product quantity

The module adds a script to the product page by using the displayProductAdditionalInfo hook, so the first step is to use the PrestaShop modules widget to add the script to the product page.

Module: Custom module
The name: minpurchase
Hook: displayProductAdditionalInfo
Default parameters: $product

Set the Cache of this widget to "No, refresh after changing product combinations on the product page."

And then edit the /modules/minpurchase/views/js/front.js file, repalce this code

Read moreShow less

$('#quantity_wanted').on('change', function(event) {

By this one

$(document).on('change', 'body#product [data-elementor-type="template"] .elementor-widget-st-product-action-button .stsb_pro_quantity', function(event) {

Repalce this code in the /modules/minpurchase/views/templates/hook/combinations17.tpl file

if (Number($('.product-actions .product-add-to-cart input[name='+fieldName+']').val()) < Number(minimum_quantity)) {
    $('.product-actions .product-add-to-cart input[name='+fieldName+']').val(minimum_quantity);
}

With

if (Number($('.elementor-widget-st-product-action-button .stsb_pro_quantity').val()) < Number(minimum_quantity) || Number($('#add-to-cart-or-refresh #quantity_wanted').val()) < Number(minimum_quantity)) {
    $('.elementor-widget-st-product-action-button .stsb_pro_quantity, #add-to-cart-or-refresh #quantity_wanted').val(minimum_quantity);
}

11. Comparaison avancée des produits - cdproductcomparisonplus

Add it to the product page using the PrestaShop module widget.
Set the "Comparaison avancée des produits" to body#product #wrapper to make the "Add to compare" button work on the front page.

Read moreShow less

12. Notify Me Pro - nxtalnotify

Add it to the product page using the PrestaShop module widget.
Add a pb-center-column classname to the widget to make the button look nice on the front office..

Read moreShow less

Integration

Element Flow is compatibile with all most all PrestaShop modules, expect other page builders.

displayProductAdditionalInfo

displayProductActions

0. Modules add data to the buy form.

1. SEO Audit

2. Gift card

3. Additional Product Attributes / Custom Product Fields

4. Amazzing filter v3.*

5. Easy filter

6. WebP module

7. PrestaShop Checkout

8. Store Reviews, Product Reviews and Google Rich Snippets (lgcomments)

9. All-in-one Rewards: loyalty referral affiliation review

10.Minimum and maximum purchase product quantity

11. Comparaison avancée des produits - cdproductcomparisonplus

12. Notify Me Pro - nxtalnotify

Reach us

Currency

Popular search

Unlock 15% off