I need to pass variant id in search.json file in shopify as I am using to add products through variant id in search.autocomplete.liquid file. I have checked they are using variables to call the product 'title, url & thumbnail' in loop as mentioned in the below code. Is there any way to create variable for 'variant id'.
{% layout none %}
{% assign product_cunt = search.results_count %}
{% paginate search.results by product_cunt %}
{% capture results %}
{% for item in search.results %}
{% assign product = item %}
{ "title" : {{ product.title | json }},
"url" : {{ product.url | within: product.collections.last | json }},
"thumbnail": {{ product.featured_image.src | product_img_url: 'thumb' | json }},
"variant" : (I need to add variant id variable here)
}
{% unless forloop.last %},
{% endunless %}
{% endfor %}
{% endcapture %}
{% endpaginate %}
{ "results_count": {{ search.results_count }},
"results": [{{ results }}]
}
Thanks very much for looking into this.
I have found the solution of it mentioned below If anybody has same concern.
just need to get the first available variant's ID, you should be able to use
product.selected_or_first_available_variant.id
there to get the ID of the first available variant for that product.
Related
{% assign price = product.price | money %}
{% capture dot_separator %} <span class='Button__SeparatorDot'></span> {% endcapture %}
{% capture addToCartText %} ADD TO CART {{ dot_separator }} {{ product_price_formatted }} {% endcapture %}
{{ addToCartText }}
My goal is to show the "addToCartText" text this way
Goal: ADD TO CART . 287$
Where the dot is created using css
Right now it's showing like this
Current output: ADD TO CART < span class='Button__SeparatorDot'></ span> 287$
How would I tell liquid to read the html as it is?
Try to use strip_html filter https://shopify.github.io/liquid/filters/strip_html/
like so:
{% capture dot_separator %} < span class='Button__SeparatorDot'></ span> {% endcapture %}
{% capture addToCartText %} ADD TO CART {{ dot_separator | strip_html }} {{ product_price_formatted }} {% endcapture %}
{{ addToCartText }}
how can I get highest numbers from loop here is my code
from this code I got 2,1,3,1,2
So I want 3 as a result could you please help me to solve this problem any help would be appriciated
{% for line_item in cart.items %}
{% assign c_no = line_item.properties | join:',' | remove_first : 'meal pack,' | strip | split : '-' | last | sort: 'price' %}
<h1>{{c_no}}</h1>
{% endfor %}
Use the {{ forloop.length }}
{% for product in collections.frontpage.products %}
{% if forloop.first %}
<p>This collection has {{ forloop.length }} products:</p>
{% endif %}
<p>{{ product.title }}</p>
{% endfor %}
Docs: https://shopify.dev/api/liquid/objects/for-loops
How could you display only certain variants on the product and collection pages in Shopify depending on the value of an option?
Assuming the option name is 'Box Options' and the values would either be 'Trade' or 'Retail' I would expect something similar to this code to return the price for the Trade variant:
{%- assign get_variant = product.options_with_values -%}
{% assign trade_variant = get_variant | where: "Trade" %}
<p>{{ trade_variant.price }}</p>
For context I'm trying to get trade prices to be used where the customer tag is "Trade" using this if statement in the liquid file:
{% if customer.tags contains 'Trade' %}
Feel like this should be really easy but for the life of me I cannot get this to work.
If your variants contain only one option, then something like that should work (not tested):
{% if customer.tags contains 'Trade' %}
{% assign p_variants = product.variants | where:'title','Trade' %}
{% for variant in p_variants %}
{{ variant.title }}
{% endfor %}
{% endif %}
Then, second case, your variants go with multiple options, then it is a little bit more complex (not tested either):
{% if customer.tags contains 'Trade' %}
{% for variant in product.variants %}
{% if variant.options contains 'Box Options' and variant.title contains 'Trade' %}
{{ variant.title }}
{% endif %}
{% endfor %}
{% endif %}
I'm trying to get a Shopify collection page to display different .js embeds on a specific part of the page, depending on the URL of the current page.
Can this be done using {% if page.url == %} if so, how would I have variants of page URLs and specific embed codes?
The page URL looks like this:
https://www.example.com/collections/technology/technology-connected-home
The embed code looks like this:
<script type="text/javascript" src="https://apps.example.com/app/js/18218989163.js"></script>```
Each Shopify store has different types of pages: index (aka home), product, collection, page, blog, article, and cart. Here is the full list of page types.
So, this page.url will only work on a page object of type page for all other types you need to use the proper page object to get the url:
collection.url
product.url
etc...
In your case I'd suggest using case/when, add your logic in a snippet and render it in theme.liquid.
Here is an example:
{% if request.page_type == 'page' %}
{% case page.url %}
{% when '/pages/about-us' %}
{{ 'pages__about-us.js' | script_tag }}
{% when '/pages/contact-us' %}
{{ 'pages__contact-us.js' | script_tag }}
{% else %}
{{ 'pages__generic.js' | script_tag }}
{% endcase %}
{% endif %}
ref
You gonna have to check for request.page_type before creating your case/when or another approach would be to check the type at the top of the snippet, like:
{% comment %} Set page object type {% endcomment %}
{% case request.page_type %}
{% when 'page' %}
{% assign page_object = page %}
{% when 'collection' %}
{% assign page_object = collection %}
{% when 'product' %}
{% assign page_object = product %}
{% endcase %}
{% comment %} Load JS based on page URL{% endcomment %}
{% case page_object.url %}
{% when '/pages/about-us' %}
{{ 'pages__about-us.js' | script_tag }}
{% when '/pages/contact-us' %}
{{ 'pages__contact-us.js' | script_tag }}
{% else %}
{{ 'pages__generic.js' | script_tag }}
{% endcase %}
This isn't a bulletproof solution, however it should be enough for you to build on top of it.
Good luck!
I recommend using page.handle and identifying the handle. I do not believe page.url will do what you need
You can also try this as handle can never be changed.
{% case page.handle %}
{% when 'about-us' %}
{{ 'pages_about-us.js' | script_tag }}
{% when 'contact-us' %}
{{ 'pages_contact-us.js' | script_tag }}
{% else %}
{{ 'pages_generic.js' | script_tag }}
{% endcase %}
From what I can find, it seems that this may be impossible. There must be someway to do this though. All I want to do is get some information from the API, and pass it to a liquid variable. Maybe there's another way.
Since liquid renders server side you can't pass javascript variables into the template engine. However you can embed liquid template code in javascript functions. There's a post on the shopify forums with some example code that may help: Pass variable from Java script to liquid?
for example:
$(function() {
new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback });
// Add label if only one product option and it isn't 'Title'.
{% if product.options.size == 1 and product.options.first != 'Title' %}
$('.selector-wrapper:eq(0)').prepend('<label>{{ product.options.first }}</label>');
{% endif %}
// Auto-select first available variant on page load.
{% assign found_one_in_stock = false %}
{% for variant in product.variants %}
{% if variant.available and found_one_in_stock == false %}
{% assign found_one_in_stock = true %}
{% for option in product.options %}
$('.single-option-selector:eq({{ forloop.index0 }})').val({{ variant.options[forloop.index0] | json }}).trigger('change');
{% endfor %}
{% endif %}
{% endfor %}
});