Shopify 脚本标签

Question

我正在通过 api 在我的商店中添加脚本标签。脚本标签加载正常。在脚本标签中，我添加了这段代码：

Shopify.onItemAdded = function(line_item) {
  console.log(line_item.title + ' was added to your shopping cart.');
};

因此，每当将产品添加到购物车时，我都会收到回调。所以我想在这里做一些工作。但是这个函数从来没有被调用过。

你们能告诉我我可能做错了什么吗？

Answer 1

您的脚本加载到的主题可能没有使用 ajax-购物车。据我所知，没有通用的方法来监控购物车中添加的项目，因为有几种方法可以发生。

将东西添加到购物车的一种方式是通过传统的 POST，所以不会有任何事件，所以如果您要检查购物车，则必须在页面加载时这样做。在这种情况下，您可以在 window.sessionStorage 中缓存购物车客户端并在页面加载时检查它是否有更改。

如果您的脚本安装在使用某种 ajax 添加到购物车或购物车更新的站点中，那么您可以在页面加载时将购物车存储在 sessionStorage 中，然后轮询 cart.js一些合理的基础并将其与保存的购物车进行比较。这可能对移动用户非常不友好，但我在人们的帐户中看到更糟糕的情况。

如果正在使用 ajax-cart，那么您的脚本将破坏与它的其他集成。因为它不是真正的事件库，所以您需要做的是：

(function(){
    var defaultAction = Shopify.onItemAdded;
    Shopify.onItemAdded = function(line_item){
        if(defaultAction){
            try{
                defaultAction.apply(Shopify, arguments);
            }finally{
                //your override
                console.log(line_item.title + ' was added to your shopping cart.');
            }
        }
    };
})()

处理购物车更新的另一种方法会比较费力。

您的应用需要一个应用程序代理、一个 websockets 客户端和一个卡片更新 webhook。应用程序代理为 websocket 客户端提供相同的主机通道。

当页面加载时，您检查购物车。如果你有购物车，你打开一个 websocket 连接并注册购物车令牌。

如果应用程序收到与您的令牌匹配的购物车更新，它会将购物车发送到您的 websocket 侦听器。

如果您的购物车是通过 ajax 而不是通过 ajax-购物车 api 更新的，那么这将不起作用，因此您将返回到轮询初始购物车负载。

Shopify 脚本标签

Shopify Script Tag

javascript

shopify

shopify-app