javascript - 单击缺货变体时，产品 URL 不会更改 - Shopify

Question

在 Shopify 商店中，我有一些缺货变体的产品，一切正常，只是当选择缺货变体时，网址不会更改。尽管购买按钮从“购买”变为“不可用”。

以下产品就是一个明显的例子:

https://lacondesa.myshopify.com/collections/mujer/products/bribon?variant=54651326791

*唯一可用的型号是 42 码，其余均缺货。正如您所看到的，网址没有改变。即使变体不可用，我该如何更新该网址？

这似乎并不重要，除了我安装了一个“通知我”应用程序，该应用程序仅在检测到所选变体缺货时才会显示弹出窗口。因此是

这可能是一个愚蠢的问题，但我无法找到解决方案。感谢您的帮助。

Answer 1

您的商店使用相当标准的主题风格。长话短说，您应该查找名为 selectCallback 的函数，并添加一行代码以在变体不可用的情况下更新历史状态。

我查看了您的店面，在主 HTML 文档中找到了 selectCallback 函数，而不是在您的 Assets 文件夹中的脚本文件之一中找到了该函数。这通常意味着您可以在包含产品表单的同一代码段中找到该函数。

函数开头附近有一个部分，渲染时如下所示:

if (variant.available) {
  // We have a valid product variant, so enable the submit button
  addToCart.removeClass('disabled').removeAttr('disabled').val(window.inventory_text.add_to_cart);

} else {
  // Variant is sold out, disable the submit button
  addToCart.val(window.inventory_text.sold_out).addClass('disabled').attr('disabled', 'disabled');
}

禁用“添加到购物车”按钮后，您可以添加一行代码以使用正确的 URL 更新历史记录状态。像这样的事情应该可以解决问题:

if (history.replaceState) {
  var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?variant=' + variant.id;
  window.history.replaceState({path:newurl}, document.title, newurl);
}

(我是这些历史状态事物的业余爱好者 - 阅读更多内容 https://developer.mozilla.org/en-US/docs/Web/API/History )