Powrót do listy

Comfino installments PrestaShop

Comfino widget integration with PrestaShop

In order to embed the widget on any page of the store, the following initialization code should be placed:

var script = document.createElement('script');
script.onload = function () {
    ComfinoProductWidget.init({
        widgetKey: '{WIDGET_KEY}',
        priceSelector: '{WIDGET_PRICE_SELECTOR}',
        widgetTargetSelector: '{WIDGET_TARGET_SELECTOR}',        
        type: '{WIDGET_TYPE}',
        offerType: '{OFFER_TYPE}',
        embedMethod: '{EMBED_METHOD}',
        priceObserverLevel: 0,
        price: null
    });
};
script.src = '//widget.comfino.pl/comfino.min.js';
script.async = true;
document.getElementsByTagName('head')[0].appendChild(script);

The Comfino PrestaShop plugin provides a ready-made initialization script template and makes it easy to configure the widget. To enable the widget, open the plug-in configuration form.

Konfiguracja

To activate the widget logic on the store page, set the switch "Widget enabled?". For the widget to function, an individual key is required, which must be entered into the "Widget key" field.

The initialization script can be modified according to your needs.

After saving the changes, the widget should display on all pages that meet the criteria defined in item selectors: "Widget price element selector", "Widget anchor element selector".

The first selector points to an HTML document element that contains the product's price (usually a product detail page). The second selector points to the element in which the widget will be embedded.

  • Available configuration options for the widget:

    • widgetKey - widget API key (widget key is automatically retrieved after saving module configuration form if valid Comfino API key is provided)
    • priceSelector - selector of the element which contains the price of the product (eg: span[itemprop=price]), see: MDN Web Docs - Document.querySelector()
    • widgetTargetSelector - selector of the element which is the container of the widget (eg: div.product-actions), see: MDN Web Docs - Document.querySelector()
    • type - widget type (simple - textual, mixed - graphical with banner, with-modal - graphical with installments calculator)
    • offerType - offer type (INSTALLMENTS_ZERO_PERCENT - 0% installments, CONVENIENT_INSTALLMENTS - convenient installments)
    • embedMethod - widget embedding method (INSERT_INTO_FIRST, INSERT_INTO_LAST - default value, INSERT_BEFORE, INSERT_AFTER)
    • priceObserverLevel - DOM hierarchy level used for tracking price changes and offer recalculation (level of the observed parent container relative to the price container)
    • price - product price used for installments calculation (in case if set, priceSelector option is ignored)

  • where:

    • option - mandatory parameter
    • option - optional parameter

Widget types

  • Textual (simple)

Configuration

  • Graphical with banner (mixed)

Configuration

  • Graphical with installments calculator (with-modal)

Configuration

Configuration