3

我正在尝试执行以下操作：我正在构建一个标准的 HTML/PHP 网站。我们将在网站上提供产品。当有人点击“添加到购物车”时，用户将被引导到 Shopify 并提供他们的产品信息，并且该产品将被添加到购物车（到目前为止没问题......完成了）。当他们在浏览器中单击返回以返回站点（从而离开 Shopify 购物车）时，我需要能够在标题中显示站点上的产品信息。诸如“5 个产品 | $168.00”之类的东西......基本上允许网站访问者（不在 shopify 中，而是在我们构建的 HTML 网站中）查看他们购物车中的值，然后在他们想要的时候结帐或查看购物车。

我遇到了这个：http ://api.shopify.com/cart.html#show

我对 JSON 有点陌生，正在寻找我正在尝试做的事情的例子，但没有看到它们。

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

4

4 回答 4

8

Shopify 实际上提供了一个 JSONP 格式的文件，假设您来自同一个域（以访问识别个人用户的 Shopify cookie）。

换句话说：

假设一个 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 调用。

于 2014-07-20T02:50:40.673 回答
2

这两个页面应该可以帮助您：

从远程网站添加到购物车

我不确定您现在正在做什么以添加到购物车，但这是“正确”的做法。鉴于您已经完成了这项工作，我不会太担心。

要获取购物车，您应该使用AJAX API。此 API 允许您在不使用您链接到的 REST 版本的情况下为当前用户拉购物车。那个是为进行更重的提升而设计的（例如，获取所有当前活动的推车）。AJAX 版本更简单，专为前端使用而设计。简单来说，只需调用

http://[the-shop].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

}

于 2012-04-28T00:19:37.410 回答
1

万一有人遇到同样的问题。Kameron的回答解决了我的问题。如果您将 dataType 设置为“jsonp”，请记住将“.js”更改为“.json”

于 2014-10-15T03:56:04.433 回答
0

在尝试了许多不同的方法（包括以前的答案）之后，这是我发现唯一有效的方法。该策略是在父域上设置一个包含所需信息（在本例中为购物车中的商品数量）的 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>

现在，cookiekh_cart_item_count将设置在父域上，其中包含购物车中的商品数量。

在托管在同级域上的外部网站中，在您希望购物车出现的任何位置添加此 html 片段：

<script>
    function getCookieValue(a) {
        var b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)');
        return b ? b.pop() : '';
    }
    document.addEventListener("DOMContentLoaded", () => {
        let count = getCookieValue("kh_cart_item_count");
        let el = document.getElementById("kh-cart-count")
        if (el) {
            el.innerText = count.toString();
            if (!!count && parseInt(count) !== 0)
                el.classList.remove("invisible");
        }
    });
</script>
<style>
</style>
<a href="https://shop.example.com/cart" class="kh-cart-count ml-auto mr-1">

    <svg class="icon icon--cart" viewBox="0 0 27 24" role="presentation">
        <g transform="translate(0 1)" stroke-width="2" stroke="grey" fill="none" fill-rule="evenodd">
            <circle stroke-linecap="square" cx="11" cy="20" r="2"></circle>
            <circle stroke-linecap="square" cx="22" cy="20" r="2"></circle>
            <path d="M7.31 5h18.27l-1.44 10H9.78L6.22 0H0"></path>
        </g>
    </svg>
    <span id="kh-cart-count" class="kh-cart-count invisible">0</span>
</a>

并将这个 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(updateCartCount, 10000);- 有一个 cookie 更改事件的规范草案但它尚不可用。）

结果如下所示：

带号码的购物车

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

于 2020-10-03T02:09:43.300 回答