时间戳

首页 > 解决方案 > 检测没有散列或后退/前进弹出状态的 URL 更改

javascript - 检测没有散列或后退/前进弹出状态的 URL 更改

问题描述

TLDR；

我有一个 URL，其结尾位会随着选项选择更改而更改：

www.mywebsite.com?variant=13390743207991

或者

?variant=13400659984439

我想知道是否有办法检测到这种变化。我已经能够做到这一点，setInterval并且只需每 0.5 秒抓取一次 URL 即可检测到更改，但是还有比这更有效的方法吗？

完整的故事

我对这个javascript领域相当陌生，如果我错了，请纠正我。

我正在为 Shopify 网站开发一些工作。据我所见，Shopify 为特定产品提供了一个产品变体选择器，在其中动态填充更改所选产品和产品价格。

在向选择表单添加新类后，我意识到它们在创建时会自动删除，这使我很难检查是否选择了新选项。它的一个示例如下所示：

 <select name="id"  id="productSelect-{{ product.id }}" class="product-single__variants">
  {% for variant in product.variants %}
    {% if variant.available %}
      <option  {% if variant == current_variant %} selected="selected" {% endif %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }}</option>
    {% else %}
      <option>
        {{ variant.title }} - {{ 'products.product.sold_out' | t }}
      </option>
    {% endif %}
  {% endfor %}
</select>

我创建了一个实用程序来检测用户访问者的地理位置，以相应地调整产品的价格（美元、加元等）。

考虑到我无法检测到 Shopify 气泡之外的变体是否发生了变化，一旦变体发生变化，我就无法调整显示的价格。它最初是通过液体代码中的赋值变量进行调整的。

但是，我确实注意到，页面的 URL 会随着变体的变化而变化：

?variant=13390743207991

或者

?variant=13400659984439

这个额外的位被标记在 URL 的末尾。

我想知道是否有任何方法可以检测到此 URL 更改，这样我可以在选择变体时最终调整价格。

标签： javascriptliquid

解决方案

如果您使用默认的 shopify 脚本，请使用它们提供的回调。更多信息在这里。

  var selectCallback = function(variant, selector) {
    // do stuff
  }

  new Shopify.OptionSelectors('product-variant-selector', {
    product: {{ product | json }},
    onVariantSelected: selectCallback, 
    enableHistoryState: true 
  });

推荐阅读