Checkbox on the cart page

Solved

Hi guys,

 

I'm trying to add some custom cart attributes for customers who want to get an invoice. 

 

So, I  am trying to have a checkbox named "I need invoice" which when will be selected customers will see some text fields to import some additional information like Tax ID etc.

 

The code looks like this:

 <p class="cart-attribute__field">
            <input type="hidden" name="attributes[Έκδοση Τιμολογίου]" value="ΟΧΙ">
            <input id="in" type="checkbox" name="attributes[Έκδοση Τιμολογίου]" value="ΝΑΙ" onchange="valueChanged()">
            <label>Έκδοση Τιμολογίου</label>
          </p>
          
          <div class="timologio">
          <p class="cart-attribute__field reveal-if-active tim">
            <label for="onoma-etairias">Επωνυμία Εταιρίας</label>
            <input class="required reveal-if-active" id="onoma-etairias" type="text" name="attributes[Όνομα Εταιρίας]" value="">
          </p>

          <p class="cart-attribute__field reveal-if-active tim">
            <label for="epaggelma">Επάγγελμα</label>
            <input class="required reveal-if-active" id="epaggelma" type="text" name="attributes[Επάγγελμα]" value="">
          </p>

          <p class="cart-attribute__field reveal-if-active tim">
            <label for="afm">ΑΦΜ</label>
            <input class="required reveal-if-active" id="afm" type="text" name="attributes[ΑΦΜ]" value="">
          </p>

          <p class="cart-attribute__field reveal-if-active tim">
            <label for="doy">ΔΟΥ</label>
            <input class="required reveal-if-active" id="doy" type="text" name="attributes[ΔΟΥ]" value="">
          </p>
          </div>

and then I am using this script for having the fields hidden or shown based on the checkbox condition:

<script>
 
    function valueChanged(){
      if($('#in').is(":checked")){ 
        
            $(".timologio").show();
      }
        else
            $(".timologio").hide();
    }
  
   $(".timologio").valueChanged();
  
</script>

It works, but my problem is that the first time you arrive at the cart page the additional information fields are not hidden even though the checkbox is unchecked. 

 

Any ideas why is that?

 

Thanks a lot in advance!

 

Cheers,

 

Panos 

 

0 Likes

Success.

Astronaut
1069 145 257

First hide it with css, then listen for it to change:

<style>
.timologio {
display: none;
}
</style>

<script>
$('#in').on('change', function(){
if ($(this).is(':checked')){
$('.timologio').show();
}else{
$('.timologio').hide();
}
})
</script>
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes

Success.

Shopify Partner
3 1 0

Hello ,

First time display none your <div class="timologio"></div> tag using css and after checkbox check you can show div using jquery.

0 Likes

Thanks a lot @Ninthony , it perfectly works!

 

Cheers,

 

Panos

0 Likes
Astronaut
1069 145 257

I haven't worked with cart attributes much, but I believe your code has to be inside the form that submits to the cart, and the information should show up in the order under Additional Details section in the Admin.

 

https://help.shopify.com/en/themes/customization/cart/get-more-information-with-cart-attributes

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes

Yeap @Ninthony that's correct, I've read this thread as well. 

 

Thanks again,

 

Panos 

0 Likes