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:

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