0

I have added products on the homepage using the widget, how to enable ajax for add-to-cart button and wishlist button of product widgets.

asked Apr 19, 2021 at 9:21

2 Answers 2

3

To enable AJAX add to cart on home page, You need to add small JS code

create:

app/design/frontend/{Package}/{theme}/Magento_Theme/layout/cms_index_index.xml

<?xml version="1.0"?>
 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <body>
 <referenceContainer name="content">
 <block class="Magento\Framework\View\Element\Template" name="myaddto" template="Magento_Theme::myaddto.phtml"/>
 </referenceContainer>
 </body>
 </page>

create:

app/design/frontend/{Package}/{theme}/Magento_Theme/templates/myaddto.phtml

<script type="text/x-magento-init">
{
 "[data-role=tocart-form]": {
 "catalogAddToCart": {}
 }
}
</script>

Note: If you have any other custom phtml on home page, you can add above in that file as well!

answered Apr 19, 2021 at 13:08
4
  • How to update the "Add to Cart" text to "Show Now"? Commented Apr 19, 2021 at 14:23
  • Based on template, you can update text.for example for new products /vendor/magento/module-catalog/view/frontend/templates/product/widget/new/content/new_grid.phtml. OR just enable template path hind for phtml Commented Apr 19, 2021 at 14:28
  • Path: app\design\frontend\Zero\my_theme\Magento_PageBuilder\templates\catalog\product\widget\content\carousel.phtml Code: Line Number : 11 codeshare.io/G7wJob Commented Apr 19, 2021 at 15:50
  • After the update text is showing "Shop Now", After clicking the show now button again its changed to Add to Cart text, how to update my text permanently? Commented Apr 19, 2021 at 15:52
0

You have to override addtocart.phtml file

app/design/frontend/vendorname/themename/Magento_Catalog/templates/product/view/addtocart.phtml

Now Just Replace "bindSubmit": false to "bindSubmit": true

<script type="text/x-magento-init">
 {
 "#product_addtocart_form": {
 "catalogAddToCart": {
 "bindSubmit": false
 }
 }
 }
</script>

To

<script type="text/x-magento-init">
 {
 "#product_addtocart_form": {
 "catalogAddToCart": {
 "bindSubmit": true
 }
 }
 }
</script>

Now delete cache and page_cache folder or flush cache.

Note: Make sure you have to set No from Store->Configuration->Sales->Checkout->Shopping Cart->After Adding a Product Redirect to Shopping Cart to No

answered Apr 19, 2021 at 12:58
1
  • Path : app\design\frontend\Zero\my_theme\Magento_Catalog\templates\product\view\addtocart.phtml Code: codeshare.io/5zZlMW Not working, if i click add-to-cart page loading. Commented Apr 19, 2021 at 13:59

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.