DEBUT: Get selected variant image url

Solved
Highlighted
Tourist
6 1 2

Hello,

Using this documentation: https://shopify.dev/docs/themes/liquid/reference/filters/url-filters#img_url

I'm trying to get the image url for the currently selected variant, and then use that as a variable for some javascript. I'd like to get the URL every time the variant is changed.

 

This works but only after I change the variant and refresh the page:

{{ featured_media | img_url: '1000x1000' }}
//cdn.shopify.com/s/files/1/0455/3716/5462/products/iPhone-11_1000x1000.png?v=1597182135

 

This only gets the main product image url:

{{ product | img_url: '1000x1000' }}
//cdn.shopify.com/s/files/1/0455/3716/5462/products/index_1000x1000.png?v=1597182413

 

But this is returning "no-image":

 {{ variant | img_url: '1000x1000' }}
//cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_1000x1000.gif

 

 

Store URL: https://jadaray-dev.myshopify.com/products/a-dev-case?variant=35728450846870 pwd: helppls

0 Likes
Highlighted
Tourist
6 1 2

This is an accepted solution.

I was able to solve this myself. I used the {{ product | json }} script to pull in the product info as a javascript object. After that I matched the variants to the currently selected variant, and pulled out the URL.

 

 

{% comment %} Default Debut variant selector from product-template.liquid {% endcomment %}

{% unless product.has_only_default_variant %}
  <div class="product-form__controls-group">
    {% for option in product.options_with_values %}
      <div class="selector-wrapper js product-form__item">
        <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
          {{ option.name }}
        </label>
        <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input nchart_variant"
          id="SingleOptionSelector-{{ forloop.index0 }}"
          data-index="option{{ forloop.index }}"
        >
          {% for value in option.values %}
            <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
          {% endfor %}
        </select>
      </div>
    {% endfor %}
  </div>
{% endunless %}

{% comment %} Little test button {% endcomment %}

<button type="button" id="getinfo" onclick="getInfo()">Click</button>

{% comment %} Javascript to do the filtering {% endcomment %}
<script type="text/javascript">
function getInfo() {
const variant = document.getElementsByClassName("nchart_variant")[0].value;
const product = JSON.parse(document.getElementById("productinfo").text).variants;

const filtered = product.reduce((a, o) => (o.title == variant && a.push(o.title, o.featured_image.src), a), []);
console.log(filtered[1]);

}
</script>

{% comment %} Get the product info and store it on the page {% endcomment %}
<script type="application/json" id="productinfo">
  {{ product | json }}
</script>

 

 

0 Likes