Question

我正在构建一个Shopify应用，该应用提供与某些已识别产品相关的其他产品或服务。在某些情况下，我最终从购物车页面向购物车添加了产品。

我发现this question非常有用，可以对购物车的更改进行操作。问题是我目前被迫重新加载页面以重新呈现购物车和新产品。我自己无法合理地重构购物车以包含新物品。

因此，是否可以触发购物车的“ AJAX渲染”并避免重新加载整页？

Answer 1

您可以根据自己的最终目标以多种方式实现这一目标。根据您的描述，我了解到您只希望脚本在“购物车”页面上运行。但是，请注意，用户无需进入“购物车”页面即可进入“结帐”页面。因此，只需涵盖所有用例即可。

如果您必须在主题中而不是在应用程序中执行此操作，则可以轻松得多。由于您的应用对购物车页面的标记一无所知，因此仅将新产品行附加到现有表中并不容易。解决方法是，在添加新产品时，通过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中找到表格。

此代码在首次亮相Shopify主题上正常工作。只需在所有用例上进行全面测试即可。

DOMParser

自定义购物车请求后，AJAX重新渲染购物车

1 个答案: