4

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.

5

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');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.