Gift Wrap Formatting

Highlighted
New Member
8 0 0

We used the gift-wrapping tutorial from Shopify to create a rush production checkbox. Everything seems to be working great, however, the checkbox is appearing at the very bottom of our cart. Can someone help with the style/formatting to align the checkbox with our terms checkbox - or move it higher than this?

 

This is what the bottom of our cart looks like right now.

Cart.PNG

0 Likes
Highlighted
Shopify Partner
1258 103 157

hi,@

hope you doing well

try this

https://help.shopify.com/en/themes/customization/cart/add-gift-wrap-option

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
New Member
8 0 0

Hello, thanks for the response!

 

That is the tutorial we used to create our rush production option. However, the formatting is off for some reason and our checkbox is appearing at the bottom of the page - instead of where the tutorial shows it being placed. I am not sure if something else on our cart page is overriding this code and causing the checkbox to be positioned at the bottom of the page, or if we missed something in the code?

 

Here is the "rush production" code we used:

<!-- 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.rush-production.links.size > 0 and linklists.rush-production.links.first.type == 'product_link' %}

<div id="is-a-rush" style="clear: left; margin: 30px 0" class="clearfix rte">
<p>
<input type="hidden" name="attributes[rush-production]" value="" />
<input id="rush-production" type="checkbox" name="attributes[rush-production]" value="yes" {% if cart.attributes.rush-production %} checked="checked"{% endif %} style="float: none" />
<label for="rush-production" style="display:inline; padding-left: 5px; float: none;">
For {{ linklists.rush-production.links.first.object.price | money }}
please produce my order in 48 hours.
</label>
</p>
</div>

{% assign id = linklists.rush-production.links.first.object.variants.first.id %}

{% assign rush_production_in_cart = 0 %}
{% for item in cart.items %}
{% if item.id == id %}
{% assign rush_production_in_cart = item.quantity %}
{% endif %}
{% endfor %}

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

<script>

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

Shopify.Cart.RushProduction = {};

Shopify.Cart.RushProduction.set = function() {
jQuery.ajax({
type: 'POST',
url: '/cart/update.js',
data: { updates: { {{ id }}: 1 }, attributes: { 'rush-production': true } },
dataType: 'json',
success: function() { location.href = '/cart'; }
});
}

Shopify.Cart.RushProduction.remove = function() {
jQuery.ajax({
type: 'POST',
url: '/cart/update.js',
data: { updates: { {{ id }}: 0 }, attributes: { 'rush-production': '' } },
dataType: 'json',
success: function() { location.href = '/cart'; }
});
}

// If we have nothing but rush-production items in the cart.
{% if cart.items.size == 1 and rush_production_in_cart > 0 %}
jQuery(function() {
Shopify.Cart.RushProduction.remove();
});
// If we have more than one rush-production item in the cart.
{% elsif rush_production_in_cart > 1 %}
jQuery(function() {
Shopify.Cart.RushProduction.set();
});
// If we have a rush-production item in the cart but our rush-production cart attribute has not been set.
{% elsif rush_production_in_cart > 0 and cart.attributes.rush-production == blank %}
jQuery(function() {
Shopify.Cart.RushProduction.set();
});
// If we have no rush-production item in the cart but our rush-production cart attribute has been set.
{% elsif rush_production_in_cart == 0 and cart.attributes.rush-production != blank %}
jQuery(function() {
Shopify.Cart.RushProduction.set();
});
{% endif %}

// When the rush-production checkbox is checked or unchecked.
jQuery(function() {
jQuery('[name="attributes\[rush-production\]"]').change(function() {
if (jQuery(this).is(':checked')) {
Shopify.Cart.RushProduction.set();
}
else {
Shopify.Cart.RushProduction.remove();
}
});
});

</script>

{% else %}

<p style="clear: left; margin: 30px 0" class="rte">
You attempted to add a rush-production script to your shopping cart, but it won't work because you don't have
a link list with handle <code>rush-production</code> which, in turn, contains a link
to your rush-production 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 %}

0 Likes