Show variants prices on product page in specific place - shopify

I have a store with 10 products.
One of them is a subscription for a magazine, with 3 variants: 6 months, 1 year and 2 year
 
I made the product page with a custom template and i inserted the prices with simple html as so: 
Price: 25 $ and so on for the other variants...
Now i'm doing some promos so i would like to have the price updating without having to change it in the theme, i was trying something like that to make it work but without success:
{% assign semestraleid = '18773651783776' %}{% variant.id == semestraleid %} {{ current_variant.price | money }} {% if current_variant.compare_at_price > current_variant.price %} <s style="color: #B8DAEE; font-size: 0.85em;">{{ current_variant.compare_at_price | money }}</s> {% endif %} {% endif %}
So here is the question: HOW CAN I DISPLAY THE REAL PRICE OF EACH VARIANT IN THIS ONE-PAGE PRODUCT PAGE, EXACTLY WHERE I WANT WITH A CODE SNIPPET?
 
Thank you
PS: I've also tried doing some other experiments using the assign and split, i have succeded into printing the price of every variant all together, but after that i didn't know how to show the price correctly as i would like. 

Loop through each of the Product's Variants and output the price:
{% for variant in product.variants %}
{{ variant.price | money }}
{% endfor %}
... or output each one separately using its index:
{{ product.variants[0].price | money }}
{{ product.variants[1].price | money }}
{{ product.variants[2].price | money }}
[index is zero-based]

Related

How to display different variant prices to different customers? (Shopify/Liquid)

