I want give an option to the users can select gift wrap option when there is more than one products on the cart and while there is only product I do not want to show gift wrap option in Shopify?
Below the code that provided by shopify but the problem with this code is that its for each products.My goal is show when there is more than one products.If in the cart there less than two products then i want to remove the gift wrap 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
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;"
>
For {{ linklists.gift-wrapping.links.first.object.price | money }}
please wrap the products in this order.
</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() {
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': '', '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_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.addEventListener("DOMContentLoaded", function(){
document.querySelector('[name="attributes[gift-wrapping]"]').addEventListener("change", function(event) {
if (event.target.checked) {
Shopify.Cart.GiftWrap.set();
} else {
Shopify.Cart.GiftWrap.remove();
}
});
document.querySelector('#gift-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</code> which, in turn, contains a link to your
gift-wrapping product. Please review the steps outlined
<a
href="https://help.shopify.com/manual/online-store/themes/os/customize/add-gift-wrap-option"
target="_blank"
rel="noopener noreferrer nofollow"
>here</a
>.
</p>
{% endif %}
Please Help
In the cart.liquid i have tried to render like this Which seems worked but when i have one item the gift wrap still stay on the cart
{% if cart.item_count > 1 %}
{% render 'gift-wrapping' %}
{% endif %}
*************** Below full cart.liquid *******************
{%- liquid
assign continue_shopping_page = routes.all_products_collection_url
if section.settings.continue_shopping_page != blank
assign continue_shopping_page = section.settings.continue_shopping_page
endif
-%}
<div class="central py-medium content" data-section-type="cart-template">
{% if section.settings.cart_show_title %}
<h1 data-cc-animate class="h2">{{ 'cart.general.title' | t }}</h1>
{% endif %}
{% if cart.item_count > 0 %}
<form action="{{ routes.cart_url }}" method="post" id="cartform" data-cc-animate>
<ul class="cart-list clearfix">
<li class="item cart-list-header">
<div class="col-image">{{ 'cart.general.product' | t }}</div>
<div class="col-notimage">
<div class="desc"></div>
<div class="item-price">{{ 'cart.general.price' | t }}</div>
<div class="quantity-and-remove">{{ 'cart.general.quantity' | t }}</div>
<div class="line-total">{{ 'cart.general.total' | t }}</div>
</div>
</li>
{% for item in cart.items %}
{% comment %}
Determining the handle of the collection that was last seen for the 'continue shopping' link.
{% endcomment %}
<li class="item clearfix">
<div class="col-image">
<a data-cc-animate-click class="image" href="{{ item.url }}">
{% render 'responsive-image', image: item.image %}
</a>
</div>
<div class="col-notimage">
<div class="desc">
{% if settings.show_preorder_label and item.product.template_suffix == 'preorder' %}
<div class="feature-subheader feature-subheader--small">{{ 'products.product.preorder' | t }}</div>
{% endif %}
<div class="title">
<a data-cc-animate-click href="{{ item.url }}">
<span class="product-title">{{ item.product.title }}</span>
{% unless item.product.has_only_default_variant %}{{ item.variant.title }}{% endunless %}
</a>
</div>
{% comment %}
Line Item Properties
{% endcomment %}
{% if item.properties.size > 0 %}
<div class="line-items">
{% for p in item.properties %}
{% unless p.last == blank %}
{{ p.first }}:
{% if p.last contains '/uploads/' %}
<a data-cc-animate-click href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
<br/>
{% endunless %}
{% endfor %}
</div>
{% endif %}
{% if item.selling_plan_allocation %}
<div class="subscription-description">
<p>{{ item.selling_plan_allocation.selling_plan.name }}</p>
</div>
{% endif %}
{% if section.settings.show_backorder_text == true %}
{% render 'backorder', variant: item.variant %}
{% endif %}
</div>
<div class="item-price">
{% if item.original_line_price > item.final_line_price %}
<div class="original-price theme-money">{%- render "price", price: item.original_price, disable_currency_code: true -%}</div>
<div class="theme-money">{%- render "price", price: item.final_price, disable_currency_code: true -%}</div>
{% else %}
<div class="theme-money">{%- render "price", price: item.final_price, disable_currency_code: true -%}</div>
{% endif %}
{% render 'unit-price', variant: item %}
{% if item.line_level_discount_allocations.size > 0 %}
<ul class="cart-discount-list">
{% for discount_allocation in item.line_level_discount_allocations %}
<li class="cart-discount">
<div class="cart-discount__label">{{ discount_allocation.discount_application.title }}</div>
<div class="cart-discount__amount">(-<span class="theme-money">{%- render "price", price: discount_allocation.amount, disable_currency_code: true -%}</span>)</div>
</li>
{% endfor %}
</ul>
{% endif %}
</div>
<script>console.log({{ cart | json }});</script>
<div class="quantity-and-remove">
{% if item.id == 42448148988055 %}
<div>
<a class="minus"><span></span></a>
<p style="display:inline;">{{ 'custom-text.title.service' | t }} </p>
<a class="plus"><span></span></a>
<a class="remove" href="{{ routes.cart_change_url }}?line={{ forloop.index }}&quantity=0">{{ 'cart.general.remove' | t | escape }}</a>
</div>
{% else %}
<div class="quantity border-radius-{{ settings.buttons_shape }}">
<a class="minus" href="{{ routes.cart_change_url }}?line={{ forloop.index }}&quantity={{ item.quantity | minus: 1 }}" aria-label="{{ 'cart.general.decrease' | t | escape }}"><span>−</span></a>
<input class="select-on-focus" type="text" size="2" id="updates_{{ item.id }}" name="updates[]" value="{{ item.quantity }}" aria-label="{{ 'cart.general.quantity' | t | escape }}" />
<a class="plus" href="{{ routes.cart_change_url }}?line={{ forloop.index }}&quantity={{ item.quantity | plus: 1 }}" aria-label="{{ 'cart.general.increase' | t | escape }}"><span>+</span></a>
</div>
<a class="remove" href="{{ routes.cart_change_url }}?line={{ forloop.index }}&quantity=0">{{ 'cart.general.remove' | t | escape }}</a>
{% endif %}
</div>
<div class="line-total">
{% if item.original_line_price != item.final_line_price %}
<div class="original-price theme-money">{%- render "price", price: item.original_line_price, disable_currency_code: true -%}</div>
<div class="theme-money">{%- render "price", price: item.final_line_price, disable_currency_code: true -%}</div>
{% else %}
<div class="theme-money">{%- render "price", price: item.final_line_price, disable_currency_code: true -%}</div>
{% endif %}
</div>
</div>
</li>
{% endfor %}
</ul>
<div class="update-continue">
<input class="update textbutton" type="submit" name="update" value="{{ 'cart.general.update' | t | escape }}" />
<span>|</span>
<a data-cc-animate-click class="continue" href="{{ continue_shopping_page }}">{{ 'cart.general.continue' | t }}</a>
</div>
<div class="under-cart">
<div class="subtotal-row">
{%- if cart.cart_level_discount_applications != blank -%}
<ul class="cart-discount-list align-right">
{%- for discount_application in cart.cart_level_discount_applications -%}
<li class="cart-discount cart-discount--inline">
<span class="cart-discount__label">{{ discount_application.title }}</span>
<span class="cart-discount__amount">-<span class="theme-money">{%- render "price", price: discount_application.total_allocated_amount, disable_currency_code: true -%}</span></span>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
<div class="subtotal">
<span class="label">{{ 'cart.general.subtotal' | t }}</span>
<span class="amount theme-money">{%- render "price", price: cart.total_price, is_total_price: true -%}</span>
</div>
</div>
{% if section.settings.cart_note_show %}
<p class="note-area">
<label for="note" class="feature-subheader--small">{{ 'cart.label.note' | t }}</label>
<textarea id="note" name="note">{{ cart.note }}</textarea>
</p>
{% endif %}
{% if cart.item_count > 1 %}
{% render 'gift-wrapping' %}
{% endif %}
{% if section.settings.cart_terms_show %}
<p class="terms rte">
<input type="checkbox" id="terms" />
{% assign terms_url = section.settings.cart_terms_page %}
{% capture terms_label_html %}<label for="terms">{{ 'cart.terms.agreement_html' | t: terms_url: terms_url }}</label>{% endcapture %}
{% if section.settings.cart_terms_page == blank %}
{{ terms_label_html | replace: '<a ', '<span ' | replace: '</a>', '</span>' }}
{% else %}
{{ terms_label_html }}
{% endif %}
</p>
{% endif %}
{% if section.settings.show_tax_and_shipping %}
{%- capture taxes_shipping_checkout -%}
{%- if cart.taxes_included and shop.shipping_policy.body != blank -%}
{{ 'cart.general.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- elsif cart.taxes_included -%}
{{ 'cart.general.taxes_included_but_shipping_at_checkout' | t }}
{%- elsif shop.shipping_policy.body != blank -%}
{{ 'cart.general.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
{%- else -%}
{{ 'cart.general.taxes_and_shipping_at_checkout' | t }}
{%- endif -%}
{%- endcapture -%}
<div class="cart-policies rte">{{ taxes_shipping_checkout }}</div>
{% endif %}
<input type="submit" class="checkout-btn" name="checkout" value="{{ 'cart.general.checkout' | t | escape }}" />
{% comment %}Paypal and Google checkout buttons{% endcomment %}
{% if section.settings.show_additional_checkout_buttons and additional_checkout_buttons and section.settings.cart_terms_show == false %}
<div class="additional-checkout-buttons">
{{ content_for_additional_checkout_buttons }}
</div>
{% endif %}
</div>
<center><strong>*Tienes un cupón? Añádelo en el momento de pago. </center>
</form>
{% else %}
<div>
<div class="rte" data-cc-animate data-cc-animate-delay="0.4s">
<p data-cc-animate data-cc-animate-delay="0.2s" class="align-center">
{{ 'cart.general.empty' | t }}
</p>
<p class="align-center"><a data-cc-animate-click href="{{ continue_shopping_page }}">{{ 'cart.general.continue_browsing' | t }}</a></p>
</div>
</div>
{% endif %}
</div>
{% schema %}
{
"name": "Cart page",
"settings": [
{
"type": "checkbox",
"id": "cart_show_title",
"label": "Show page title",
"default": true
},
{
"type": "checkbox",
"id": "cart_terms_show",
"label": "Show Terms and Conditions checkbox",
"info": "Additional checkout buttons will be hidden",
"default": false
},
{
"type": "url",
"id": "cart_terms_page",
"label": "Page for 'Terms and Conditions' link"
},
{
"type": "url",
"id": "continue_shopping_page",
"label": "Page for 'Continue shopping' link"
},
{
"type": "checkbox",
"id": "cart_note_show",
"label": "Enable order notes",
"default": true
},
{
"type": "checkbox",
"id": "show_tax_and_shipping",
"label": "Show tax and shipping information",
"default": true
},
{
"type": "checkbox",
"id": "show_additional_checkout_buttons",
"label": "Show additional checkout options",
"default": true,
"info": "Display other gateways and quick checkout buttons. [Read more](https://help.shopify.com/en/manual/payments/accelerated-checkouts)"
},
{
"type": "checkbox",
"id": "show_backorder_text",
"label": "Show backorder text",
"default": true,
"info": "Only shows for products which use Shopify inventory tracking and are available to purchase when out of stock."
}
]
}
{% endschema %}