I'm trying to hide my cart when it is empty and found my cart code snippet in the header.liquid file
<a href="/cart" class="site-header__cart">
{% include 'icon-cart' %}
<span class="visually-hidden">{{ 'layout.cart.title' | t }}</span>
<span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
{% if cart.item_count > 0 %}
<div id="CartCount" class="site-header__cart-count">
<span>{{ cart.item_count }}</span>
<span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
</div>
{% endif %}
</a>
I've also tried using this code that I found here (https://ecommerce.shopify.com/c/ecommerce-design/t/hide-cart-checkout-button-when-cart-is-empty-115075)
{% if cart.item_count != 0 %}
Both of these aren't working for me, any suggestions?
You can use this code, do let us know if this help you to resolve your query:
{% if cart.item_count > 0 %} your html here {% endif %}
Also you need to make some changes to js if your page in not refreshing during add to cart if your theme using ajax add to cart functionality.
Thanks
Related
On the desktop version of our site, we have a 3 column section (the theme calls is text-adverts) with one about pickup, one about delivery, one about shipping. On mobile, it automatically converts to a flexslider with no arrows or really any way of knowing to swipe unless you watch it long enough. I'd much rather just have the 3 stacked so no users miss this critical info.
I've found the code dealing with the text-adverts on mobile but I don't know what to replace it with. Any help is much appreciated.
<div class="container d-block d-md-none">
<div class="row text-advert-section mobile-homepage-text-adverts flexslider text-adverts-alignment--{{ text-advert--alignment }}">
<ul class="slides">
{% for block in section.blocks %}
{%- assign advert_has_link = false -%}
{% if block.settings.link != blank %}
{%- assign advert_has_link = true -%}
{% endif %}
<li {{ block.shopify_attributes }}>
<div class="grid__item text-advert-section__item{% if advert_has_link %} text-advert-section__item--link{% endif %}">
{% if advert_has_link %}<a href="{{ block.settings.link }}">{% endif %}
{% if block.settings.icon != 'none' %}
<div class="text-advert-section__icon-wrapper {{ section.settings.icon-size }}">
<i data-feather="{{ block.settings.icon }}"></i>
</div>
{% endif %}
<div class="text-advert-section__text-wrapper">
{% if block.settings.heading != blank %}
<span class="text-advert-section__header type-subheading type-subheading--1">{{ block.settings.heading | escape }}</span>
{% endif %}
{% if block.settings.subheading != blank %}
<span class="text-advert-section__sub-header h6">{{ block.settings.subheading | escape }}</span>
{% endif %}
</div>
{% if advert_has_link %}</a>{% endif %}
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
The flexslider is being initialised by javascript. So you need to find the script that initialises the slider. Most likely it will look something like this: $('.flexslider').flexslider({})
You should also remove the flexslider class from the div with class text-advert-section - because it shouldn't utilise any flexslider code.
By default, the Debut theme shows the lowest variant price. I would like to show the max variant price on the collection featured products on the homepage and collection pages. I was able to change this on the individual product page by editing the product-price.liquid code but haven't had any luck changing it on the collection grid. The URL is https://anaholagranola.com/
I changed a line of code to this but it only changed the product page
{%- assign price = product.price_max -%}
The theme seems to be displaying prices based off of a single variant being passed into the theme's product-price snippet. It's going to take a little bit more coding to update things to show the product's max price.
Here are two ideas for how you might do this:
Select the highest-priced variant from the variant list and use that as the current_variant in your featured-product code.
This might look something as follows:
Find:
{%- assign current_variant = product.selected_or_first_available_variant -%}
Replace with:
{%- assign sorted_variant_list = product.variants | sort: 'price' | reverse -%}
{%- assign current_variant = sorted_variant_list.first -%}
This code will sort the variants by price (ascending by default) then reverses the order (so they should now be in descending price order) and then selects the first variant from that list, which should give you the highest-priced variant that will be fed into the product-price snippet.
Write a better price display snippet that takes a product, not a variant
Create a new file in your theme's snippets folder and give it a catchy name.
Using the existing product-price file as a template, we might get something like this:
{%- assign money_price = price | money -%}
<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}" data-price>
{% if section.settings.show_vendor %}
<div class="price__vendor">
<dt>
<span class="visually-hidden">{{ 'products.product.vendor' | t }}</span>
</dt>
<dd>
{{ product.vendor }}
</dd>
</div>
{% endif %}
<div class="price__regular">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
{% if available %}
{% if compare_at_price > price %}
<s class="price-item price-item--regular" data-regular-price>
{{ compare_at_price | money }}
</s>
{% else %}
<span class="price-item price-item--regular" data-regular-price>
{{ money_price }}
</span>
{% endif %}
{% else %}
<span class="price-item price-item--regular" data-regular-price>
{{ 'products.product.sold_out' | t }}
</span>
{% endif %}
</dd>
</div>
<div class="price__sale">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="price-item price-item--sale" data-sale-price>
{{ money_price }}
</span>
<span class="price-item__label" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
</dd>
</div>
<div class="price__unit">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
</dt>
</div>
</dl>
I created the above by simply removing the variant pieces from the pricing snippet. To use this revised snippet you will need to pass in price, compare_at_price and available values. (Change 'product-price-revised' to whatever you called the snippet file that you created)
{% include 'product-price-revised', price: product.price_max, compare_at_price: product.compare_at_price_max, available: product.available %}
In Debut Theme Snippets -> product-card-grid.liquid
Replace:
{% include 'product-price', variant: product.selected_or_first_available_variant %}
With:
{% include 'product-price', variant: product %}
Then in the Snippet -> product-price.liquid
Replace:
{%- assign price = variant.price -%}
With:
{%- assign price = variant.price_max -%}
I tested it on the Debut theme its working. You may also try this.
I've tried multiple variations but keep failing with the following code:
This code works fine in multiple locations on my site.
{% if product.price == 0.00 %}
<strong>P.O.A - Find Out More</strong>
{% else %}
But I can't get it working on this code block in product-price.liquid: I've tried multiple ways of implementing it but it won't fire. I always end up seeing £0.00
<div class="product-price {% if compare_at_price > price %}price--on-sale{% endif %}" data-price>
{% if compare_at_price > price %}
<span class="price-item-medium"><b>Standard Price:</b></span>
<span class="price-item price-item--regular money" data-product-id="{{ product.id }}" data-regular-price>
{{ compare_at_price | money }}
</span><be>
<span class="price-item"><b>Price With Discount:</b></span><span class="price-item price-item--sale" data-sale-price>
<span class="money" data-product-id="{{ variant.id }}">{{ price | money }}</span>
</span>
{% else %}
<span class="price-item price-item--regular" data-regular-price>
<span class="money" data-variant-id="{{ variant.id }}">{{ price | money }}</span>
</span>
<span class="price-item price-item--sale" data-sale-price></span>
</div>
{% endif %}
{% else %}
<div class="form-message form-message--error">
<strong>Prices are restricted</strong> Login, or Register for an account.
</div>
All help greatly appreciated.
This question sounds similar to my own question cart-template-variant. I am doing the same thing with ajax cart header.liquid. I just wanted to access inventory from cart object same as cart-template question {% if item.variant.inventory_quantity < 1 %}. I am initially trying to print {{item.variant.inventory_quantity}} into header.liquid since it is ajax cart. inside {% for item in cart.items %} I have printed {{item.variant.inventory_quantity}} but when I add in stock or out of stock product into the cart. It always returns 0. Which is the cart object property I am not passing properly?
I am actually following below advise but I have missed something here.
The code for Ajax cart is in header.liquid. It has a Cart object, which has many properties. See https://help.shopify.com/themes/liquid/objects/cart#cart-items
One of them is items (i.e. cart.items), which gives all the items added to cart. Around line 100, you will see a for loop {% for item in cart.items %}.
Here item = line_item. The line_item has many properties. See https://help.shopify.com/themes/liquid/objects/line_item.
One of them is variant. i.e. line_item.variant. So here inside for loop will be item.variant.
So now you have variant properties. See https://help.shopify.com/themes/liquid/objects/variant
variant.inventory_quantity is one of them.
header.liquid (Ready to share entire file if required.)
<form action="/checkout" method="post" id="cart">
<ul data-money-format="{{ shop.money_format }}" data-shop-currency="{{ shop.currency }}" data-shop-name="{{ shop.name | escape }}">
<li class="mm-subtitle"><a class="continue ss-icon" href="#cart"><span class="icon-close"></span></a></li>
{% if cart.item_count == 0 %}
<li class="empty_cart">{{ 'layout.general.empty_cart' | t }}</li>
{% else %}
{% for item in cart.items %}
{{item.variant.inventory_quantity}}
<a href="/#" >Will be dispatched by June 7</a>
<li class="cart_item {% if forloop.last %}last_cart_item{% endif %}">
<p class="mm-counter">
<span class="icon-minus minus"></span><input type="number" min="0" class="quantity" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" data-line-id="{{ forloop.index }}" readonly /><span class="icon-plus plus"></span>
</p>
<a href="{{ item.url }}">
{% if item.image %}
<div class="cart_image">
<img src="{{ item | img_url: '410x' }}" alt="{{ item.title | escape }}" />
</div>
{% endif %}
<div class="item_info">
{{ item.product.title }}
{% unless item.product.has_only_default_variant or item.variant.title contains "Title" %}
{% for option in item.product.options %}
{% unless option contains "Title" %}
- {{ item.variant.options[forloop.index0] }} {% unless forloop.last %}/{% endunless %}
{% endunless %}
{% endfor %}
{% endunless %}
{% if item.properties %}
{% for p in item.properties %}
{% if p.last != blank %}
<div class="line-item">
{{ p.first }}: {{ p.last }}
</div>
{% endif %}
{% endfor %}
{% endif %}
<div class="price">
<span class="money">{{ item.price | money }}</span>
</div>
</div>
</a>
</li>
{% endfor %}
<li class="mm-label">
<p class="mm-counter price">
<span class="money">{{ cart.total_price | money }}</span>
</p>
<a href="/cart">
<strong>{{ 'layout.general.subtotal' | t }}</strong>
</a>
</li>
<li class="mm-subtitle clearfix">
{% if settings.display_special_instructions %}
<textarea id="cart-note" name="note" rows="2" placeholder="{{ 'layout.general.cart_note' | t }}" class="clearfix">{{ cart.note }}</textarea>
{% endif %}
{% if settings.display_tos_checkbox %}
<aside class="tos tos_checkbox">
<input type="checkbox" class="tos_agree" id="sliding_agree" required />
<label class="tos_label" for="sliding_agree">
{{ settings.tos_richtext }}
</label>
</aside>
{% endif %}
<input type="submit" class="action_button right" value="{{ 'layout.general.checkout' | t }}" />
{{ 'layout.general.edit_cart' | t }}
</li>
{% endif %}
</ul>
</form>
Can you please guide me, How to create third level menu in shopify.
Sub Dropdown Menu for (Almost) Any Shopify theme.
Thanks in advance.
In navigation:
If your Shopify backend updated then simple drag and drag upto three level
see: screenshot http://prntscr.com/hzu8n3
Or use as create new menu with same handle of sub menu.
And use below code
<div class="menuItems">
<ul class="mebItemParent">
{% for link in linklists.mobile-menu.links %}
{% if linklists[link.handle] == empty %}
<li class="">{{ link.title }}</li>
{% else %}
<li class="hasSubItem">
<div class="withtiggle">
{{ link.title }} <span class="toggleItem">+</span>
</div>
<ul>
{% for l in linklists[link.handle].links %}
{% if linklists[l.handle] == empty %}
<li class="">{{ l.title }}</li>
{% else %}
<li class="hasSubItem">
<div class="withtiggle">
{{ l.title }} <span class="toggleItem">+</span>
</div>
<ul>
{% for l2 in linklists[link.handle].links %}
<li class="">{{ l2.title }}</li>
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</ul>
</div>