Magento 2 - pre-checkout widgets – Limepay

Usage of Widgets

Available Widgets and Parameters

April Product Payment Instalment Offer

This widget is used to show the payment plan instalment price, based on the product price (for the product page), or any custom price passed as parameter.

Allowed Parameters
- Amount (amount) This is the main price, based on which, the instalment price would be shown (default value to be passed: productPrice), if you need to pass custom price, you can pass the amount without a currency symbol, for example250
- Instalment Price Color (color) This will be the color of the payment instalment amount where it would get shown (default value to be passed: #fa5402)
April BNPL Toggle Widget

This widget is used to show a payment instalment toggle, based on the total amount of products in a customers cart, or any custom price passed as parameter. If the customer enables the payment instalment toggle on the product page, it will then be reflected on the checkout page meaning that the payment plan option would be selected by default.

Allowed Parameters
- Amount (amount) This is the main price, based on which, the payment plan instalment price would be shown (default value to be passed: cartAmount), if you need to pass custom pricing, you can pass the amount without a currency symbol, like 250
- Toggle Color (color) This will be the color of the payment instalment toggle where it would get shown (default value to be passed: #3A3CA6)
April Product Instalment Toggle

This widget is used to show the payment instalment toggle, based on the product price (for product page), or any custom price passed as parameter. If the customer enables the payment instalment toggle from here, it will then be reflected on the checkout page meaning that the payment plan option would be selected by default. In addition, if April BNPL Toggle Widget is used on the cart or any other page, the toggle for that widget toggle will be synced with this one.

Allowed Parameters
- Amount (amount) This is the main price based on the instalment price (default value to be passed: productPrice), if you need to pass custom price, you can pass the amount without a currency symbol, for example250
- Instalment Price Color (price_color) This will be the color of payment instalment amount where it would get shown (default value to be passed: #fa5402)
- Instalment Toggle Color (toggle_color) This will be the color of the payment instalment toggle where it would get shown (default value to be passed: #3A3CA6)

Guide to Use Widgets in Pages

1. CMS Pages and Blocks

For CMS Pages, Blocks etc, the widget can be called easily by following steps:

Log in to Admin Panel
Navigate to Content->Blocks->Add New Block (or edit any block)
Click on Insert Widget

Select a widget, for example, April Product Instalment Toggle. The form will have default data, which you may change.
After doing the changes, click on Insert Widget button and then save the block/page.

The same process can be followed for the other two types of April widgets.

Alternatively, if you want to insert the widget using HTML editor of WYSIWYG editor, then you can use it as follows:

{{widget type="April\Lpcheckout\Block\Widget\ProductPriceBnplToggle" amount="productPrice" price_color="#fa5402" toggle_color="#3A3CA6"}}

{{widget type="April\Lpcheckout\Block\Widget\BnplToggle" amount="cartAmount" color="#3A3CA6"}}

{{widget type="April\Lpcheckout\Block\Widget\ProductPriceBnpl" amount="productPrice" color="#fa5402"}}

That's it! Now you will be able to see the changes on the frontend. If you don't see the widgets there, try refreshing the Magento cache.

Reference: https://docs.magento.com/user-guide/cms/editor-widget.html

2. Using Layout (xml)

Layouts provide the structures for web pages using an XML file that identifies all the containers and blocks composing the page. Therefore, the widgets can be added to a page which is not editable directly using WYSIWYG editor using layout files as follows:

April Product Installment Offer

<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="product.info.main">
            <block class="April\Lpcheckout\Block\Widget\ProductPriceBnpl" name="April_product_price_bnpl_demo" after="product.info.price">
                <arguments>
                    <argument name="amount" xsi:type="string">productPrice</argument>
                    <argument name="color" xsi:type="string">#fa5402</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

April BNPL Toggle Widget

<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="checkout.cart.methods">
            <block class="April\Lpcheckout\Block\Widget\BnplToggle" name="april_cart_toggle_demo" before="checkout.cart.methods.onepage.bottom">
                <arguments>
                    <argument name="amount" xsi:type="string">cartAmount</argument>
                    <argument name="color" xsi:type="string">#3A3CA6</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

April Product Installment Toggle

<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="product.info.main">
            <block class="April\Lpcheckout\Block\Widget\ProductPriceBnplToggle" name="april_product_price_toggle_demo" after="product.info.price">
                <arguments>
                    <argument name="amount" xsi:type="string">productPrice</argument>
                    <argument name="price_color" xsi:type="string">#fa5402</argument>
                    <argument name="toggle_color" xsi:type="string">#3A3CA6</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

Basically, two variables are to be considered carefully here,

one would be the container name, under which the widget is to be called, for example product.info.main

second variable is used for positioning the widget with respect to the other child elements of the container which are already present, you may use before and after parameter accordingly, like this:

after="product.info.price"

You may change the arguments to be passed here, such as amount, color etc. All of these parameters are explained in the 1st section of this document.

That's everything you need to add the April widgets to a page!

Reference: https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/layouts/layout-overview.html

2. Using into `.phtml` files

April Product Installment Offer

<?php echo $this->getLayout()->createBlock("April\Lpcheckout\Block\Widget\ProductPriceBnpl")->setAmount("productPrice")->setColor("#fa5402")->toHtml(); ?>

April BNPL Toggle Widget

<?php echo $this->getLayout()->createBlock("April\Lpcheckout\Block\Widget\BnplToggle")->setAmount("cartAmount")->setColor("#3A3CA6")->toHtml(); ?>

April Product Installment Toggle

<?php echo $this->getLayout()->createBlock("April\Lpcheckout\Block\Widget\ProductPriceBnplToggle")->setAmount("productPrice")->setPriceColor("#fa5402")->setToggleColor("#3A3CA6")->toHtml(); ?>