Creating a Cart Page in Liquid That Has Gift Wrap For Specific Product

Highlighted
Shopify Partner
10 0 2

Hi There. I've been asked to create a gift wrap option that is limited to a single product. After a lot of research, I'm finding that there's a real lack of documentation for how to do this. 

I tried using Caroline Schnapp's code and have tried multiple ways to only conditionally output gift wrap, but my cart gets really glitchy when I conditionally output it. The main problems I am having are 1) Page load is definitely impacted. It's taking my page about 4 seconds to load instead of less than a second; 2) The gift wrap option automatically multiplies itself by the number of items in the cart. I am wondering if there is a way to limit the number of gift wraps to the number of a type of item in the cart? The item we are wrapping here has a type of "Clone A Willy" - so if there are 2 Clone A Willy items in the cart and another item, I just want to add two unites of gift wrap. I know there's no for each in liquid but could use something like for each. Here's my cart code:

 

<header class="row">
  <div class="columns">
    <h1 class="page-title">Your Cart</h1>
  </div>
</header>

{% if cart.item_count > 0 %}

<form action="/cart" method="post" class="custom">
  <div class="row">
    <div class="columns">
      <table width="100%" class="cart-table">
        <thead>
          <tr>
            <th class="image">&nbsp;</th>
            <th class="title">&nbsp;</th>
            <th class="quantity">Quantity</th>
            <th class="total">Total</th>
            <th class="remove">&nbsp;</th>
          </tr>
        </thead>
        <tbody>
        {% for item in cart.items %}
        {% if forloop.first %}
          {% assign coll_handle = item.product.collections.first.handle %}
          {% if coll_handle == 'frontpage' or coll_handle == '' %}{% assign coll_handle = 'all' %}{% endif %}
        {% endif %}

        <tr>
          <td class="image">
            <a href="{{ item.product.url | within: collections.all }}">  
              {% assign option_index = 0 %}
              {% assign found_option = false %}
              {% assign image_index = 0 %}
              {% assign found_image = false %}
              {% for option in item.product.options %}
                {% unless found_option %}
                  {% assign downcased_option = option | downcase %}
                  {% if downcased_option contains 'color' or downcased_option contains 'colour' or downcased_option contains 'style' %}
                    {% assign option_index = forloop.index0 %}
                    {% assign found_option = true %}
                  {% endif %}
                {% endunless %}
              {% endfor %}
              {% if found_option %}
                {% for image in item.product.images %}
                  {% unless found_image %}
                    {% if image.alt == item.variant.options[option_index] %}
                      {% assign image_index = forloop.index0 %}
                      {% assign found_image = true %}
                    {% endif %}
                  {% endunless %}
                {% endfor %}
              {% endif %}
              <img src="{{ item.product.images[image_index].src | product_img_url: 'small' }}" alt="{{ item.title | escape }}" />
            </a>

            <p class="mobile-title"><a href="{{ item.product.url }}">{{ item.title }}</a></p>

          </td>
          <td class="title">
            <p><a href="{{ item.product.url }}">{{ item.title }}</a></p>
          </td>
          <td class="quantity"><input type="text" class="field styled-input" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" /></td>
          <td class="total">${{ item.line_price | money_without_currency }}</td>
          <td class="remove"><a title="Remove" href="/cart/change?line={{ forloop.index }}&quantity=0" aria-hidden="true" class="glyph cross" title="remove"></a></td>
        </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>

  </div> <!-- .row -->
      
  <div class="row">

    <div class="columns large-5 show-for-medium-up">
      <div class="shipping-rates-calculator">
        {% include 'snippet-shipping-rates-calculator' %}
      </div>

      <div class="continue-shopping show-for-medium-up">
        <span><a href="/collections"><span aria-hidden="true" class="glyph arrow-left"></span> Continue Shopping</a></span>
      </div>
    </div>


    <div class="columns large-7">
      <div class="totals columns">
        <h3><strong>SUBTOTAL ${{ cart.total_price | money_without_currency }}</strong></h3>
        <h4 id="estimated-shipping" style="display:none">+ Estimated shipping <em>${{ 0 | money_without_currency }}</em></h4>
        <h4>FREE SHIPPING On US Orders Over $50</h4>
        <!--{% if cart.total_price >= 5000 %}<h4> You qualify for a free gift!<h4> {% endif %}-->
        
        {% for item in cart.items %}
            {% if item.product.type == 'Clone A Willy' %}
                {% include 'gift-wrapping' %}   
            {% endif %}
        {% endfor %}
        
        <input type="submit" name="update" class="button" value="Update cart" /> <span class="or">or</span>
        <input  class="button" type="submit" name="checkout" value="Check out" />
        {% if additional_checkout_buttons %}
        <p class="additional-checkout-buttons">
          {{ content_for_additional_checkout_buttons }}
        </p>
        {% endif %}
      </div>

      <div class="order-notes columns">
        <div class="container">
          <h3>Gift Message:</h3>
          <textarea id="cart-notes-area" name="note">{{ cart.note }}</textarea>
        </div>
      </div>
    </div>

    <div class="continue-shopping columns show-for-small columns">
      <span><a href="/collections"><span aria-hidden="true" class="glyph arrow-left"></span> Continue Shopping</a></span>
    </div>
  </div> <!-- .row -->
  
</form>


{% else %}

<section class="empty-cart row colored-links">
  <div class="columns">
    <h1>It appears that your cart is currently empty!</h1>
    <h2>You can continue browsing <a href="/collections">here</a>.</h2>
  </div>
</section><!-- #empty-cart -->

{% endif %} <!-- if cart.item_count > 0  -->

And the code for the snippet "gift-wrap" is here: 

<!-- 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">
    <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;">
      Add {{ linklists.gift-wrapping.links.first.object.price | money }} per item to gift wrap your Clone-A-Willy.
      </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 %}
{% 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 = {};

Shopify.Cart.GiftWrap.set = function() {
  jQuery.ajax({
    type: 'POST',
    url: '/cart/update.js', 
    data: { updates: { {{ id }}: {{ items_in_cart }} }, 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 don't have the right amount of gift-wrap items in the cart.
{% elsif gift_wraps_in_cart > 0 and gift_wraps_in_cart != items_in_cart %}
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 %}

1 Like
Highlighted
New Member
9 0 0

Did you ever find a solution??

0 Likes