Open product-form.liquid
change "{% assign variant = product.selected_or_first_available_variant %}" to "{% assign variant = product.selected_variant %}"
Add following code after the Add to cart button
<div class="select-an-option-block animated bounceIn hide">Pick a variant before adding to cart</div>
Add Follwoing script at the end of product file
<script>
var productOptions = [];
{% for option in product.options %}
var optionObj = {};
optionObj[ {{ forloop.index0 }} ] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{% endfor %}
</script>
Add following code in to theme.js
$(document).ready(function() {
if( typeof(productOptions ) != "undefined" ){
for(i=0;i<productOptions.length;i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
let indef = 'a';
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
if(vowels.includes(firstOptionLetter)) {
indef = 'an';
};
$('.single-option-selector:eq('+ i +')')
.filter(function() {
return $(this).find('option').length > 1
})
.prepend(`<option value="">Pick an Option</option>`)
.val('')
.trigger('change');
if($('.single-option-selector:eq('+ i +')').val() == ""){
$('.purchase-details__buttons .action_button.add_to_cart').removeClass('disabled').removeAttr('disabled').addClass('select-option').text('Add To Cart');
$('.modal_price').hide();
}
else{
$('.purchase-details__buttons .action_button.add_to_cart').removeClass('select-option');
}
}
}
$('.select-option').on('click',function(){
$('.select-an-option-block').removeClass('hide');
$('.warning.animated.bounceIn').addClass('hide');
})
});
Attaching theme.js file
Thanks
No comments:
Post a Comment