检测查询字符串中的 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>