mots
mots

Reputation: 315

confirmation message before deleting an item from cart

Is there a way in prestashop to show a confirmation message before an item is removed from the cart in prestashop 1.7? I'd just like to be pointed to the file that contains this method so that I may be able to add a confirm dialog, since right now a user can just delete without confirmin

Upvotes: 1

Views: 1784

Answers (1)

Divyesh Prajapati
Divyesh Prajapati

Reputation: 985

Yes, you can show confirm dialog before deleting item from cart. By default core.js and theme.js file handles all events and update cart accordingly on updateCart event. (Refer more on events here)

To overcome default behaviour adding js prior to theme.js will help us to prevent default click event. Follow below mentioned step by step guide to load you own js and add confirmation dialog on item delete.

1) Register your js in theme.yml (More details here) by adding below code under assets

themes/{your_theme}/config/theme.yml

assets:
  js:
    cart:
      - id: cart-extra-lib
        path: assets/js/cart-lib.js
        priority: 30

2) Create file cart-lib.js under themes/{your_theme}/assets/js and add below code into it.

themes/{your_theme}/assets/js/cart-lib.js

function refreshDataLinkAction() {
    $('[data-link-action="delete-from-cart"]').each(function(){
        $(this).attr('data-link-action', 'confirm-remove-item');
    });
}

$(document).on('click', '[data-link-action="confirm-remove-item"]', function(e) {
    e.preventDefault();
    if (confirm('Are you sure you want to remove product from cart?')) {
        $(this).attr('data-link-action', 'delete-from-cart');
        $(this).trigger('click');
    }
    return false;
});

$(document).ready(function () {
    refreshDataLinkAction();
    prestashop.on('updatedCart', function (event) {
        refreshDataLinkAction();
    });
});

3) Now, to load your js file you need to delete file config/themes/{your_theme}/shop1.json (Reference)

4) Add products to cart and check cart; delete items you will see confirmation message. Attaching image for reference.

enter image description here

Upvotes: 3

Related Questions