Shopify Question posted in
The Shopify help center can be found here.

Ajaxify link so that it still accesses address on click but doesn't change page – Shopify

I’ve got a link that removes an item from a cart, except that when you click that link it redirects you to the cart with the item now removed. Is it possible to make it so that you can still click it and it still does its thing but it doesn’ change the page (i.e. it doesn’t send the user to the cart)?

Note: I’m working with Liquid on Shopify

Link:

<a href="/cart/change?line={{ forloop.index }}&amp;quantity=0" class="cart__remove">
                <small>{{ 'cart.general.remove' | t }}</small>
</a>
Tags:

3

Answers


  1. 0

    You can make use of cart js instead for make your things work as you want. Here is the details on shopify cart js – cart js Reference

    The best way will be to send the line item number through the CartJS.removeItem function. You can also remove a cart item by it’s id using removeItemById.

    It provides cart.requestComplete event listener where you can code to reload your page after remove item request is completed.

    Login or Signup to reply.
  2. 0

    Since you have jQuery included try adding the following script

    jQuery(function($){
  $(document).on('click', 'a.cart__remove', function(e){
     e.preventDefault();
     var url = this.href;
     $.get(url, function(html){
       // here you know that the page the link was pointing to has executed
       // you might need to reload your card or parse it from the html you get here
       // because the index of the cart items has changed after removing one of them
       // and because you also need to update your shown cart to hide/remove the item that was selected

     });
  });
});
    Login or Signup to reply.
  3. 0

    Yes You can do

    AJAX Stands for Asynchronous JavaScript and XML.

    As the name suggests, it is used to deal with asynchronous data transfer.

    For that,

    Change the HTML to

    <a onclick="removeCart('id');" class=" cart__remove "> <!--id indicates id of item as mentioned in your url //-->
    <small>{{ 'cart.general.remove' | t }}</small>
</a>

    Then add the JavaScript code

    function removeCart(){
  var url = "cart/change?&quantity=0&line="+id;
  xhr = new XMLHttpRequest();
  //create an XHR object constructor
  xhr.open("GET",url,true);
  xhr.onreadystatechange=function(){
    if(xhr.status==200 && xhr.readyState==4){
      //Will execute if the request is success
      //Show some message to user saying that the item is removed
      //for example
      alert("Item removed");
    }
  }
  xhr.send();
}

    You can also use HTTP POST if you want.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search