Json 如何在网站页面上显示Shopify购物车的价值（Shopify网站之外）

我正在尝试做以下工作：我正在构建一个标准的HTML/PHP网站。我们将在网站上发布产品。当有人单击“添加到购物车”时，用户将被引导到Shopify，并提供他们的产品信息，该产品将被添加到购物车中（到目前为止没有问题……实现了这一点）。当他们在浏览器中单击“上一步”返回站点（从而离开Shopify购物车）时，我需要能够在标题中显示站点上的产品信息。比如“5种产品| 168.00美元”。。。基本上允许站点访问者（不在shopify中，而是在我们构建的HTML站点中）查看他们购物车中的值，然后在他们想要的时候签出或查看购物车

我遇到了这样一个问题：

我对JSON有点生疏，一直在寻找我正在尝试做的事情的示例，但没有看到它们

---

任何人给我的建议或给我指出正确方向的人都会很棒。

这两页应该能帮助你：

我不确定您现在正在做什么来添加到购物车，但这是“正确”的方法。既然你已经做好了，我就不太担心了

要获得购物车，您应该使用。此API允许您为当前用户拉车，而无需使用链接到的REST版本。那一个是为做更重的提升而设计的（例如，获取所有当前活动的手推车）。AJAX版本简单得多，专门为前端使用而设计。简单地说，打电话就行了

http://[theshop].myshopify.com/cart.js

您将以JSON返回当前会话的购物车内容。它看起来像这样：

{
"items": [
    {
        "handle": "aquarius",
        "line_price": 6000,
        "requires_shipping": true,
        "price": 2000,
        "title": "aquarius - medium",
        "url": "/products/aquarius",
        "quantity": 3,
        "id": 30104042,
        "grams": 181,
        "sku": "",
        "vendor": "the candi factory",
        "image": "http://static.shopify.com/s/files/1/0040/7092/products/aquarius_1.gif?1268045506",
        "variant_id": 30104042
    },
    {
        "handle": "amelia",
        "line_price": 4000,
        "requires_shipping": true,
        "price": 2000,
        "title": "amelia - medium",
        "url": "/products/amelia",
        "quantity": 2,
        "id": 30104012,
        "grams": 200,
        "sku": "",
        "vendor": "the candi factory",
        "image": "http://static.shopify.com/s/files/1/0040/7092/products/2766315_da1b.png?1268045506",
        "variant_id": 30104012
    }
],
"requires_shipping": true,
"total_price": 10000,
"attributes": null,
"item_count": 5,
"note": null,
"total_weight": 947

---

}假设您来自同一个域，Shopify实际上提供了一个JSONP格式的文件（用于访问识别单个用户的Shopify cookies）

换言之：

假设Wordpress网站位于www.example.com

附带的“商店站点”将位于Shop.example.com（确保此域是Shopify端的主域）

要从Wordpress站点访问购物车并使用jQuery将其处理到模板或页面中，您可以调用：

jQuery.ajax({

    url: "//shop.example.com/cart.json",
    dataType: "jsonp",
    success: function( data ) {
        /* Template Code here */
    },
    error: function( jxhr, status, err ) {
        console.log("Error, status = " + status + ", err = " + err);
    }

});

---

JSONP格式的文件允许通过一些Javascript技巧进行跨域AJAX调用。

以防任何人有相同的问题。

---

卡梅隆的回答解决了我的问题。如果您正在将数据类型设置为“jsonp”

请记住将“.js”更改为“.json”，在尝试了许多不同的方法后，包括前面的答案，这是我发现唯一有效的方法。该策略是在父域上设置包含所需信息（在本例中为购物车中的项目数）的cookie，以便具有相同父域的其他网站可以访问该cookie

它需要Shopify商店上的自定义域，即不能与xxxx.myshopify.com一起使用

将新的Javascript文件（例如，

cart.js

）添加到Shopify代码资产中：

