Magento 1.9 – How to Remove Item from Minicart

ajaxjquerymagento-1.9

i want to remove item from minicart but using custom jquery ui popup.
here is the default code

template/checkout/cart/minicart/default.phtml

        <?php if (!$this->isOnCheckoutPage()): ?>
            <a href="<?php echo $this->getAjaxDeleteUrl() ?>" title="<?php echo $this->__('Remove This Item') ?>"
               data-confirm="<?php echo $this->__('Are you sure you would like to remove this item from the shopping cart?') ?>"
               class="remove">
                <?php echo $this->__('Remove Item') ?>
            </a>
        <?php else: ?>
            <span><?php echo $this->__('Remove Item') ?></span>
        <?php endif; ?>
    <?php endif ?>

This works fine.but i want custom popup instead of default alert. so i used jquery popup.

          <div id="dialog123" title="Confirmation Required">
                Are you sure you would like to remove this item from the shopping cart?
            </div>
            <a href="<?php echo $this->getAjaxDeleteUrl() ?>" title="<?php echo $this->__('Remove This Item') ?>" class="remove-this-item">
               <?php echo $this->__('Remove Item') ?>
            </a>
            <script type="text/javascript">
            var $x=jQuery.noConflict();
                $x(document).ready(function() {
                $x("#dialog123").dialog({
                    autoOpen: false,
                    modal: true
                    });
                });

            $x(".remove-this-item").click(function(e) {
                e.preventDefault();
                var targetUrl = $x(this).attr("href");

                $x("#dialog123").dialog({
                buttons : {
                "Confirm" : function() {
                window.location.href = targetUrl;
                },
                "Cancel" : function() {
                $x(this).dialog("close");
                }
                }
            });

            $x("#dialog123").dialog("open");
            });
            </script>

using this popup only i have to perform ajax delete operation.
above code redirects to next page when confirmed YES.

Best Answer

I would suggest to check javascript file for native minicart functionality, it is located in: /skin/frontend/rwd/default/js/minicart.js

check removeItem function, it has the following AJAX logic:

$j.ajax({
            type: 'POST',
            dataType: 'json',
            data: {form_key: cart.formKey},
            url: el.attr('href')
        }).done(function(result) {
            cart.hideOverlay();
            if (result.success) {
                cart.updateCartQty(result.qty);
                cart.updateContentOnRemove(result, el.closest('li'));
            } else {
                cart.showMessage(result);
            }
        }).error(function() {
            cart.hideOverlay();
            cart.showError(cart.defaultErrorMessage);
        });

just copy this logic with some amends in your confirm's callback.

You might have something like this:

    var minicartOptions  = {
    formKey:           "<?php echo $this->getFormKey();?>"
}

var $x=jQuery.noConflict();
$x(document).ready(function() {
    $x("#dialog123").dialog({
        autoOpen: false,
        modal: true
    });
});

$x(".remove-this-item").click(function(e) {
    e.preventDefault();
    var targetUrl = $x(this).attr("href");

    $x("#dialog123").dialog({
        buttons : {
            "Confirm" : function() {
                $j.ajax({
                    type: 'POST',
                    dataType: 'json',
                    data: {form_key: minicartOptions.formKey},
                    url: targetUrl
                }).done(function(result) {
                    /**
                     * @TODO customize success callback according to your needs.
                     */
                    cart.hideOverlay();
                    if (result.success) {
                        cart.updateCartQty(result.qty);
                        cart.updateContentOnRemove(result, el.closest('li'));
                    } else {
                        cart.showMessage(result);
                    }
                }).error(function() {
                    /**
                     * @TODO customize error callback according to your needs.
                     */
                    cart.hideOverlay();
                    cart.showError(cart.defaultErrorMessage);
                });
            }
                window.location.href = targetUrl;
            },
            "Cancel" : function() {
                $x(this).dialog("close");
            }
        }
    });

NOTE: this is ugly version that needs to be refactored first :)

Related Topic