remove item from minicart in magento 1.9x

Question

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.

Answer 1

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 :)

Answer 2

 window.location.href = targetUrl;

it will redirect to you to the next page. your code is trying to process ajax request on the next page. it will throw error. try putting ajax code in confirm section.

Answer 3

\app\design\frontend\rwd\default\template\checkout\cart\minicart\default.phtml

In above file add the below code after

<a href="#" onclick="return false;" class="details">
    <?php echo $this->__('Details') ?>
</a>


 <span>
   <a href="<?php echo $this->getAjaxDeleteUrl() ?>" title="<?php echo      Mage::helper('core')->quoteEscape($this->__('Remove This Item')) ?>" data-confirm="<?php echo $this->__('Are you sure?') ?>"class="remove"><?php echo $this->__('Remove') ?></a>
 </span>