Dynamically showing SKU and ISBN based on variant (Debut-based? custom theme)

Store Design
, ,
1

Hello!

I was able to successfully add the ISBN for each variant to product pages, but am having trouble getting the SKU and ISBN to change when a new variant is selected.

Here is a sample of the code I have:

{% assign current_variant = product.selected_variant -%}

{% if section.settings.show_sku %}
                  {% if current_variant.sku != '' %}
                  <tr>
                    <td class="pro_sku" {% if settings.enable_lang_switcher %}data-trans-key="products.product.sku"{%endif%}>{{ 'products.product.sku' | t }}</td>
                    <td>{{ current_variant.sku }}</td>
                  </tr>
                  {% endif %} 
                  <tr>
                    <td class="pro-sku">ISBN/ISMN:</td>
                    <td>{{ current_variant.barcode }}</td>
                  </tr>
                  {% endif %}

This does work to change the SKU and ISBN, but the page has to be refreshed before the change shows up on the page: https://www.loom.com/share/d4427df58b024c3da5cde959b4435153

You can try it yourself here: https://952mxf06f8ll4dio-53650030752.shopifypreview.com

Any advice for how to fix this would be greatly appreciated!

Thanks!

2

You have to integrate with the themes javascript functions for variant selection.

Or set up an event trigger to swap in the data.

There are forum discussions on this frequently found by searching for phrases similar to “debut variant change event”.

In both cases the variant data to be displayed should already be somewhere in the loaded page either as html or json, etc. Or you have to get more advanced and know how to fetch the data.

If you need this customization done, you can contact me directly for pricing. Contact info in signature please provide context: post url, store urls, theme name, problem description.

Good Hunting.

3

Thanks, Paul!