How to change the Checkbox in the Gift Wrapping code to Yes and No radio buttons?

Highlighted
New Member
1 0 0

I am using the Gift Wrapping code. It works fine but I would like to change the check box to Yes & No radio buttons?

Its the code that is posted in the Shopfy manual, but I pasted it below anyway.

<!-- DO NOT REMOVE THE FOLLOWING COMMENT -->
<!-- (c) Copyright 2014 Caroline Hill. All Rights Reserved. Contact Mlle Caroline Schnapp at mllegeorgesand@gmail.com -->
<!-- DO NOT REMOVE THE ABOVE COMMENT -->

{% 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" />
      <label for="gift-wrapping" style="display:inline; padding-left: 5px; float: none;">
      For {{ linklists.gift-wrapping.links.first.object.price | money }} 
      please wrap the products in this order.
      </label>
    </p>
    <p>
      <label style="display:block" for="gift-note">Gift message (free and optional):</label>
      <textarea name="attributes[gift-note]" id="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 %}

<style>
  #updates_{{ id }} { display: none; }
</style>

<script>

Shopify.Cart = Shopify.Cart || {};

Shopify.Cart.GiftWrap = {};

Shopify.Cart.GiftWrap.set = function() {
  jQuery.ajax({
    type: 'POST',
    url: '/cart/update.js', 
    data: { updates: { {{ id }}: 1 }, attributes: { 'gift-wrapping': true } }, 
    dataType: 'json',
    success: function() { location.href = '/cart'; }
  });
}

Shopify.Cart.GiftWrap.remove = function() {
  jQuery.ajax({
    type: 'POST',
    url: '/cart/update.js', 
    data: { updates: { {{ id }}: 0 }, attributes: { 'gift-wrapping': '' } }, 
    dataType: 'json',
    success: function() { location.href = '/cart'; }
  });
}

// If we have nothing but gift-wrap items in the cart.
{% if cart.items.size == 1 and gift_wraps_in_cart > 0 %}
jQuery(function() {
  Shopify.Cart.GiftWrap.remove();
});
// If we have more than one gift-wrap item in the cart.
{% elsif gift_wraps_in_cart > 1 %}
jQuery(function() {
  Shopify.Cart.GiftWrap.set();
});
// If we have a gift-wrap item in the cart but our gift-wrapping cart attribute has not been set.
{% elsif gift_wraps_in_cart > 0 and cart.attributes.gift-wrapping == blank  %}
jQuery(function() {
  Shopify.Cart.GiftWrap.set();
});
// If we have no gift-wrap item in the cart but our gift-wrapping cart attribute has been set.
{% elsif gift_wraps_in_cart == 0 and cart.attributes.gift-wrapping != blank  %}
jQuery(function() {
  Shopify.Cart.GiftWrap.set();
});
{% endif %}

// When the gift-wrapping checkbox is checked or unchecked.
jQuery(function() {
  jQuery('[name="attributes\[gift-wrapping\]"]').change(function() {
    if (jQuery(this).is(':checked')) {
      Shopify.Cart.GiftWrap.set();    
    }
    else {
      Shopify.Cart.GiftWrap.remove();
    }
  });
});
 
</script>

{% else %}

<p style="clear: left; margin: 30px 0" class="rte">
  You attempted to add a gift-wrapping script to your shopping cart, but it won't work because you don't have 
  a link list with handle <code>gift-wrapping</code> which, in turn, contains a link
  to your gift-wrapping product. Please review the steps outlined 
  <a href="http://docs.shopify.com/manual/configuration/store-customization/page-specific/cart-page/add-a-gift-...;.
</p>

{% endif %}
0 Likes
Highlighted
Shopify Staff
Shopify Staff
145 0 19

Hey Steve!

Jordan here from Shopify :)

Great question about the gift wrap option guide.

Early on in this code is where this part is controlled:

<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" />
   <label for="gift-wrapping" style="display:inline; padding-left: 5px; float: none;">
   For {{ linklists.gift-wrapping.links.first.object.price | money }} 
   please wrap the products in this order.
   </label>
</p>

If you change the above code to the following code below, you should get 'Yes' and 'No' radio buttons instead:

<p>
   <input type="hidden" name="attributes[gift-wrapping]" value="" />
   <input id="gift-wrapping" type="radio" name="attributes[gift-wrapping]" value="Yes" {% if cart.attributes.gift-wrapping %} checked="checked"{% endif %}> <span>For {{ linklists.gift-wrapping.links.first.object.price | money }} 
   please wrap the products in this order.</span><br>
   <input type="radio" name="attributes[]" value="No"{% if cart.attributes[""] == "No" %} checked{% endif %}> <span>No</span><br>
   <label for="gift-wrapping" style="display:inline; padding-left: 5px; float: none;">
   </label>
</p>

You may also find useful tips related to this in this guide, which links to the 'Cart attribute' section of our Markup Generator Tool:

https://ui-elements-generator.myshopify.com/pages/cart-attribute

Hope this helps! Cheers :)
Jordan

Shopify Guru
support@shopify.com

0 Likes
Highlighted
New Member
2 0 0
  For {{ linklists.gift-wrapping.links.first.object.price | money }} is not showing the price I used in the wrapping fee of $35.00

 

0 Likes