Retrieving Sku attribute from Selected Option dropdown box

Ravy
New Member
1 0 0

I've been trying to get this simple line of element/attribute from a selected option for several weeks but got no luck.  I am pulling my hair out from this task.  Please help.

I created a custom section: product-customizable-template.liquid
In here, a select dropdown option was added by the Products tool in Shopify.
Code:
{% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}
            {% unless product.has_only_default_variant %}
{% 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"
                             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"
 data-sku= "{{ current_variant.sku }}"{% endif %} >
                         {{ value }}    
                      </option>
                       "You have selected the sku - " {{ current_variant.sku }}  -- Corrected information was displayed
                    {% endfor %}
                   </select>
                  </div>

              {% endfor %}
            {% endunless %}
 
My GOAL is to retrieve the data-sku value in this function.
<script>
$(document).ready(function()                    
{ $("#SingleOptionSelector-0").change
    (
           function()
       {
              alert("I am here1 !! ");
              var selectedVal = $('#SingleOptionSelector-0').find(':selected').val();
              alert("I am selectedVal: " + selectedVal);  -- Displayed correct information.

              var sku2=$(this).find('option:selected').data('sku'); - returned an 'Undefined' message
               alert("My sku2: " + sku2 );
              var sku3=$(this).find('option:selected').data('Sku');  - returned an 'Undefined' message
             alert("My sku3: " + sku3 );
             var sku = $('#SingleOptionSelector-0 option:checked').attr('data-sku');  - returned an 'Undefined' message
            var selectedCollection = $(this).children("option:selected").data('sku');
            alert("My selectedCollection: " + selectedCollection );  - returned an 'Undefined' message
            var selectedCollection2 = $(this).children("option:selected").attr('data-sku');
            alert("My selectedCollection2: " + selectedCollection2 );  - returned an 'Undefined' message
         }
    )
   
});
</script>
sku: "axxxxxxxx"
 
Please help me eliminate my misery. Thank you !!
 
0 Likes