I'm currently working on the shopify site for the B2B company where i work.
(Yeah, we know that Shopify Plus is the best option for B2Bs, but we can't afford the price)
We work on two different customer lists and really need two different prices to show to customers on the main-product page.
I managed the lists with customer tags, and also the two different prices with Variants.
Now i was trying to figure out how to show the Price of the Variant 1 to customers with the "list1" tag and the Price of the Variant 2 to customers with the "list2" tag.
(Yeah, we know that there are Wholesale Pricing app to do this, but we can't afford the monthly cost either).
I tried something like this, but i'm stuck...
Could you please help me out?
This is my last try:
{% if customer.tags contains "list1" %}
{% assign current = product.selected_or_first_available_variant %}
{%- assign target_variant = product.variants[0] -%}
<div class="no-js-hidden" id="variantPrice-{{ section.id }}" role="status" {{ block.shopify_attributes }}>
{%- render 'price', product: product, use_variant: true, show_badges: true, price_class: 'price--large' -%} </div>
{% else %}
{% assign current = product.selected_or_first_available_variant %}
{%- assign target_variant = product.variants[1] -%}
<div class="no-js-hidden" id="variantPrice-{{ section.id }}" role="status" {{ block.shopify_attributes }}>
{%- render 'price', product: product, use_variant: true, show_badges: true, price_class: 'price--large' -%} </div>
{% endif %}
I somehow managed to solve this. After being stuck on it for two days :P
It works with something like this:
{%- when 'price' -%}
{% if customer %}//Hide the price if not registered - endif is at the end//
{% if customer.tags contains "list1" %}
{%- assign target_variant = product.variants[0] -%}
<div class="no-js-hidden" id="price-{{ section.id }}" role="status"
{{block.shopify_attributes }}>
{%- render 'price', product: product, use_variant: true, show_badges: true,
price_class: 'price--large' -%} </div> //It shows the price of the First Variant//
{% else %}
{%- assign target_variant = product.variants[1] -%}//I can't figure out if this is relevant for the code, but it works like this, so...//
<div id="variantPrice" role="status" {{ block.shopify_attributes }}>{%- render 'price' -%} </div> //It shows the price of the Second Variant //
{% endif %}
I don't know if this is the correct way, but it works, so it's fine :P
Hope it will help someone with the same issue.
The interesting thing about your approach here is that a customer from List type 1 would be seeing the price for the variant as List type 1 price, but there is zero stopping them from simply placing the variant with the different price from List type 2 in the cart if they wanted.
In other words, you are decorating the price displayed, which is your goal I guess, but there is no actual logic in place to ensure customers pay the correct amount. For that, you would need a different logic, one that tries hard to ensure a customer from List type 1 only gets to checkout with product variants that are assigned to List type 1. Without that logic, you're wide open to a bit of price abuse.
The approach may be very straight to the point:
{% if customer %}
{% for variant in product.variants %}
{% assign current = forloop.index | plus: 1 | prepend:'list' %}
{% if customer.tags contains current %}
{{ variant.price}}
{% assign found = true %}
{% endif %}
{% endfor %}
{% unless found %}
Display what you want to if no price has been found for logged in user
{% endunless %}
{% else %}
What you want to display when customer is not connected to an account.
{% endif %}
You may use the same logic for your add to cart form.

Display product weight in shopify with decimal places. ( ex. 0.25)

so currently working on a shopify website and for one of my products the weight of it is 0.25. But when i try to display this on the page i end up with only 0.2. I didnt write this code as another developer did and im still trying to learn how to use shopify.
{% if product.variants.first.weight != 0 %}
<p>
{{ product.variants.first.weight | weight_with_unit }}
{% comment %}
{{ product.variants.first.weight | divided_by:28.34952 | round: 2 | append: ' oz' }}
{% endcomment %}
</p>
{% endif %}
I tried just fixing it by adding
{{ product.variants.first.weight | weight_with_unit }}
but that would still round it to 0.2
Any suggestions on what i should write instead?

Shopify/liquid - adding classes and removing injected text

I'm working on a Shopify (slate) theme with very limited experience. There's a few classes I need to add which I've managed on images but can't find a way to do this on an anchor included within <h2 class="mosaic__title p-name">{{ item.title | link_to: item.url }}</h2>.
Also I have some prices that has text like "On Sale from" injected before it. I don't know how this is added or how to remove it. Here's an example:
<del>{{ item.compare_at_price | money }}</del>
{% assign sale_price = item.price | money %}
{{ 'products.product.on_sale_from_html' | t: price: sale_price }}
I've tried removing the .on_sale_from_html and t: price: sale_price but that doesn't work/it breaks.
Can anyone advise on this? Thanks!
Full section of code for reference:
<div class="mosaic__caption">
<h2 class="mosaic__title p-name">{{ item.title | link_to: item.url }}</h2>
{% if item.object_type == 'product' %}
<p class="mosaic__value">
{% if item.compare_at_price > item.price %}
{% if item.price_varies %}
<del>{{ item.compare_at_price | money }}</del>
{% assign sale_price = item.price | money %}
{{ 'products.product.on_sale_from_html' | t: price: sale_price }}
{% else %}
{{ 'products.product.on_sale' | t }}
<data itemprop="price" class="p-price">{{ item.price | money }}</data>
{% endif %}
<data class="visually-hidden p-price">{{ 'products.product.regular_price' | t }}</data>
{% else %}
{% if item.price_varies %}
{% assign price = item.price | money %}
<data itemprop="price" class="p-price">{{ 'products.product.from_text_html' | t: price: price }}</data>
{% else %}
<data itemprop="price" class="p-price">{{ item.price | money }}</data>
{% endif %}
{% endif %}
{% unless item.available %}
{{ 'products.product.sold_out' | t }}
{% endunless %}
</p>
{% else %}
<p>{{ item.content | strip_html | truncatewords: 50 }}</p>
{% endif %}
</div>
Lets start with the link_to filter. This code: <h2 class="mosaic__title p-name">{{ item.title | link_to: item.url }}</h2>
The link_to takes a URL and just creates a html link element with the provided text and link.
So the above code is the same as:
<h2 class="mosaic__title p-name">
{{item.title}}
</h2>
So you can write as an alternative the above code or use replace filter to add a class attribute like so for example: item.title | link_to: item.url | replace: '<a', '<a class="foo"'
As for your second question such outputs {{ 'products.product.on_sale_from_html' | t: price: sale_price }} points that this is a translatable text.
This means that your text is located in your translation file ( usually en.default.json in your locales folder ) so you can modify the text from there.
As for the text that is added, it seems that your translated string contains the following {{ price }} variable which is replaced via the passed variable price: sale_price.
PS: Read up the documentation in Shopify where these functions are described in more detail:
https://help.shopify.com/themes/liquid/filters/url-filters#link_to
https://help.shopify.com/themes/development/internationalizing/locale-files#values

Show only one variant price on shopify product page

All the variants for each product have the same price. When I use following code, it's showing price for all the variants. How do i show price of only one (let's say first) variant?
{% for variant in product.variants %}
<div class="tablecell pricecur">
{{ variant.price | money }}
</div>
<div class="tablecell pricecom">
{{ variant.compare_at_price | money }}
</div>
{% endfor %}
You use the following code.
{{ product.first_available_variant.price | money }}
first_available_variant - returns the first variant that is available ( a.k.a it's quantity is larger than 0 )

How to Display a Metafield in Shopify

We have a group of products that we want to have FREE Shipping. In order to do so, I have made their weight =0 and created a weight based shipping for 0lbs.
That way the shipping passes through the cart. But...I would like to display the actual weight on the product page.
I have created a metafield for the shipping weight, and I am trying to call that value to the product page, but not having any luck......
Here is what I am trying for code....
//------SHIPPING WEIGHT-------------------------//
{% if product.vendor == 'American Chains' %}
$('.wt').text((variant.ShippingWeight)+'lb');
// {{ variant.metafields.ShippingWeight.shipping_weight }}
{% else %}
$('.wt').text(parseInt(variant.weight * 0.0022046, 10) + 'lb');
{% endif %}
//------SHIPPING WEIGHT-------------------------//
Thanks for any help or direction on this one.
In Product.liquid you only have access to the Product. If you want to access a specific Product Variant you have to loop through the Product Variants. Within the loop you have access to the metafields for a variant.
{% for variant in product.variants %}
// to display the variant metafields use {{resource.metafields.namespace.key}}
{{ variant.metafields.ShippingWeight.shipping_weight }}
{% endfor %}
http://docs.shopify.com/themes/liquid-documentation/objects/metafield
go threw with this link
simple...
{% for field in product.metafields.instructions %}
{{ field | first }}: {{ field | last }}
{% endfor %}
Meta fields are created by using ( metafields or shopify FD ) shopify app for products edit page
Then enter the following values in form fields (Namespace,Key,Value)
After entering values,you can retrive values like following code..,
Namespace = metafield_values,
Key= color,
Value= red,
{% assign value = product.metafields.metafield_values%}
<p>{{ value.color }}</p>
output: red
------------------------------
{{metafields.namespace.key}}
------------------------------
Namespace = prod_video,
{{ product.metafields.prod_video.prod_video }}
{{ collection.metafields.prod_video.prod_video }}
---------metafield loop with same namespace & different key------------
<div class="prod_add_img">
{% for collection in product.collections %}
{% for field in collection.metafields.additional_images %}
<img src="{{ field | last | asset_url }}">
{% endfor %}
{% endfor %}
</div>
In metafield section, shopify show's shortcode. For below screenshot the code is
{{product.metafields.custom.theme_color}}