Checkbox on the cart page

Solved
Highlighted

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
Highlighted
Shopify Partner
1445 195 523

This is an accepted solution.

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 my solution helped you, please like and accept as solution!
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
Highlighted
Shopify Partner
3 1 0

This is an accepted solution.

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
Highlighted

Thanks a lot @Ninthony , it perfectly works!

 

Cheers,

 

Panos

0 Likes
Highlighted
Shopify Partner
1445 195 523

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 my solution helped you, please like and accept as solution!
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
Highlighted

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

 

Thanks again,

 

Panos 

0 Likes
Highlighted
New Member
2 0 0

Hi, 

I'm not sure we're after the same thing. Some of my items are sent as gifts. I would like customers to have the option of ticking a box to whether they want the invoice sent with the items. Can you help please?

 

Kind regards,

Steve

 

0 Likes