Product URL does NOT change when out-of-stock variant is clicked - Shopify

Question

In a Shopify Store, I have some products with out of stock variants, everything works well except that when an out-of-stock variant is selected the url does not change. Although the buy button changes from BUY to UNAVAILABLE.

A clear example of this is the following product:

https://lacondesa.myshopify.com/collections/mujer/products/bribon?variant=54651326791

*the only available variant is size 42, the rest are out of stock. And as you can see the url does not change. What can I do to update that url even though the variant is unavailable?

This may not seem important except that I have installed a "notify me" app that displays a pop-up only when detects that the slected variant is out of stock. And therefore is

This may be a silly question but I can not manage to find a solution. Thank you for your help.

You are on your own here. We can't provide you with a solution if there is no code associated with your question showing that you've tried something on your own. At the moment you are looking for someone to debug your code, which is not the purpose of StackOverflow. — drip
Can you please add your liquid code from the theme which is rendering all "sizes". In other case @drip is right, no one can help you — Victor Leontyev

Dave B Dave B · Accepted Answer · 2018-03-13T21:47:04

Your store is using a fairly standard theme-style. Long story short, you should take a look for function called selectCallback and add a line of code to update the history state in the case of a variant being not-available.

I took a look at your storefront, and the selectCallback function was found in the main HTML document, not in one of the script files in your assets folder. This usually means that you can find the function in the same snippet that has your product form.

Near the beginning of the function is a section that looks like this when rendered:

if (variant.available) {
  // We have a valid product variant, so enable the submit button
  addToCart.removeClass('disabled').removeAttr('disabled').val(window.inventory_text.add_to_cart);

} else {
  // Variant is sold out, disable the submit button
  addToCart.val(window.inventory_text.sold_out).addClass('disabled').attr('disabled', 'disabled');
}

After the add-to-cart button is disabled there, you can add a line of code to update the history state with the correct URL. Something like this should do the trick:

if (history.replaceState) {
  var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?variant=' + variant.id;
  window.history.replaceState({path:newurl}, document.title, newurl);
}

(I'm an amateur with these history state things - read more at https://developer.mozilla.org/en-US/docs/Web/API/History)

Product URL does NOT change when out-of-stock variant is clicked - Shopify

1 Answers