Append extra details in cart note (Shopify)

cart-template.liquid

replace note code by following as per theme (you must have basic knowledge of liquid coding)

  <section class="cart-note" style="{%- unless section.settings.show_notes -%}display: none;{%- endunless -%}">

    <textarea

              class="cart-note-content dummy-cart-note"

              placeholder="{{ section.settings.notes_placeholder }}"

              aria-label="{{ 'cart.notes' | t }}"></textarea>

  </section>

  <section class="cart-note" style="{%- unless section.settings.show_notes -%}display: none;{%- endunless -%}">

    <textarea

              class="cart-note-content"

              name="note"

              id="cart-note-content"

              placeholder="{{ section.settings.notes_placeholder | escape }}"

              aria-label="{{ 'cart.notes' | t }}" style="display: none;"  >{{ cart.note }}</textarea>

  </section>

Append following code where you want to show your extra options

   

    <div class="cart-donate-section">

      

      <div class="select-option-wrapper">

        <input type="checkbox" id="enabledonate" name="enabledonate" value="enabledonate" checked>

        <label for="enabledonate" class="show">

          I would like 10% of the profit to go as a donation to one of the organization from our list

        </label>

      </div>

      

      <div class="option-wrapper">

        <input type="radio" id="company1" name="company" value="organization1" checked>

        <label for="company1" class="show">organization1</label>

      </div>

      

      <div class="option-wrapper">  

        <input type="radio" id="company2" name="company" value="organization2">

        <label for="company2" class="show">organization2</label>

      </div>

      

    </div>

--------------------------------------------

Add Following css code in your css file

  .cart-donate-section label{

    display: inline-block !important;

    margin-left: 10px;

  }

  .cart-donate-section .option-wrapper {

    display: flex;

    align-items: center;

  }

  .cart-donate-section .select-option-wrapper {

    display: flex;

    align-items: baseline;

  }

  .cart-donate-section .option-wrapper.hide{

    display: none !important;

  }

  --------------------------------------------------------------

Add Following JS in your JS file

---------------------------------------------------------------

$('document').ready(function(){

  $('.dummy-cart-note').on('change',function(e){

    var customNote = $('.dummy-cart-note').val();

    $('#cart-note-content').val('');

    if($('#enabledonate').is(':checked')){

      $('.option-wrapper.hide').removeClass('hide');

      var selectedCompany = $('.cart-donate-section input[type="radio"]:checked').val();

      var appendHtmlContent = '';

      console.log(selectedCompany,'selectedCompany');

      appendHtmlContent = 'selectedCompany:"'+selectedCompany+'"';

      $('#cart-note-content').val(customNote + '  ' + appendHtmlContent);

    }

    else{

      $('.option-wrapper').addClass('hide');

      $('#cart-note-content').val(customNote);

      $('.option-wrapper input[type="radio"]:checked').prop('checked', false);

    }

  })

  

  $('#enabledonate').on('change',function(){

    

    var customNote = $('.dummy-cart-note').val();

    $('#cart-note-content').val('');

    if($('#enabledonate').is(':checked')){

      

      $('.option-wrapper.hide').removeClass('hide');

      $('.option-wrapper').eq(0).find('input[type="radio"]').prop('checked', true);

        

      var selectedCompany = $('.cart-donate-section input[type="radio"]:checked').val();

      var appendHtmlContent = '';

      console.log(selectedCompany,'selectedCompany');

      appendHtmlContent = 'selectedCompany:"'+selectedCompany+'"';

      $('#cart-note-content').val(customNote + '  ' + appendHtmlContent);

    }

    else{

      $('.option-wrapper').addClass('hide');

      $('#cart-note-content').val(customNote);

      $('.option-wrapper input[type="radio"]:checked').prop('checked', false);``

    }

  })

  $('.cart-donate-section input[type="radio"]').on('change',function(){

    var customNote = $('.dummy-cart-note').val();

    $('#cart-note-content').val('');

    if($('#enabledonate').is(':checked')){

      $('.option-wrapper.hide').removeClass('hide');

      var selectedCompany = $('.cart-donate-section input[type="radio"]:checked').val();

      var appendHtmlContent = '';

      console.log(selectedCompany,'selectedCompany');

      appendHtmlContent = 'selectedCompany:"'+selectedCompany+'"';

      $('#cart-note-content').val(customNote + '  ' + appendHtmlContent);

    }

    else{

      $('.option-wrapper').addClass('hide');

      $('#cart-note-content').val(customNote);

      $('.option-wrapper input[type="radio"]:checked').prop('checked', false);``

    }

  })

  

});

--------------------------------------------------

Output:

-----------------------------------------------------------------

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

Add to cart Functionality on collection for the Blockshop shopify theme

 Go to partial--product.liquid , copy paste following code at the bottom where you want to show "Add To Cart" button

----------------------------------------------------------------------------------------------

{% if product.available == false %}

    <form class="quick-add-to-cart-form" style="margin-top: 0.5rem;" method="post" action="/cart/add">

          <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" />

          <input style="display: none;"  min="1" type="number" id="quantity" name="quantity" value="1"/>

          <input style="cursor: not-allowed; pointer-events: none;" type="submit" value="Sold out" class="btn" />

      </form>

    {% else %}

      <form class="quick-add-to-cart-form" style="margin-top: 0.5rem;" method="post" action="/cart/add">

          <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" />

          <input style="display: none;" min="1" type="number" id="quantity" name="quantity" value="1"/>

          <input type="submit" value="Add to cart" class="btn quick-add-to-cart" quick-add-to-cart />

      </form>

    {% endif %}

----------------------------------------------------------------------------------------------

Open theme.js, Copy / paste following code at the bottom of the file

Make sure you have added same JS file in theme.liquid

----------------------------------------------------------------------------------------------

$(document).ready(function() {

  $('.quick-add-to-cart').on('click',function(e){

    e.preventDefault();

    var quickForm = $(this).parents('form');

    theme.partials.Cart.addItem(quickForm, function(success, error) {

      if (success) {

        return theme.partials.Cart.updateAllHtml(function() {

          addProductComplete ();

        });

        function addProductComplete (){

          return $('[data-off-canvas--open="right-sidebar"]').first().trigger('click');

        };

      } else {

        console.log('in ELSE, product not added to cart');

        return false;

      }

    });

  });

});