How Can I Check Which Collection/product Tag URL A User Came From And Then Use That In A Conditional Statement?
I created breadcrumb code for my client's Shopify site that displays
collection >> product tag >> product
For example:
tableware >> plates >> yellow-striped plates
We use product tags to create subcategories. The only scenario where this breadcrumb doesn't work is when one product is tagged for two different subcategories under a collection. So for example, we have the collection "party favors", and that has as subcategories (product tags) "girls favors" and "boys favors". Wooden spinning tops is tagged both "girls favors" and "boys favors". So when going through the array, "boys favors" comes up first and displays on the product page both when user comes from the girls favors subcategory and the boys favors subcategory. I can't use a remove to remove "boys favors" as that will remove it for the boys favors product page as well.
Is there a way my breadcrumb.liquid page can know which collection/producttag URL a user came from, and then can I take that info and make a variable I can create conditional code around to display the correct product tag (in a case where the same product has two different product tags representing two subcategories under the same collection)?
Answer
Shopify doesn't store variable data. It renders the page solely based on the URL. You can use a combination of JS and liquid code to get this working
- In your
collection.liquid
template orproduct-block.liquid
snippet finda
tag that is linked to product. - Just before closing of the
href
attribute add this code{% if current_tags %}#{{ current_tags }}{% endif %}
- In your
theme.liquid
layout, right before<\head>
add this line<script>var c_tag = decodeURI(window.location.hash)</script>
- In your breadcrumbs related code, give an id to the particular breadcrumb. Let's say in your example:
<span id='r_tag'>boys favors >></span>
. Right after that span add this:
<script>if(c_tag == null || c_tag == $('#r_tag').innerHTML.replace(' >>','')){} else { $('#r_tag').innerHTML = c_tag + ' >>' }</script>
Please note that if there are more than 1 current_tags
you'd have to modify the code accordingly.
Related Questions
- → Does anyone know how to solve IP canonicalization with shopify platform?
- → How can I add a featured image from a blog post to my homepage on shopify
- → Shopify - Get list of product from a specific collection
- → Shopify webhooks not wanted
- → Comparing two large files are taking over four hours
- → Need "add to cart" button price to update with correct amount depending on what checkbox is checked
- → How to append a variable inside another vaiable name in liquid html
- → GET /admin/webhooks.json returns an empty array
- → Javascript function not getting executed properly
- → How to give border to to current displaying border
- → Shopify background image
- → Dynamic Attribute Names in Shopify Cart
- → What after added shopify store into shipstation