Question

在Shopify商店中，我有一些产品缺货变种，一切运作良好，只有当选择了缺货变种时，网址不会改变。虽然购买按钮从买入更改为无法使用。

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

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

*唯一可用的变体是42号，其余的缺货。正如您所看到的，网址不会改变。即使变体不可用，我该怎么做才能更新该网址？

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

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

Answer 1

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

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

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

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

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

1 个答案: