Shopify support multiple gift wrapping options - modified Caroline Schnapp's gift wrapper code

gistfile1.txt

<!-- Add a flat charge per order -->

<!-- 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" class="clearfix rte">
    {% for variant in linklists.gift-wrapping.links.first.object.variants %}
    <p>
      <input type="hidden" name="attributes[gift-wrapping]" data-variantId="{{ variant.id }}" value="" />
      <input id="gift-wrapping" type="checkbox" name="attributes[gift-wrapping]" data-variantId="{{ variant.id }}" value="yes" {% for item in cart.items %}{% if item.id == variant.id %} checked="checked"{% endif %}{% endfor %} style="float: none" />
      {{ variant.image.src }}
      <label for="gift-wrapping" style="display:inline; padding-left: 5px; float: none;">
      For {{ variant.price | money }} please wrap the products in this order.
      </label>
    </p>
    {% endfor %}
    <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>

var variantList = [],
    giftObj = {};

{% for variant in linklists.gift-wrapping.links.first.object.variants %}
    variantList.push({{variant.id}});
{% endfor %}

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

Shopify.Cart.GiftWrap = {};

Shopify.Cart.GiftWrap.set = function(obj, selectedItem) {
  jQuery.ajax({
    type: 'POST',
    url: '/cart/update.js',
    data: { updates: obj },
    dataType: 'json',
    success: function() { location.href = '/cart'; }
  });
}

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

{% if cart.items.size == 1 and gift_wraps_in_cart > 0 %}
jQuery(function() {
  Shopify.Cart.GiftWrap.remove();
});
{% endif %}

// When the gift-wrapping checkbox is checked or unchecked.
jQuery(function() {

  jQuery('[name="attributes\[gift-wrapping\]"]').change(function() {
    var selectedItem = jQuery(this).attr("data-variantId");

    function createObjectQuntity(element, index, array) {
      if( element == selectedItem) {
        giftObj[element] = 1;
      } else {
        giftObj[element] = 0;
      }
    }

    if (jQuery(this).is(':checked')) {
      variantList.forEach(createObjectQuntity);
      Shopify.Cart.GiftWrap.set(giftObj, selectedItem);
    }
    else {
      selectedItem = 0;
      variantList.forEach(createObjectQuntity);
      Shopify.Cart.GiftWrap.remove(giftObj);
    }
  });
});

</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-wrap-option">here</a>.
</p>

{% endif %}

This still only gives me one gift wrapping option despite having two gift wrap products in the gift wrapping linklist. Am I missing something?

Hi!... I successfully configured this. Thanks for the code! However, there is a bug I would like to report to you and request for the fix. Only checkbox selection works, but the text selection doesnt work, it cause the first item to be selected by default. Thanks!

Hello! any update?

please check this my coding:

{% assign gift_title = 'Gift Wrapping-2' %}

{% for link in linklists.gift-wrapping.links %} {% assign product_title = link.object.title %}

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

Wrap this order in a {{link.object.title}} for {{ link.object.price | money }}. Click here to see the details.

{% assign id = link.object.variants.first.id %}

{% assign gift_wraps_in_cart = 1 %}
{% for item in cart.items %}
{% if item.id == id %}
{% assign gift_wraps_in_cart = 1 %}
{% endif %}
{% endfor %}
{% assign items_in_cart = cart.item_count | minus: gift_wraps_in_cart %}

<style> #updates_{{ id }} { display: none; } </style> <script> Shopify.Cart = Shopify.Cart || {}; Shopify.Cart.GiftWrap_{{link.object.variants.first.id}} = {}; Shopify.Cart.GiftWrap_{{link.object.variants.first.id}}.set = function() { jQuery.ajax({ type: 'POST', url: '/cart/update.js', data: { updates: { {{ id }}: {{ 1 }} }, attributes: { 'gift-wrapping-{{link.object.variants.first.id}}': true } }, dataType: 'json', success: function() { location.href = '/cart'; } }); } Shopify.Cart.GiftWrap_{{link.object.variants.first.id}}.remove = function() { jQuery.ajax({ type: 'POST', url: '/cart/update.js', data: { updates: { {{ id }}: 0 }, attributes: { 'gift-wrapping-{{link.object.variants.first.id}}': '' } }, dataType: 'json', success: function() { location.href = '/cart'; } }); } // When the gift-wrapping checkbox is checked or unchecked. jQuery(function() { jQuery('[name="attributes\[gift-wrapping-{{link.object.variants.first.id}}\]"]').change(function() { if (jQuery(this).is(':checked')) { Shopify.Cart.GiftWrap_{{link.object.variants.first.id}}.set(); } else { Shopify.Cart.GiftWrap_{{link.object.variants.first.id}}.remove(); } }); }); </script>

{% else %}

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 gift-wrapping which, in turn, contains a link to your gift-wrapping product. Please review the steps outlined here.

{% endif %}
{% endfor %}

https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-gift-wrap-option