I have the below code in my shopify site, currently all it does is display a link to either 'in stock' or 'Show All'. I would like to make the link more dynamic so if someone has filtered by a certain product and they click on the "in stock" link it would show only in stock for that product. eg. if they were at /collections/all/Product1 after clicking the link it should go to /collections/in-stock/Product1
My Current code:
<div class="filter-stock">
{% if page_title contains "Products" %}
<a href="/collections/in-stock"><b>Hide 'Sold Out' items</b></a>
{% endif %}
{% if page_title contains "IN STOCK" %}
<a href="/collections/all"><b>Show All Products</b></a>
{% endif %}
Solved! Go to the solution
Ok if have managed to get it working using this code, unless anyone has a better way but it seems to work well now.
<div class="filter-stock">
{% if current_tags %}
{% for tag in current_tags %}
{% if page_title contains "IN STOCK" %}
<a href="/collections/all/{{ tag | handleize }}"><b>Show All Products</b></a>
{% else %}
<a href="/collections/in-stock/{{ tag | handleize }}"><b>Hide 'Sold Out' items</b></a>
{% endif %}
{% endfor %}
{% endif %}
</div>
This is an accepted solution.
new updated code:
<div class="filter-stock">
{% if current_tags %}
{% for tag in current_tags %}
{% if collection == blank or collection.handle != 'in-stock' %}
<a href="/collections/in-stock/{{ tag | handleize }}"><b>Hide 'Sold Out' items</b></a>
{% endif %}
{% if collection and collection.handle == 'in-stock' %}
<a href="/collections/all/{{ tag | handleize }}"><b>Show All Products</b></a>
{% endif %}
{% endfor %}
{% else %}
{% if collection == blank or collection.handle != 'in-stock' %}
<a href="/collections/in-stock"><b>Hide 'Sold Out' items</b></a>
{% endif %}
{% if collection and collection.handle == 'in-stock' %}
<a href="/collections/all"><b>Show All Products</b></a>
{% endif %}
{% endif %}
</div>
Hi AnnaMae, for my template it is located in the "/sections/collection-template.liquid" but yours might be different. there is also a bit more to it. I have a collection called "in-stock" which is an automatic collection of inventory stock > 0. also the below code in my CSS section but yours may be different.
.filter-stock {
width: 50%;
@include flexbox();
@include align-items(center);
@media only screen and (max-width: 1199px) {
@include flex-direction(column);
@include align-items(flex-start);
}
@include respond-to('medium') {
width: 100%;
margin-bottom: 20px;
align-items: center;
&:last-child {
margin-bottom: 0;
}
}
label {
margin-right: 10px;
white-space: nowrap;
}
}
User | Count |
---|---|
23 | |
21 | |
18 | |
17 | |
16 |