检测查询字符串中的URL更改

Question

我在Shopify产品页面上添加了一些脚本，我需要检测在选择产品选项（由Shopify处理）时发生的URL更改以供进一步使用。

使用查询参数（问号）选择变体时会发生URL更改，如下所示：

Variant 1 - my.shopify.domain/products/product1?variant=1234
Variant 2 - my.shopify.domain/products/product1?variant=5678

我尝试添加'hashchange'事件但后来意识到它只适用于'＃'，这不是这里的情况。

我该怎么办？

Answer 1

请将此脚本粘贴到product.liquid文件中

<script>
  var firstTimeUrl = document.URL;
  document.addEventListener('change', function() {
  var currentPageUrl = document.URL;
  var url = new URL(currentPageUrl);
  var isVariantUrl = url.searchParams.get("variant");
  currentPageUrl = isVariantUrl ? currentPageUrl :isVariantUrl;
    if(currentPageUrl && firstTimeUrl != currentPageUrl) {
      firstTimeUrl = currentPageUrl;
      console.log('variant_id: '+isVariantUrl+'')
    }
  });
</script>