Code of gift wrap options

DigitalFeeler
Tourist
5 0 0
Hey, I’m trining to insert the code of this article: https://shopify.dev/tutorials/customize-theme-add-gift-wrap-option
I already complete the code of 1 gift wrapping option that is free. But my client need an other option of wrapping that has a price which is multiply by the number of product of the cart. The problem is that the first option is counting like another regular product. The code of both snippets are attached below.
Thank you in advance 


Code Wrapping free option  

{% 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;">
Por {{ linklists.gift-wrapping.links.first.object.price | money }}
Envolver este pedido para regalo.
</label>
</p>
<p>
<label style="display:block" for="gift-note">Mensaje. para regalo (gratis y opcional):</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 in the tutorial.
</p>

{% endif %}

Code Wrapping 10€ option 

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

<div id="is-a-gift-2" style="clear: left; margin: 30px 0" class="clearfix rte">
<p>
<input id="gift-wrapping-2" type="checkbox" name="attributes[gift-wrapping-2]" value="yes" {% if cart.attributes.gift-wrapping-2 %} checked="checked"{% endif %} style="float: none" />
<label for="gift-wrapping-2" style="display:inline; padding-left: 5px; float: none;">
For {{ linklists.gift-wrapping-2.links.first.object.price | money }} per item,
please wrap the products in this order.
</label>
</p>
<p>
<label style="display:block" for="gift-2-note">Grabado de iniciales en el producto (de pago y opcional):</label>
<textarea name="attributes[gift-2-note]" id="gift-note">{{ cart.attributes.gift-note }}</textarea>
</p>
</div>

{% assign id = linklists.gift-wrapping-2.links.first.object.variants.first.id %}

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

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

<script>

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

Shopify.Cart.GiftWrap2 = {};

Shopify.Cart.GiftWrap2.set = function() {
var headers = new Headers({ 'Content-Type': 'application/json' });

var request = {
method: 'POST',
headers: headers,
body: JSON.stringify({ updates: { {{ id }}: {{ items_in_cart }} }, attributes: { 'gift-wrapping-2': true } })
};
fetch('/cart/update.js', request)
.then(function() {
location.href = '/cart';
});
}

Shopify.Cart.GiftWrap.remove = function() {
var headers = new Headers({ 'Content-Type': 'application/json' });

var request = {
method: 'POST',
headers: headers,
body: JSON.stringify({ updates: { {{ id }}: 0 }, attributes: { 'gift-wrapping-2': '', 'gift-note': '' } })
};
fetch('/cart/update.js', request)
.then(function() {
location.href = '/cart';
});
}

// If we have nothing but gift-wrap items in the cart.
{% if cart.items.size == 1 and gift_wraps_2_in_cart > 0 %}
document.addEventListener("DOMContentLoaded", function(){
Shopify.Cart.GiftWrap2.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_2_in_cart != items_in_cart %}
document.addEventListener("DOMContentLoaded", function(){
Shopify.Cart.GiftWrap2.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-2 == blank %}
document.addEventListener("DOMContentLoaded", function(){
Shopify.Cart.GiftWrap2.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-2 != blank %}
document.addEventListener("DOMContentLoaded", function(){
Shopify.Cart.GiftWrap2.set();
});
{% endif %}

// When the gift-wrapping checkbox is checked or unchecked.
document.addEventListener("DOMContentLoaded", function(){
document.querySelector('[name="attributes\[gift-wrapping-2\]"]').addEventListener("change", function(event) {
if (event.target.checked) {
Shopify.Cart.GiftWrap2.set();
} else {
Shopify.Cart.GiftWrap2.remove();
}

});

document.querySelector('#gift-2-note').addEventListener("change", function(evt) {
var note = evt.target.value;
var headers = new Headers({ 'Content-Type': 'application/json' });

var request = {
method: 'POST',
headers: headers,
body: JSON.stringify({ attributes: { 'gift-note': note } })
};

fetch('/cart/update.js', request);
});
});

</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-2</code> which, in turn, contains a link
to your gift-wrapping product. Please review the steps outlined
<a href="https://shopify.dev/tutorials/customize-theme-add-gift-wrap-option" target="_blank" rel="noopener noreferrer nofollow">here</a>.
</p>

{% endif %}

0 Likes