Magento2 - Show Instant Purchase on product listing

magento.stackexchange https://magento.stackexchange.com/questions/254996

Question

By default Instant-purchase button is shown on product details page, but I want it also to be shown on Product listing as well.

I searched in backend, but didn't find any solution. How can this be done via custom programing ?

Anyone help to me.

Was it helpful?

Solution

Step 1) Create catalog_product_view.xml file in your Design, Under

/app/design/frontend/Vendor_Name/Theme_Name/Magento_Catalog/layout/catalog_product_view.xml

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>

       <referenceBlock name="catalog.product.related">
            <block name="product.info.addtocart.instantPurchase.additional.custom" class="Magento\InstantPurchase\Block\Button" template="Magento_InstantPurchase::button.phtml" before="-">
                <arguments>
                    <argument name="jsLayout" xsi:type="array">
                        <item name="components" xsi:type="array">
                            <item name="instant-purchase" xsi:type="array">
                                <item name="component" xsi:type="string">Magento_InstantPurchase/js/view/instant-purchase</item>
                                <item name="config" xsi:type="array">
                                    <item name="template" xsi:type="string">Magento_InstantPurchase/instant-purchase</item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

Step 2) Override items.phtml file Under your theme

/app/design/frontend/Vendor_Name/Theme_Name/Magento_Catalog/templates/product/list/items.phtml

In this File Create Hidden input element Under <div class="actions-primary">

 <input type="hidden" name="insta-prod-id" value="<?=$_item->getId();?>"/>

And call Child Block after addToCart Button

 <?php
                    echo $block->getChildBlock('product.info.addtocart.instantPurchase.additional.custom')->getChildHtml();           
                ?>

Step 3) Override instant-purchase.js file Under your theme.

/app/design/frontend/Vendor_Name/Theme_Name/module-instant-purchase/web/js/view/instant-purchase.js

Replace instantPurchase Function under this file.

instantPurchase: function (data,event) {
      var  target= event.currentTarget;
    console.log(event.currentTarget);
    console.log($(target).closest("div.naumen-div").find("input[name='insta-prod-id']").val());

    var newEle=$(target).closest("div.naumen-div").find("input[name='insta-prod-id']").val();
    var form = $(this.productFormSelector),
        confirmTemplate = mageTemplate(confirmationTemplate),
        confirmData = _.extend({}, this.confirmationData, {
            paymentToken: this.paymentToken().summary,
            shippingAddress: this.shippingAddress().summary,
            billingAddress: this.billingAddress().summary,
            shippingMethod: this.shippingMethod().summary
        });

    if (!(form.validation() && form.validation('isValid'))) {
        return;
    }
   // form.append(newEle);
    confirm({
        title: this.confirmationTitle,
        content: confirmTemplate({
            data: confirmData
        }),
        actions: {
            /** @inheritdoc */
            confirm: function () {
                $.ajax({
                    url: this.purchaseUrl,
                    data: form.serialize()+'&newMyID='+newEle,
                    type: 'post',
                    dataType: 'json',

                    /** Show loader before send */
                    beforeSend: function () {
                        $('body').trigger('processStart');
                    }
                }).always(function () {
                    $('body').trigger('processStop');
                });
            }.bind(this)
        }
    });
}

Step 4) Preference the PlaceOrder.php Action using di.xml file.

Under this Get the insta-prod-id value in that Action.

$productId = (int)$request->getParam('insta-prod-id');
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top