function extractDomain(host) {
    let parts = host.split(".");
    parts.shift();
    return parts.join(".");
}

function updateCartCountCookie() {
    fetch('/cart.json')
        .then((data) => {
            data.json().then((cart) => {

                let myDate = new Date();
                myDate.setMonth(myDate.getMonth() + 1);

                document.cookie = 'kh_cart_item_count=' + cart.item_count.toString() + ';expires=' + myDate
                    + ';domain=.' + extractDomain(location.hostname) + ';path=/';
            });
        });
}
/*
 This event fires after cart changes. This is theme dependent and may need to be different.
*/
document.addEventListener("theme:loading:end", () => {
    updateCartCountCookie();
});
/* update on initial load */
document.addEventListener('DOMContentLoaded', () => {
    updateCartCountCookie();
}

在主题模板中包括以下内容：

    <script src="{{ 'cart.js' | asset_url }}" defer></script>

并将此css添加到相应的css文件中：

/* shopping cart icon style */
.kh-cart-count {
  width: 4rem;
  height: 4rem;
  display: flex;
  justify-content: right;

  span {
    font-size: 0.8rem;
    font-weight: bold;
    background: #ff0000;
    color: #fff;
    padding: 1px 1px 1px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    height: 1.2rem;
    width: 1.2rem;
    margin-left: 1.5rem;
    justify-content: center;
    align-items: center;
    position: absolute;
  }

  svg {
    width: 2rem;
    height: 2rem;
    position: absolute;
  }
}

当购物车在不同的窗口中更新时，如果网站在窗口中打开，则不会自动更新，但会在每次页面刷新时更新（或者您可以使用例如

window.setInterval（updatecarcount，10000）；

-有cookie更改事件的草案规范，但尚未可用。）

结果如下所示：

{
"items": [
    {
        "handle": "aquarius",
        "line_price": 6000,
        "requires_shipping": true,
        "price": 2000,
        "title": "aquarius - medium",
        "url": "/products/aquarius",
        "quantity": 3,
        "id": 30104042,
        "grams": 181,
        "sku": "",
        "vendor": "the candi factory",
        "image": "http://static.shopify.com/s/files/1/0040/7092/products/aquarius_1.gif?1268045506",
        "variant_id": 30104042
    },
    {
        "handle": "amelia",
        "line_price": 4000,
        "requires_shipping": true,
        "price": 2000,
        "title": "amelia - medium",
        "url": "/products/amelia",
        "quantity": 2,
        "id": 30104012,
        "grams": 200,
        "sku": "",
        "vendor": "the candi factory",
        "image": "http://static.shopify.com/s/files/1/0040/7092/products/2766315_da1b.png?1268045506",
        "variant_id": 30104012
    }
],
"requires_shipping": true,
"total_price": 10000,
"attributes": null,
"item_count": 5,
"note": null,
"total_weight": 947

---

显然，您可以扩展此功能以传递除购物车项目计数之外的其他数据。

感谢您的回复。上周我们在这方面做了一段时间，遇到的问题是将shopify中的信息拉到我们自己的网站上，这似乎不起作用。Shopify中是否有防止将信息（购物车中的内容）拉到远程站点的安全功能？没有。您可能会遇到问题，但数据应该是可用的。对，您将如何处理/cart/clear.js，例如，没有/cart/clear.json版本我已经查看了许多关于这个特定问题的答案，并尝试了许多排列形式的

$.ajax

/

$.get

/

$.getJSON

和您的答案，添加了

方法：“get”

，这就是为我做这件事的方法。非常感谢。这种方法不再有效。Shopify设置的用于标识购物车的cookie具有购物车的域，而不是父域，因此不会随ajax调用一起发送，因此结果始终是一个空购物车。@Clyde您第一次注意到这一点是什么时候？我在几个网站上都看到了这一点。当我试图实现它时——比如10月2日。不知道它是什么时候改变的。@ClivePortman，如果您没有看到它，我找到了另一个解决方案-请参见以下内容：