Ajaxify link 以便它仍然可以在点击时访问地址但不会更改页面

Question

我有一个 link 可以从购物车中删除商品，但当您单击 link 时，它会将您重定向到购物车，该商品现已删除。是否有可能使您仍然可以单击它并且它仍然执行其操作但它不会更改页面（即它不会将用户发送到购物车）？

注意：我在 Shopify 上使用 Liquid

Link:

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

Answer 1

您可以改用 cart js 让您的东西按您想要的方式工作。这是 shopify 购物车 js 的详细信息 - cart js Reference

最好的方法是通过 CartJS.removeItem 函数发送订单项编号。您还可以使用 removeItemById 按 ID 删除购物车商品。

它提供 cart.requestComplete 事件侦听器，您可以在其中编写代码以在删除项目请求完成后重新加载页面。

Answer 2

因为你有 jQuery 包括尝试添加以下脚本

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

     });
  });
});

Answer 3

是的，你可以做到

AJAX 代表异步 JavaScript 和 XML.

顾名思义，就是用来处理异步数据传输的。

为此，

将HTML改为

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

然后添加JavaScript代码

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();
}

如果需要，您也可以使用 HTTP POST。

Ajaxify link 以便它仍然可以在点击时访问地址但不会更改页面

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

html

javascript

jquery

liquid

shopify

是的，你可以做到