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 %}
Related
I followed the directions for the second way to tag a product to a blog
This is the website I used https://happypoints.io/shopify-add-products-to-blog-post-c2-stt-66/
This is the code that was entered
{% assign my_description = article.content | split: '=== split content ===' %}
{% assign my_description_size = my_description.size | minus: 2 %}
{{ my_description | first}}
<div class="show-product-list">
{% if article.tags.size > 0 %}
{% for tag in article.tags %}
{% paginate collections.all.products by 100 %}
{%- for product in collections.all.products -%}
{% if product.handle == tag %}
<div class="product_item">
{% include 'product-card-list' %}
</div>
{% endif %}
{%- endfor -%}
{% endpaginate %}
{% endfor %}
{% endif %}
</div>
{{ my_description | last}}
after following all the directions I received an error message saying
Liquid error (sections/article-template.liquid line 42): Could not find asset snippets/product-card-list.liquid
I am not sure why the product wont link to the blog using the seo handle
Your code has a line:
{% include 'product-card-list' %}
That means Shopify expects to find some asset named product-card-list.liquid. Since it cannot, you get that error. Add that snippet of code, and your error will disappear.
I'm writing some liquid code for a shopify website in order to add products to any blog post based on tags that use product's handle. I've tried with one product and it works just fine so I was trying to iterate it through a loop but I couldn't get any information from the array I've created. This is the code I've written so far. Can you help me understand what I'm doing wrong? Thanks!
{% comment %}declare variables{% endcomment %}
{% assign related_prod_index = 0 %}
{% assign related_prod_array = "" | split: ',' %}
{% comment %}check for tags that contains products handles{% endcomment %}
{% for tag in article.tags %}
{% if tag contains "product_"%}
{% assign prod_handle = tag | split:"_" %}
{% assign blog_prod = all_products[prod_handle[1]] %}
{% assign related_prod_array = related_prod_array | push:blog_prod %}
{% assign related_prod_index = related_prod_index | plus:1 %}
{% endif %}
{% endfor%}
{% comment %}check how many product tags I found{% endcomment %}
<h1>{{ related_prod_index }} tags found</h1>
{% comment %}loop that create small preview for each product{% endcomment %}
{% if related_prod_array %}
{% for rel_pr in related_prod_array %}
<img src="{{ rel_pr.featured_image | img_url:'original' }}">
<p>{{rel_pr.title}}</p>
<p>{{rel_pr.price | money}}</p>
{% endfor %}
{% endif %}
This looks like it should be working, but if this post is true, then you can't add Product objects to an array.
The good news is you shouldn't need to. Put the display code in the same loop you use to search through the tags.
{% for tag in article.tags %}
{% if tag contains "product_"%}
{% assign prod_handle = tag | split:"_" %}
{% assign blog_prod = all_products[prod_handle[1]] %}
<img src="{{ blog_prod .featured_image | img_url:'original' }}">
<p>{{blog_prod .title}}</p>
<p>{{blog_prod .price | money}}</p>
{% endif %}
{% endfor %}
Say this is my navigational structure in shopify:
Shoes
Flats
Sandals
Bags
Currently I've gotten a fairly simple navigational component working, where if you're on a page (let's say shoes) the navigation on the page will highlight, because it matches the menu's handle with the page handle. Good so far:
{% for link in linklists.main-menu.links %}
<span><a
{% if collection.handle == link.handle %}
class="current"
{% endif %}
href="{{ link.url }}"> {{ link.title }}</a></span>
{% endfor %}
Now the question is, how do I check the sub-collection (Flats) and match it with it's parent collection to then do the same thing?
You need to adjust this condition
{% if collection.handle == link.handle %}
class="current"
{% endif %}
so that it check for the internal links as well. Add this snippet before this condition
{% assign sub_link = false %}
{% assign inside_links_handle = link.handle %}
{% for inside_link in linklists[inside_links_handle].links %}
{% if collection.handle == inside_link.handle %}
{% assign sub_link = true %}
{% break %}
{% endif %}
{% endfor %}
And change the condition to this {% if collection.handle == link.handle or sub_link == true %} class='current' {% endif %}
Here you are looking inside the linklist which is inside another linklist (nested). More nesting levels, just iterate the code to consider inside levels. This should work.
i want to do something like this in Shopify:
{% for i in (0..10) %}
{% capture slide %}slide{{i}}{% endcapture %}
{{ settings.slide }}//i need the value of this one
// i want to get the values for settings.slide1, settings.slide2 etc
{% endfor %}
Another example:
{% for i in (0..10) %}
{{ settings.slide[i] }}//i need the value of this one
{% endfor %}
This is a simplified version of what im trying to achieve.
Thanks
Try this:
{% for i in (0..10) %}
{% assign current_slide = 'slide' | append: i %}
{{ settings[current_slide] }}
{% endfor %}
I am trying to write a simple if statement, but always struggle with shopify's system.
Essentially I want it to do this:
{% if collection.product == 'discontinued' %}
This Product is Discontinued.
{% endif %}
If it's in this collection, then display this text/html. Otherwise it wouldn't display anything. This would be in the product.liquid template.
Any ideas?
This is what ended up working:
{% for c in product.collections %}
{% if c.handle == "discontinued" %}
This product is Discontinued
{% endif %}
{% endfor %}
You can create an array of the collections for a product using map on product.collections. This which will create a new array with your specified property, i.e. the handles of each collection.
You can then check if this new array contains the handle you want to work with.
{% assign productCollections = product.collections | map: "handle" %}
{% if productCollections contains 'your-collection-handle' %}
{% comment %} DoSomething {% endcomment %}
{% endif %}
So for your example:
{% assign productCollections = product.collections | map: "handle" %}
{% if productCollections contains 'discontinued' %}
This product is Discontinued
{% endif %}
You can map other fields if your case is different, such as the title.
I guess this will help any one, I have used in the sidebar of shopify website.
The current collection page will get checked by this below code.
<div class="row-fluid not-animated" data-animate="fadeInUp">
<div class="title">By Collections</div>
<form class="coll">
{% assign col_tags = collection.title %}
{% for collection in collections %}
<input type="radio" value="{{ collection.url }}" name="collections" {% if col_tags contains collection.title %} checked {% endif %} >{{ collection.title | escape }} <br/>
{% endfor %}
</form>
If I understand how liquid collections work in Shopify, you will need to iterate over all of your products.
You'd need to do something similar to this if you are working with collections directly:
{% for product in collection.product %}
{% if product.tags contains 'discontinued' %}
This product has been discontinued :(
{% endif %}
{% endfor %}
If you are just working with a single product you can probably just use the inner if liquid tag part.
References:
Collection.liquid
Product.liquid
You can indeed add discontinued products to a collection called discontinued.
When rendering a product, you could do as csaunders suggests, simply loop through all the products in the discontinued collection, and check if the id of the current product matches any of the products in that collection. If so, do what you must do. No need to use tags.