skip to Main Content

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.

2

Answers


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