This seems like it so be such a simple one but for whatever reason I can't see the forest for trees. So I have the current situation in Screenshot 1 where I have set three different variants for a product. The products are size based as ML...but for some reason all 3 variants are showing on the button instead of the one thats selected.
The code I use to pull this out currently is:
{% if current_variant.available %}
<button type="submit" name="add" class="border--none">
<span class="display--block padding--1 palette--background-color--green palette--color--white text-transform--uppercase letter-spacing--2px font-size--15px palette--color--white">
add to bag |
<strong>
{% for variant in product.variants %}
{{ variant.price | money_without_trailing_zeros }}
{% endfor %}
</strong>
</span>
</button>
{% else %}
What you are trying to achieve is not possible with Liquid only. Liquid is just a templating language that is rendered at server side. It does not update on client side.
You want to display the price in button only for the selected variant, but Liquid has no information about that on server side and you just loop through the prices of all available variants. Hence, you see all prices in your button.
To fix this, use the first available or selected variant price using Liquid and update rest using JavaScript at client-side.
Returns the variant object of the currently-selected variant if there
is a valid ?variant= query parameter in the URL. If there is no
selected variant, the first available variant is returned.
Doing so, your code will be like
<button type="submit" name="add" class="border--none">
<span class="display--block padding--1 palette--background-color--green palette--color--white text-transform--uppercase letter-spacing--2px font-size--15px palette--color--white">
add to bag |
<strong>
{{ product.selected_or_first_available_variant.price | money_without_trailing_zeros }}
</strong>
</span>
</button>
Then change price via JavaScript on variant change, that is dependent on your theme.
More information on Selected or First Available Variant
Related
I have a Shopify store based in Singapore and set the primary market to SG as I need the payouts to be in SGD. My main customers are from China, and I want the default currency to be CNY. Right now, it switches around CNY and SGD between my devices.
I saw this at my Shopify footer.liquid file when I enabled the currency selector. I tried adding in {% assign form.current_currency.iso_code = "CNY" %} in hopes of changing the current currency of the shop to CNY, but it didn't work.
Is there any way to mimic the way the store currency is changed or to change the "current_currency" directly without requiring user input from the customers? Can't seem to find where the current currency data is stored in.
<div class="disclosure" data-disclosure-currency>
<button type="button" class="disclosure__toggle" aria-expanded="false" aria-controls="currency-list" aria-describedby="currency-heading" data-disclosure-toggle>
{{ form.current_currency.iso_code }} {%- if form.current_currency.symbol -%}{{ form.current_currency.symbol }}{%- endif -%}
{% assign form.current_currency.iso_code = "CNY" %}
</button>
Would appreciate any help I can get! :) Thanks in advance.
I would like to know how I can achieve to update the tax price given in the following image.
I inserted the following code into my price:
{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product__tax caption rte">
{%- if shop.taxes_included -%}
{{ 'products.product.include_taxes' | t }}
<span id="taxPrice" class="product__tax caption rte" itemprop="price">
{{ product.price | times:0.19 | money }}
<br>zzgl. Versand
</span>
{%- endif -%}
Now I want to achieve that the price for the taxes update as I change the variant.
I'm pretty sure it's possible with some JS, but unfortunately I have no experience in JS.
I'll appreciate every possible answer.
I tried to insert a JS code snippet (into the global.js file) from an older shopify support ticket regarding the same thing.
$('#taxPrice').html( Shopify.formatMoney(variant.price * 0.19, moneyFormat) );
But didn't work out as expected, although it worked on the Minimal theme just fine.
I have a shopify store with new, used and refurbished amplifiers & speakers.
This condition is stored in a manual collection (four of them). The others collections being automated.
I would like to display the condition of the product on the product page or the products list.
So basically I need to get all the collections and filter to display one of the four :
If the product belongs to collection "used" display collection "used"
If the product belongs to collection "new" display collection "new"
etc...
The closest to what I want to do has been made trough this code :
{% assign product_collection = product.collections.first %}
{% if product_collection %}
This product is part of my {{ product_collection.title | link_to: product_collection.url }} Collection
{% endif %}
Found here : https://community.shopify.com/c/Shopify-Design/RESOLVED-Display-Collection-on-Product-Page/td-p/230899
With this I am not able to filter on the four collections.
I have spent the day on this...If somebody can help, that would save my day :)
You can add all collections(title or handle value) on the product-grid-item.liquid.
<div class= "grid-item
{% for product_collection in product.collections %}
{{product_collection.title | handle }}
{% endfor %}
">
...
</div>
And then you can filter them with JavaScript on the frontend.
Hope this could help you
I am currently using this code in the cart.liquid. I have tried it in the cart.template.liquid, but I need it to appear at the top of the cart container or near the products in the cart since the checkbox is required. I am new to coding, so please be specific. I used https://ui-elements-generator.myshopify.com/pages/cart-attribute to generate the required checkbox part. It said to insert it in the cart.liquid instead of the cart.template.liquid. Any advice would be awesome.
`{% for item in cart.items %}
{% if product.tag contains "delay" %}
<form>
<p class="cart-attribute__field">
<input type="hidden" name="attributes[I am aware that my order may have a 6 to 8-week
shipping delay, since there are higher than normal ordering volumes.]" value="No">
<input required class="required" type="checkbox" name="attributes[I am aware that my
order may have a 6 to 8-week shipping delay, since there are higher than normal ordering
volumes.]" value="Yes"{% if cart.attributes["I am aware that my order may have a 6 to 8-
week shipping delay, since there are higher than normal ordering volumes."] == "Yes" %}
checked{% endif %}>
<label>I am aware that my order may have a 6 to 8-week shipping delay, since there are
higher than normal ordering volumes.</label>
</p><br>Not interested in waiting, check out alternative options for immediate shipping.
<b><i>SHOP NOW</i></b>
</form>
{% endif %}
{% endfor %}`
What theme are you using?
On newer themes the main cart content is in the cart.template.liquid file so you are in the right place.
The issue here is using {% if product.tag contains "delay" %} since the product object is not available. Instead, since you are looping through the cart items, the code should be:
{% if item.product.tags contains "delay" %}
What is happening here is the item variable is used to loop through all the cart line items. Using this you are then able to access the product.tags - note that it is "tags" as opposed to "tag" since it is an array of all the tags. More info on that can be seen here.
Hope that helps!
I am simply allowing to checkout out of stock product to buy. When a customer wants to buy product has inventory less than zero and clicks on view cart from ajax cart, I simply want to show message " dispatch by 7 June." in cart-template.liquid.I have applied logic as given below. If required full code ready to share.
{% if variant.inventory_quantity < 1%}
<p id="dispatch" style="color: #f48c21">Will be dispatched by June 7</p>
{{variant.inventory_quantity}}
{% endif %}
<script>console.log(variant.inventory_quantity)</script>
when I print the message in cart-template.liquid without if condition I can see this message. I found that it does not print anything inside {{}} also checked with console.log gives error as variant is not defined My query Is do I need to define variant manually? if yes how? or need to use a different liquid variable to check inventory quantity of product less than zero?
Let me know if any more are required. Thanks.
I have started printing all variant variable. I just simply added item before variant.inventory_quantity and it saves my day.
{% if item.variant.inventory_quantity < 1 %}
<p id="dispatch" style="color: #f48c21">Will be dispatched by June 7</p>
{% endif %}