I need some help, I have this code below for gift wrapping option in cart on prestige theme.
I want to find a way to change the style of this? The box is too far to the left and not inline with the order notes box or products. I would also like to change the colour of the box?
<div class="drawer__gift-wrapping{% if cart.item_count == 0 %} hidden{% endif %}">
{% render 'gift-wrapping' %}
</div>
{% 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 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;">
Need your jewelry gift wrapped?
</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 %}
<style>
#updates_{{ id }} { display: none; }
</style>
<script>
Shopify.Cart = Shopify.Cart || {};
Shopify.Cart.GiftWrap = {};
Shopify.Cart.GiftWrap.set = function() {
var headers = new Headers({ 'Content-Type': 'application/json' });
var request = {
method: 'POST',
headers: headers,
body: JSON.stringify({ updates: { {{ id }}: 1 }, attributes: { 'gift-wrapping': true } })
};
fetch('/cart/update.js', request)
.then(function() {
document.dispatchEvent(new CustomEvent('product:added', {
bubbles: true,
detail: {
variant: {{ id }},
quantity: 1
}
}));
});
}
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': '' } })
};
fetch('/cart/update.js', request)
.then(function() {
document.dispatchEvent(new CustomEvent('product:added', {
bubbles: true,
detail: {
variant: {{ id }},
quantity: 0
}
}));
});
}
// If we have nothing but gift-wrap items in the cart.
{% if cart.items.size == 1 and gift_wraps_in_cart > 0 %}
document.addEventListener("DOMContentLoaded", function(){
Shopify.Cart.GiftWrap.remove();
});
// If we have more than one gift-wrap item in the cart.
{% elsif gift_wraps_in_cart > 1 %}
document.addEventListener("DOMContentLoaded", 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 %}
document.addEventListener("DOMContentLoaded", 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 %}
document.addEventListener("DOMContentLoaded", function(){
Shopify.Cart.GiftWrap.set();
});
{% endif %}
// When the gift-wrapping checkbox is checked or unchecked.
$(document).ready(function() {
$(document).on('change', '[name="attributes[gift-wrapping]"]', function(event){
console.log('changes');
if (event.target.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="https://shopify.dev/tutorials/customize-theme-add-gift-wrap-option" target="_blank" rel="noopener noreferrer nofollow">here</a>.
</p>
{% endif %}
