对 Shopify 的 /cart/add.js 的 Ajax POST 请求总是返回错误回调函数答案

【问题标题】：Ajax POST request to Shopify's /cart/add.js always returning on error callback function对 Shopify 的 /cart/add.js 的 Ajax POST 请求总是返回错误回调函数
【发布时间】：2025-12-03 15:50:01
【问题描述】：

$.ajax({
                                    type: 'POST',
                                    url: '/cart/add.js',
                                    data: {
                                        quantity: 1,
                                        id: form_data
                                    },
                                    success: function(response) {
                                        console.log('in success');
                                        var url = $("#af-btn").attr("href");

                                        window.location.href = $("#af-btn").attr("href");
                                    },
                                    error: function(response) {
                                        console.log(response + "in error");
                                        var url = $("#af-btn").attr("href");

                                        //window.location.href = $("#af-btn").attr("href");

                                    },
                                    complete: function(response) {
                                        console.log(response);
                                    }
                                });

以上是我的 AJAX 请求。以下是响应对象。

添加到购物车以显示匿名行为，有时会添加产品，有时不会添加产品。想不通。有什么想法吗？
下面是form_data

我如何检索它的值，

var form_data = $('form[action="/cart/add"]').find('select[name="id"]').find(":selected").val();

【问题讨论】：

响应对象似乎没问题（statusText = ok，responseText 是一个json字符串）...什么错误？
错误回调函数中的代码总是被执行，而不是成功回调函数中的代码。
使用错误事件的其他参数来获取更多细节：替换“error: function(response) {console.log(response + "in error");"与：“错误：函数（响应，txtStatus，txtThrown）{console.log（txtStatus）；console.log（txtThrown）；}”
txtStatus = parsererror txtThrown = 是语法错误，vendor.js 中的意外令牌，托管在 Shopify cdn 上。
你有它。显然，这是您问题的根源。

标签： javascript jquery ajax shopify cart

【解决方案1】：

在一个实例中，标准的 AJAX 调用也给我带来了错误（甚至认为该产品已包含在购物车中）。

所以我使用他们的 API 进行 AJAX 调用。以下是所有功能的链接：http://mayert-douglas4935.myshopify.com/pages/api

例如添加项目很简单：

  Shopify.addItem($productVal, $productQTY, function(){
    // Do Something here once the product is added
    console.log('Success!!!')
  });

PS：

请记住，您需要包含此脚本才能访问调用：

{{ 'api.jquery.js' | shopify_asset_url | script_tag }}

【讨论】：

我可以在任何地方使用他们的 jquery 吗？因为我没有开发 shopify 主题，我正在使用 PHP 开发应用程序。

【解决方案2】：

这就是我在 Shopify 应用程序中使用 Shopify Ajax Api 的方法，该应用程序的脚本是通过 Shopify Admin API ScriptTag 添加的。

1- 加载 Shopify jQuery Ajax Api 包装器

function loadShopifyAjaxApiScript()
{

var script = document.createElement("script");
script.rel = "text/javascript";
script.src = "https://cdn.shopify.com/s/assets/themes_support/api.jquery-0ea851da22ae87c0290f4eeb24bc8b513ca182f3eb721d147c009ae0f5ce14f9.js";
document.getElementsByTagName("head")[0].appendChild(script);

}

2- 然后像下面这样使用它：

            Shopify.addItem(variantId , 1 , function () {
            console.log('success');
        });

资源链接：API jQuery Ajax Shopify Sandbox

【讨论】：