Friday 28 August 2020

How to turn automatic selection of variation off in Shopify? (done in themeL retina )

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

https://github.com/poojathakor/turn-automatic-selection-of-variation-off-in-Shopify/blob/master/theme.js


Thanks

No comments:

Post a Comment

Infinite scroll on collection page in Shopify

 Hello, Collection page structure is as followed {% paginate collection.products by 48 %} <div class="collection-content"> ...