Shopify Question posted in
The Shopify help center can be found here.

Detect URL change without a hash or back/forward popstate – Shopify

TLDR;

I have a URL that has a ending bit that changes upon a option select change:

www.mywebsite.com?variant=13390743207991

or

?variant=13400659984439

I’m wondering if there is a way to detect this change. I’ve been able to do this with a setInterval and just grab the URL ever 0.5 seconds to detect a change, but is there a more effective way than this?

The full story

I’m fairly new to this area of javascript, so correct me if I’m wrong.

I’m developing some work for a Shopify website. From what I can see, Shopify offers a product variant selector for a specific product, in which it is populated dynamically changing the selected product and product price.

Upon adding new classes to the selection form I realize they get removed automatically upon creation making it difficult for me to check on my end if a new option is selected. An example of it looks something like this:

 <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>

I have created a utility to detect geolocation on user vistior to adjust the price of the product accordingly (USD, CAD etc.).

Considering I’m having trouble detecting if a variant has changed outside of Shopify’s bubble, I’m having trouble adjust the displayed price once the varient changes. It is originally adjust through an assignment variable within the liquid code.

I do notice, however, the URL of the page changes upon variant change:

?variant=13390743207991

or

?variant=13400659984439

That extra bit gets tagged on the end of the URL.

I was wondering if there’s any way to detect this URL change that way I could adjust the price on my end when a variant is selected.

Tags:

2

Answers


  1. 0

    Have you tried location-bar: 

    var LocationBar = require("location-bar");
var locationBar = new LocationBar();

// listen to all changes to the location bar
locationBar.onChange(function (path) {
  console.log("the current url is", path);
});

// listen to a specific change to location bar
// e.g. Backbone builds on top of this method to implement
// it's simple parametrized Backbone.Router
locationBar.route(/some-regex/, function () {
  // only called when the current url matches the regex
});

locationBar.start({
  pushState: true
});

// update the address bar and add a new entry in browsers history
locationBar.update("/some/url?param=123");

// update the address bar but don't add the entry in history
locationBar.update("/some/url", {replace: true});

// update the address bar and call the `change` callback
locationBar.update("/some/url", {trigger: true});
    Login or Signup to reply.
  2. 0

    If you’re using the default shopify script, use the callback they provide. More info here.

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

  new Shopify.OptionSelectors('product-variant-selector', {
    product: {{ product | json }},
    onVariantSelected: selectCallback, 
    enableHistoryState: true 
  });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search