Ad

Shopify - Change Text Of My SelectorOption Product Dropdown Variant

I worked all day on it and impossible to figure it out so I need some help :)

I try to add some text on each variant line of my "Size" dropdown on my product page :

if the product quantity > 0 : Size + Quick Delivery else : Size + 2-3 weeks delivery Just want to display it to the customer before the click, so I don't want it just on the selectedVariant.

I tried to change it by my script.js, I was thinking to :

copy each variant quantity (I didn't find the way to do it)

copy my Dropdown in a list value/key + add text (Quick/2-3 weeks) depending of the variant quantity var optionsSizes = {};

var optionsSizes = {};

$('#mySizes option').each(function(){
    optionsSizes[$(this).val()] = $(this).text() + variant.inventory_quantity;
});

//console.log(optionsSizes);    
    
var $el = $("#mySizes");
$el.empty(); // remove old options
$.each(optionsSizes, function(value,key) {
  $el.append($("<option></option>")
     .attr("value", value).text(key));
}); 

The copy/paste of the dropdown work but that's all. It was easy to do it on variantSelected but that's not what I want.

Please feel free to ask if you have any question.

Cheers,

bkseen

Ad

Answer

('#product-select-5916642311-option-0') and $('#mySizes') this select elements are not in your theme by default. A Shopify or theme script adds these two elements based on the product's JSON information available via Shopify. Hence there is no direct way to get the desired result.

Here's the trick that can achieve what you desire.

  1. Load all the variants and their required properties into a JSON object. To do this add <script>variantsJSON = {}</script> at the top of the liquid file.
  2. Now load the variants in the following structure:

    variantsJSON = { "variant_option1" : { "variant_option2_1_title" : "variant_option2_1_quantity", "variant_option2_2_title" : "variant_option2_2_quantity", } .... }

  3. To get the above structure, you need to add the following script inside {% for variant in product.variants %} or a similar loop in your liquid file.

<script> if (!variantsJSON['{{ variant.option1 }}']){ variantsJSON['{{ variant.option1 }}'] = {} } {% assign availability = 'QUICK DELIVERY' %} {% if variant.inventory_quantity == 0 %}{% assign availability = '2-3 WEEKS DELIVERY' %}{% endif %} if (!variantsJSON['{{ variant.option1 }}']['{{ variant.option2 }}']){ variantsJSON['{{ variant.option1 }}']['{{ variant.option2 }}'] = '{{ availability }}' } </script>

  1. The above snippet (possible refinement required) will load all the variants and their availability into the JSON object

  2. Now all you need to do is trigger a function on change of $('#product-select-{{ product.id }}-option-0') which will clear all <li>s in $('#mySizes'), then populates them using the values stored in variantsJSON's variant_option2 & variant_availability of the selected variant_option1

P.S. Feel free to format my answer. I'm somehow unable to get the right formatting.

Ad
source: stackoverflow.com
Ad