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

Shopify – Change display when switching the variants (liquid)

I would like to add a new function to the product details page that shows me the current quantity of the variant that is in stock.
I get this far with Liquid, only if another variant is selected, the display of the amount does not change,

Anyone of you have any ideas how I can do that?

This shows me the current variant, but does not change when I change the selection.

{% - for variant in product.variants -%}
{{current_variant.inventory_quantity}}
{% - endfor -%}
Tags:

2

Answers


  1. 0

    You can’t use Liquid for this. Liquid is just Shopify’s templating language and is only useful for the initial page render.

    Login or Signup to reply.
  2. 0

    I know how to do this. You need to use vue so it‘s reactive on the front end, also each product with variants now has to be a collection. You will need to loop through the products in the collection and get the linked products with javascript.

    So let‘s say you have a specific product and you have three versions of it, you would actually create three separate products.

    The next thing to do is link them with liquid and javascript, so in your product.liquid file open a set of script tags and you would start it like this

    {% assign current_product = product %}

const product = (function() {
  const product = {{ product | json }};
  return product
})();

const linked_products = (function() {
  const linked_products = []
  {% for collection in current_product.collections %}
    {% for product in collection.products %}
      {% if product.id != current_product.id and product.title == current_product.title %}
      product = {{ product | json }}       
       
    
      linked_products.push(product);
      {% endif %}
    {% endfor %}
  {% endfor %}
  return linked_products;
})();

    This is just to get the ball rolling but you will need to handle quite a bit of other things and this is quite a large project.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search