Update tax on changing variant in shopify DAWN theme - shopify

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.

Related

Get Shopify Product Meta Description

In the Collection Template, I would like to add the Meta Description instead of the normal Product Description. I tried to replace {{ product.description }} with {{ page_description | escape }} but nothing is showing up. Do I need to add something like {% for product in collection.products %} (doesn't work) around it?

Set Shopify store default currency using liquid

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.

Changing shopify labels in theme

I'm quite new to Shopify themes and I'm needing to change the label for the Shopify "Product Size" & "Color" in the theme i'm using but i'm confused by the loop where i change it.
This is the code which im closest to
{% form 'product', product, class:form_classes, novalidate: 'novalidate' %}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">
<label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
{{ option.name }}
</label>
{% assign optionName = option.name | downcase %}
If i change the option.name it changes both of the label names not just individual ones. I've attached a screenshot of the product page to help explain this. I assume this is a daft question for a seasoned shopify pro. Any help is really appreciated.
BTW the reason it's using these labels is because all stock is being imported from a third party stock management system.
It sounds like you will have to rely on string manipulation to convert the external names to customer-friendly ones. There are several ways to do so - the best way forward will probably depend on how consistent or varied the imported option names are.
For a full list of string manipulation functions available to you in Liquid, I will also point you towards the Shopify Liquid Reference where you will be able to find a lot more detail.
Approach 1: Simple removal filters
Use | remove to get rid of known bits that we don't want to keep. Like all filters, these can be chained together.
Example:
{{ option.name | remove: 'PA_' | remove: 'CLOTHING-' }}
Approach 2: Split on delimiter characters
The | split filter might be useful if there are lots of different prefixes that you need to remove. This command breaks the string up into an array of pieces, and we can grab the bits that we need using things like the first and last filters.
Example:
{{ option.name | split: '_' | last | split: '-' | last }}
Approach 3: Extensive manual mapping
If the values coming in for your products don't follow any regular patterns, you may be stuck in a position where you have to manually map some or all of your option names to friendly values. If you find yourself in a corner, the case statement is probably your best-of-the-bad options:
Example:
{% case option.name %}
{% when 'PA_CLOTHING-SIZE' %}
{% assign friendly_name = 'Size' %}
{% when 'PA_COLOR' %}
{% assign friendly_name = 'Color' %}
{% default %}
{% assign friendly_name = option.name %}
{% endcase %}
{{ friendly_name }}

Shopify Variant Price Now Showing Correctly

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

Printing Product Variant HS Codes

I am trying to create an automated Commercial Invoice within Shopify, using the Liquid template language. I have everything working, except for the IMPORT/EXPORT Harmonized Codes (HS Tariff Codes) that are stored as variant meta-fields. Whenever I try to print them out using the following code, I get blanks:
{% for line_item in line_items %}
{{ line_item.variant.metafields.global_harmonized_system_code }}
{% endfor %}
Can someone help me pull these HS Codes for each product variant and print them on the Commercial Invoice using liquid to pull the meta-field?
Global is a namespace, try :
{{ line_item.variant.metafields.global.harmonized_system_code }}
The syntax is :
{{ your_object.metafields.namespace.key }}
Your Liquid is insufficient for the task at hand.
{{ line_item.variant.metafields.global_harmonized_system_code }}
That output is not valid. It might point to a set of one or more key value pairs, so you should really iterate on that. Example:
{% for mf in line_item.variant.metafields.global %}
{% if mf | first == 'harmonized_system_code' %}
<p> {{ mf | last }} how is that for some value! </p>
{% endif %}
{% endfor %}
Something like that is more precise and will go through the variant metafields allowning you to choose which ones to print out.
I am able to get the value using this
{{ line_item.variant.metafields.harmonized_system_code.value }}