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.
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 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 %}
I began working with a company that already had quite a complex theme built and live. On their collection pages and search page, the products that don't have a featured image don't get displayed. So when searching if all of the results are items that don't have featured images, all there is now is a blank space where products would be.
I'm wanting to know if it is possible in the search.liquid file to check if all the search.results are missing an item.featured_image, if that's true, then skip showing the results and display a message stating there's no results.
A stripped down example of the code now is as follows:
{% if search.performed %}
{% paginate search.results by 60 %}
{% if search.results == empty %}
<div class="row">
<h2>Sorry! No Search Results</h2>
<p>Your search for <strong>"{{ search.terms }}"</strong> didn't
return any results.</p>
</div>
{% else %}
<div class="row">
<h1>Search Results</h1>
<p>{{ search.results_count }} Products match your search.</p>
{% include 'pagination' %}
</div>
{% for item in search.results %}
{% if item.featured_image == blank %}
{% continue %}
{% endif %}
// looped code for each item with featured image.
{% endfor %}
{% endif %}
{% endpaginate %}
{% endif %}
Any help would be greatly appreciated!
----EDIT----
As HymnZ led me to find, simply creating a for loop to count the items.featured_image == blank and checking if that count matches search.results_count does the trick.
Replacing {% if search.results == empty %}, which determines if the No Results text will display, with the code below solves the problem.
{% assign items_blank = 0 %}
{% for item in search.results %}
{% if item.featured_image == blank %}
{% assign items_blank = items_blank | plus: 1 %}
{% endif %}
{% endfor %}
{% if search.results == empty or items_blank == search.results_count %}
Replace the line {% if search.results == empty %} with the following code
{% assign items_blank = 0 %}
{% for item in search.results %}
{% if item.featured_image == blank %}
{% assign items_blank = items_blank | plus: 1 %}
{% endif %}
{% endfor %}
{% if search.results == empty or items_blank == search.results_count %}
I'm in a situation where hiding a certain vendors products in the control panel isn't an options due to an outside POS. For a test in search.liquid, I used search.terms like below. This code works but not everyone will type thevendor exactly the same way and will see the products if they don't type thevendor.
{% for item in search.results %}
{% if search.terms == 'thevendor' %}
{% else %}
{% include 'search-result' %}
{% endif %}
{% endfor %}
I tried to figure out how to write the code to hide these products in a better way. I tried product.vendor like below but when I search for those products individually they are not hidden. The code:
{% for item in search.results %}
{% if product.vendor == 'thevendor' %}
{% else %}
{% include 'search-result' %}
{% endif %}
{% endfor %}
Can someone tell me what I'm missing here? It seems it doesn't know what product.vendor is but when I print out who the vendor is, it displays the vendor. I don't understand why it's not hiding the products that are associated with this vendor.
{% for item in search.results %}
{% if item.product.vendor == 'thevendor' %}
{% else %}
{% include 'search-result' %}
{% endif %}
{% endfor %}
This should work.
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.