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 !!
