Gift Wrap Option Dawn theme - Upsell

Gift Wrap Option Dawn theme - Upsell

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.

 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 Shopif 2.0 theme, even Refresh theme. You can have a product with multiple variants and upsell your gift wraps or any other product. 

 

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 %}
{% assign remove_url = '' %}
{%- for item in cart.items -%}
{% if item.id == variant_id %}
{% assign move_url = item.url_to_remove %}
{% endif %}
{%- endfor -%}

{% if cart != empty %}
<div class="giftWrapContainer">
<gift-wrap data-variant-id="{{variant_id}}" data-product-id="{{ product.id }}">
<div class="cartCheckbox" name="{{ settings.attribute_name }}">
<input type="checkbox" name="attributes[{{ settings.attribute_name }}]" value="Yes">
<a id="addLink" href="cart/add?id={{ variant_id }}&quantity=1">{{ settings.checkbox_label }}</a>
<a id="removeLink" class="checkHide" href="{{ remove_url }}">{{ settings.checkbox_label }}</a>
</div>

{% if settings.multiple_variants %}
<div class="cartCheckbox--variant select">
{%- for option in product.options_with_values -%}
<label class="form__label" for="giftWrap">
{{ option.name }}
</label>
{%- endfor -%}
<select id="giftWrap" class="select__select" name="attributes[{{settings.attribute_name}}]">
{%- for variant in product.variants -%}
<option value="{{ variant.id }}" {% if forloop.first %}selected="selected"{% endif %}>
{{ variant.title }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
{% endif %}
{% 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 %}
<style>
.giftWrapContainer {
position: relative;
width: 100%;
max-width: 35rem;
margin-bottom: 4rem;
}

.checkHide {
display: none !important
}

.cartCheckbox {
position: relative;
margin-bottom: 1rem;
}

.cartCheckbox a {
color: rgb(var(--color-foreground));
text-decoration: none;
line-height: 1.5;
}

.cartCheckbox a:before {
content: '';
position: absolute;
height: 20px;
width: 20px;
z-index: 1;
left: 0;
}

.cartCheckbox--variant.select {
display: flex;
position: relative;
width: 30%;
min-width: 25rem;
flex-direction: column;
}

.cartCheckbox--variant.select::after {
display: none;
}

.cartCheckbox--variant.select > select {
outline: 0.2rem solid rgba(var(--color-foreground),.5);
outline-offset: 0.3rem;
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),0 0 0.5rem 0.4rem rgba(var(--color-foreground),.3);
}

.cartCheckbox--variant.select::before, .cartCheckbox.select::after{
display: none !important
}

.cartCheckbox--variant.select > select::before {
pointer-events: none;
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: var(--inputs-radius-outset);
box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius) rgba(var(--color-base-text),var(--inputs-shadow-opacity));
z-index: -1;
}

.cartCheckbox--variant.select > select::after {
pointer-events: none;
content: "";
position: absolute;
top: var(--inputs-border-width);
right: var(--inputs-border-width);
bottom: var(--inputs-border-width);
left: var(--inputs-border-width);
border: 0.1rem solid transparent;
border-radius: var(--inputs-radius);
box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground),var(--inputs-border-opacity));
transition: box-shadow var(--duration-short) ease;
z-index: 1;
}

.cartCheckbox--variant.select svg {
top: calc(65% - 0.2rem);
}

.is-empty .giftWrapContainer {
display: none;
}

.giftWrapNote {
margin-top: 5rem;
}
</style>

<script>
class GiftWrap extends HTMLElement {
constructor() {
super();
this.add = this.querySelector('#addLink');
this.remove = this.querySelector('#removeLink');
this.checkbox = this.querySelector('input');
this.select = this.querySelector('#giftWrap');
this.cartItems = this.querySelector('#cartItems').textContent;

this.note = document.querySelector('cart-note');
if(!this.add) return;
if(!this.remove) return;

if(this.select) {
this.select.addEventListener('change', this.addItem.bind(this));
}

this.querySelectorAll('a').forEach(a => a.addEventListener('click', this.update.bind(this)));
this.renderChanges();
this.getCartItems();
}

update() {
if(sessionStorage.getItem('check')) {
sessionStorage.removeItem('check');
} else {
sessionStorage.setItem('check', 'true');
}
this.renderChanges();
}

renderChanges() {
if(sessionStorage.getItem('check')) {
this.checkbox.checked = true;
this.add.classList.add('checkHide');
this.remove.classList.remove('checkHide');
} else {
this.checkbox.checked = false;
this.add.classList.remove('checkHide');
this.remove.classList.add('checkHide');
}
}

addItem() {
const addHref = `cart/add?id=${this.select.value}&quantity=1`;
this.add.href = addHref;
}

getCartItems() {
this.removeLinkUpdate(JSON.parse( this.cartItems));
}

removeLinkUpdate(cartItems) {
cartItems.map(item => {
if(item.product_id == this.dataset.productId) {
this.remove.href = sessionStorage.setItem('remove_href', `cart/change?id=${item.key}&quantity=0`);
}
})
this.remove.href = sessionStorage.getItem('remove_href');
}

removedItem(line) {
const removedItem = document.querySelector(`#CartItem-${line}`).dataset.variant;
if(!removedItem) return;
if(this.dataset.productId == removedItem) {
this.update();
}
}
}

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. Lastly, we need to add the snippet in the main-cart-footer.liquid file under the Section folder. Open the file and find the code below. 

<div class="page-width{% if cart == empty %} is-empty{% endif %}" id="main-cart-footer" data-id="{{ section.id }}">

 

5. For Refresh theme, you have to open the "cart-drawer.liquid" under the Section folder. Find the code below.

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

 

6. Then insert the code below. See video for more information 

{% render 'gift-wrap' %}

 

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