text 添加到购物车弹出窗口后

Posted 2021-04-30

https://www.mageplaza.com/review/ajax-cart/

In product page you can obtain it with this code.

In vendor/magento/module-catalog/view/frontend/templates/product/view/addtocart.phtml add at the end the modal div

<div id="addtocart_modal" style="display: none;"></div>

more, add the below attribute to the submit button with class="action primary tocart", so you could pass product name to the modal

data-name="<?php echo $_product->getName() ?>"

Now, in vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js after

self.enableAddToCartButton(form);

add the code to init the modal

var cartUrl = url.build('checkout/cart');
var modal_options = {
    type: 'popup',
    buttons: [
        {
            text: "&laquo; Continue shopping",
            class: 'primary btn-lg btn-info addtocart_modal_continue',
            click: function () {
                this.closeModal();
                return false;
            }
        },                        
        {
            text: "Go to cart &raquo;",
            class: 'primary btn-lg btn-success addtocart_modal_gotocart',
            click: function () {
                location.href = cartUrl;
                return false;
            }
        }
    ]
};

var popup = $('#addtocart_modal');
var product_name = form.find("button").data("name");

// reset modal content every time
popup.html("");
popup.append("<div>The product " + product_name + " is added to your cart</div>");
popup.modal(modal_options);
popup.modal('openModal');

It's done! If you need this modal also in catalog page or everywhere there is an add to cart button keep this logic and adjust it.

PS: override core files is a bad practice, so take in mind to override the files in your module/theme