AJAX 自定义购物车请求后重新呈现购物车

Question

我正在构建一个 Shopify 应用程序，它提供与某些已识别产品相关的附加产品或服务。在某些情况下，我最终会从购物车页面将产品添加到购物车。

我发现对购物车更改采取行动非常有用。问题是我目前被迫重新加载页面以重新呈现购物车和新产品。我自己无法合理地重建购物车以包含新商品。

因此，有没有办法触发购物车的“AJAX 呈现”并避免重新加载整页？

Answer 1

您可以通过多种方式实现这一目标，具体取决于您的最终目标。根据您的描述，我了解到您只是想让您的脚本在购物车页面上运行。但是，请注意，用户可以在不访问购物车页面的情况下进入结帐页面。所以只需涵盖所有用例。

如果您必须在主题中而不是在应用程序中执行此操作，这会容易得多。因为，您的应用程序对购物车页面的标记一无所知，所以将新产品行附加到现有 table 并不容易。作为解决方法，在添加新产品时，通过 Ajax 调用购物车页面，解析返回的 HTML 并替换购物车表单。因此添加新产品后，只需调用以下代码即可在购物车页面重新呈现产品表单。

function RerenderCart() {
  $.get("/cart", function (data) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(data, "text/html");
    const formSelector = doc.querySelector("form[action='/cart']");
    $("form[action='/cart']").replaceWith(formSelector);
  });
}

添加购物车页面检查，如果在返回的表单中找到表格 HTML。

此代码在 Debut Shopify 主题上运行良好。只需在所有用例上对其进行彻底测试即可。

DOMParser

AJAX 自定义购物车请求后重新呈现购物车

AJAX re-rendering of the cart after custom cart requests

shopify

shopping-cart

shopify-app