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

【问题标题】：Product URL does NOT change when out-of-stock variant is clicked - Shopify单击缺货变体时，产品 URL 不会更改 - Shopify
【发布时间】：2018-03-09 12:17:57
【问题描述】：

在 Shopify 商店中，我有一些产品缺货变体，一切正常，除了选择缺货变体时 url 不会改变。虽然购买按钮从购买变为不可用。

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

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

*唯一可用的款式是 42 号，其余均无货。正如你所看到的，网址没有改变。即使该变体不可用，我该怎么做才能更新该网址？

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

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

【问题讨论】：

你自己在这里。如果没有与您的问题相关的代码表明您自己尝试过某些东西，我们将无法为您提供解决方案。目前你正在找人调试你的代码，这不是 StackOverflow 的目的。
您能否从呈现所有“尺寸”的主题中添加您的液体代码。在其他情况下@drip 是对的，没有人可以帮助你

标签： javascript html shopify liquid

【解决方案1】：

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

我查看了您的店面，发现 selectCallback 函数位于主 HTML 文档中，而不是您资产文件夹中的脚本文件之一。这通常意味着您可以在与您的产品形式相同的 sn-p 中找到该功能。

函数开头附近有一个部分，在渲染时看起来像这样：

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 阅读更多内容）

【讨论】：