gift wrap to cart drawer

Gift Wrap Option (Cart Drawer) - Upsell

Log in or Sign up to ensure access to purchased code across multiple devices.

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: All  Shopify 2.0 FREE themes  ONLYWorks from lower version to version 11

You are able to add a note in Shopify 2.0 and also add any product to upsell in the cart. This works in Dawn Theme and any Shopify 2.0 theme, even Refresh theme. If your product has multiple variants, it will add the first variant only. 

Please make sure to check the demo store before buying. Password: made4uo

If you want to use cart page, please use this code instead. Do not use the code together.

NOTE: Gift wrap code for cart page and cart drawer are the same but different placement. 

 What you are buying:

  • Add one product in just a click of a button in your cart drawer only (no cart page)
  • Code is using ajax that updates the cart drawer
  • Choose any product you want
  • Design might have to depend to the Shopify theme being use
  • The code might not work together with an app

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.

To start:

1. Go to Admin store > Online Store > Themes > Actions > Edit code.

2. Open the Snippet folder and create a new snippet, name it "gift-wrap."

3. Then paste the code below. Click SAVE.

{% assign product = settings.product_gift_wrap %}
{% assign variant_id = product.variants.first.id %}
{% if product != blank %}
  {% if cart != empty %}
    <div class="giftWrapContainer">
      <gift-wrap
        data-cart-type="{{ settings.cart_type }}"
        data-variant-id="{{variant_id}}"
        data-remove-link="cart/change?id={{ variant_id }}&quantity=0"
        data-add-link="cart/add?id={{ variant_id }}&quantity=1"
      >
        <div class="cartCheckbox" name="{{ settings.attribute_name }}">
            <input type="checkbox" name="attributes[{{ settings.attribute_name }}]" id="drawerCheckbox">
            <label for="drawerCheckbox">{{ settings.checkbox_label }}</label>
        </div>
        {% if settings.show_note %}
          <div class="cart__note field giftWrapNote">
            <label for="attributeNote">{{ settings.note_label }}</label>
            <textarea
              form="cart"
              class="text-area field__input"
              id="attributeNote"
              name="attributes[{{settings.note_label}}]"
              placeholder="{{ 'sections.cart.note' | t }}"
            >{{ cart.note }}</textarea>
          </div>
        {% endif %}
        <script type="application/json" id="cartItems">
          {{ cart.items | json }}
        </script>
      </gift-wrap>
    </div>
  {% endif %}
{% endif %}
<style>
.giftWrapContainer {
  position: relative;
  width: 100%;
  max-width: 35rem;
  margin-bottom: 4rem;
}
.cartCheckbox {
  position: relative;
  margin-bottom: 1rem;
}
.is-empty .giftWrapContainer {
  display: none;
}
.giftWrapNote {
  margin-top: 5rem;
}
</style>
<script>
class GiftWrap extends HTMLElement {
  constructor() {
    super();
    this.checkbox = this.querySelector("input");
    this.checkbox.addEventListener("change", this.checkboxListener.bind(this));
 
    this.cartItems = this.querySelector("#cartItems").textContent;
    this.note = document.querySelector("cart-note");
    this.init();
  }
  checkboxListener() {
    if(this.checkbox.checked == true) {
      this.addItem()
      sessionStorage.setItem("check", "true");
    } else {
      this.removeItem()
      sessionStorage.removeItem("check");
    }
  }
  init() {
    if (sessionStorage.getItem("check")) {
      this.checkbox.checked = true
    } else {
      this.checkbox.checked = false
    }
    this.hideBtn();
  }
  hideBtn() {
    let giftItem = '';
    if(this.dataset.cartType == 'drawer') {
     giftItem = document.querySelector(`quantity-popover [data-variant-id="${this.dataset.variantId}"]`); 
    }else {
     giftItem = document.querySelector(`quantity-popover [data-quantity-variant-id="${this.dataset.variantId}"]`);
    }
    if(giftItem) giftItem.closest('quantity-popover').style.display = 'none';
  }
  addItem() {
     if (this.dataset.cartType == 'drawer') {
      fetch(window.Shopify.routes.root + this.dataset.addLink)
        .then((response) => response.text())
        .then((responseText) => {
          const html = new DOMParser().parseFromString(responseText, 'text/html');
          const selectors = ['cart-drawer-items', '.cart-drawer__footer'];
          for (const selector of selectors) {
            const targetElement = document.querySelector(selector);
            const sourceElement = html.querySelector(selector);
            if (targetElement && sourceElement) {
              targetElement.replaceWith(sourceElement);
            }
          }
          this.hideBtn()
        })
        .catch((e) => {
          console.error(e);
        });
    } else {
      fetch(window.Shopify.routes.root + this.dataset.addLink)
        .then((response) => response.text())
        .then((responseText) => {
          const html = new DOMParser().parseFromString(responseText, 'text/html');
          const sourceQty = html.querySelector('cart-items');
          document.querySelector('cart-items').innerHTML = sourceQty.innerHTML;
          this.hideBtn()
        })
        .catch((e) => {
          console.error(e);
        });
    }
  }
  removeItem() {
     if (this.dataset.cartType == 'drawer') {
      fetch(window.Shopify.routes.root + this.dataset.removeLink)
        .then((response) => response.text())
        .then((responseText) => {
          const html = new DOMParser().parseFromString(responseText, 'text/html');
          const selectors = ['cart-drawer-items', '.cart-drawer__footer'];
          for (const selector of selectors) {
            const targetElement = document.querySelector(selector);
            const sourceElement = html.querySelector(selector);
            if (targetElement && sourceElement) {
              targetElement.replaceWith(sourceElement);
            }
          }
        })
        .catch((e) => {
          console.error(e);
        });
    } else {
      fetch(window.Shopify.routes.root + this.dataset.removeLink)
        .then((response) => response.text())
        .then((responseText) => {
          const html = new DOMParser().parseFromString(responseText, 'text/html');
          const sourceQty = html.querySelector('cart-items');
          document.querySelector('cart-items').innerHTML = sourceQty.innerHTML;
        })
        .catch((e) => {
          console.error(e);
        });
    }
  }
}
customElements.define("gift-wrap", GiftWrap);
</script>  

 4. Next, we will add our settings to allow customization. Open the settings_schema.json under the Config folder, and scroll down until you find the last "]." Before the closing bracket, add the code below.

