Gift message after checkbox is checked on cart page

Highlighted
Tourist
5 0 1

Hello,

We implemented a checkbox on the cart page using gift-wrapping, so customers can add a personal message to their order.

When the checkbox is checked, the "personal message" form appears and the product is added to the cart.

The problem is, when the product is added, the cart page refreshes and the personal message form disappears.

Can anyone please explain how we can fix this?

URL: https://webshop.worldofchocolate.nl (it's in Dutch)

We used the following code:

{% if linklists.gift-wrapping.links.size > 0 and linklists.gift-wrapping.links.first.type == 'product_link' %}

     <div id="is-a-gift" style="clear: left; margin: 30px 0" class="clearfix rte">
          <p>
               <input type="hidden" name="attributes[gift-wrapping]" value="" />
               <input id="gift-wrapping" type="checkbox" name="attributes[gift-wrapping]" value="yes" {% if cart.attributes.gift-wrapping %} checked="checked"{% endif %} style="float: none" onclick="myFunction()"/>
               <label for="gift-wrapping" style="display:inline; padding-left: 5px; float: none;">
               Kaartje met persoonlijk berichtje toevoegen? ({{ linklists.gift-wrapping.links.first.object.price | money }})
               </label>
          </p>
               <p id="gift-note" style="display:none">
                    <label style="display:block" for="gift-note">Persoonlijk berichtje:</label>
                    <textarea name="attributes[gift-note]">{{ cart.attributes.gift-note }}</textarea>
               </p>
     </div>

{% assign id = linklists.gift-wrapping.links.first.object.variants.first.id %}

{% assign gift_wraps_in_cart = 0 %}
{% for item in cart.items %}
     {% if item.id == id %}
          {% assign gift_wraps_in_cart = item.quantity %}
     {% endif %}
{% endfor %}

And this:

function myFunction() {
     // Get the checkbox
     var checkBox = document.getElementById("gift-wrapping");
     // Get the output text
     var text = document.getElementById("gift-note");

     // If the checkbox is checked, display the output text
     if (checkBox.checked == true){
          text.style.display = "block";
     } else {
          text.style.display = "none";
     }
}

Thanks in advance!

 

0 Likes
Highlighted

Hi lrskzrs,

The reason the checkbox is refreshing the page is because it's adding an item to the cart.

Can you leverage the use of the cart notes box (currently reads "HEB JE EEN OPMERKING BIJ JE BESTELLING?"
instead of creating one? If so, you could display the cart notes when the checkbox is checked and they could type in the note into the box. 

The Javascript for that would look like this:

 

 

var cart_notes = document.getElementByClass("cart--notes");
if (checkBox.checked == true){
     cart_notes.style.display = "block";
} else {
     cart_notes.style.display = "none";
}

 

 

Let me know if you have any questions or need some help.

Thank you,

Kyle Kopelke

Let's get Shopify figured out together. Get live USA-based customer service for your current or upcoming web project.

We offer free and paid Shopify support.
Monday - Friday | 9 AM — 5 PM EST
Email: hello@freshnarrative.io | tel: (443) 345-8162
Baltimore, Maryland, United States
0 Likes