,{
  "name": "Gift Wrap",
  "settings": [
    {
      "type": "product",
      "id": "product_gift_wrap",
      "label": "Product to add with checkbox"
    },
    {
      "type": "text",
      "id": "checkbox_label",
      "label": "Checkbox label",
      "default": "Please include gift wrapping."
    },
    {
      "type": "text",
      "id": "attribute_name",
      "default": "Gift Wrap",
      "label": "Attribute name"
    },
    {
      "type": "checkbox",
      "id": "multiple_variants",
      "label": "Multiple variants"
    },
    {
      "type": "checkbox",
      "id": "show_note",
      "label": "Show note",
      "default": true
    },
    {
      "type": "text",
      "id": "note_label",
      "label": "Note label",
      "default": "Please provide more instructions."
    }
  ]
}

 5. Next, you have to open the "cart-drawer.liquid" under the Snippet folder. Find the code below. See image for placement reference.

<div class="cart-drawer__footer" {{ block.shopify_attributes }}>

 Refresh theme gift wrap

For newer version, you might have the code below instead. 

 <div class="drawer__footer">

Cart drawer

6. Then insert the code below. 

{% render 'gift-wrap' %}

 

Last thing to do is to assign your product for gift wrap. Go to your theme editor, click Theme Settings, the Gift wrap. Then assign the product for giftwrap.

That's it (",) If this is too intense for you, do not hesitate to contact me using "Chat with us."

Copied!
Back to blog

Leave a comment