Collection Filter Grouping - Customizing the User Experience - shopify

We would like to customize the collection group filtering. Currently, the group filtering is grouping and showing all product tags that have an underscore in the tag name.
ex: Brand_Premium
However, we would like to only show a filter group when there is more than one filter available within a group:
ex: All products on a given collection collection page are the same brand. In this case, we do not want to show a filter group for Brand, since there is only one option.
{%- capture tag_icon -%}
<span class="filter-icon--checkbox">
{%- include 'icon-checkbox' -%}
</span>
{%- endcapture -%}
{% for cat_item in cat_array %}
{% assign tag_count = 0 %}
<h3 class="productgrid--sidebar-title--small">
{{ cat_item }}
</h3>
<ul class="productgrid--sidebar-item filter-group">
{% for tag in collection.all_tags %}
{% assign cat = tag | split: '_' | first %}
{% if cat != tag and cat_item == cat %}
{% assign tag_count = tag_count | plus: 1 %}
{%- capture tag_text -%}
{{- tag_icon -}}
<span class="filter-text">
{{ tag | remove_first: cat | remove_first: '_' }}
</span>
{%- endcapture -%}
{% assign filter_class = 'filter-item' %}
{%- if current_tags contains tag -%}
{% assign filter_class = filter_class | append: ' filter-item--active' %}
{%- else -%}
{% assign filter_class = filter_class | append: ' filter-item--inactive' %}
{%- endif -%}
{%- if tag_count > tag_limit -%}
{% assign filter_class = filter_class | append: ' filter-item--hidden' %}
{%- endif -%}
<li
class="{{ filter_class }}"
data-tag-advanced
data-group="{{ cat_item }}"
data-handle="{{ tag | handle }}"
{% if tag_count > tag_limit %}data-hidden-default{% endif %}
{% if current_tags contains tag %}aria-current="true"{% endif %}
>
{% if current_tags contains tag %}
{{ tag_text | link_to_remove_tag: tag }}
{% else %}
{{ tag_text | link_to_add_tag: tag }}
{% endif %}
</li>
{% endif %}
{% endfor %}
{% if tag_count > tag_limit %}
<li class="filter-item">
<a class="filter-text--link" href="#" data-filter-toggle="false">
{{ 'general.general.see_more' | t }}
</a>
</li>
{% endif %}
</ul>
<hr />
{% endfor %}

Related

How to only display the available product variant prices in the products overview

I would like to display the lowest price of the available/instock product variants, instead of "From " + the lowest price of all product variants, even if they are not in stock. I am using the theme Prestige, any hints on how I could achieve this?
If I am right, I found the following code part in product-item.liquid which is displaying the price and also rendered in the flickity carousel and products overview pages:
<div class="ProductItem__PriceList {% if show_price_on_hover %}ProductItem__PriceList--showOnHover{% endif %} Heading">
{%- if product.compare_at_price > product.price -%}
<span class="ProductItem__Price Price Price--highlight Text--subdued">{{ product.price | money_without_trailing_zeros }}</span>
<span class="ProductItem__Price Price Price--compareAt Text--subdued">{{ product.compare_at_price | money_without_trailing_zeros }}</span>
{%- elsif product.price_varies -%}
{%- capture formatted_min_price -%}{{ product.price_min | money_without_trailing_zeros }}{%- endcapture -%}
{%- capture formatted_max_price -%}{{ product.price_max | money_without_trailing_zeros }}{%- endcapture -%}
<span class="ProductItem__Price Price Text--subdued">{{ 'collection.product.from_price_html' | t: min_price: formatted_min_price, max_price: formatted_max_price }}</span>
{%- else -%}
<span class="ProductItem__Price Price Text--subdued">{{ product.price | money_without_trailing_zeros }}</span>
{%- endif -%}
</div>
{%- if product.selected_or_first_available_variant.unit_price_measurement -%}
<div class="ProductItem__UnitPriceMeasurement">
<div class="UnitPriceMeasurement Heading Text--subdued">
<span class="UnitPriceMeasurement__Price">{{ product.selected_or_first_available_variant.unit_price | money_without_trailing_zeros }}</span>
<span class="UnitPriceMeasurement__Separator">/ </span>
{%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
<span class="UnitPriceMeasurement__ReferenceValue">{{ product.selected_or_first_available_variant.unit_price_measurement.reference_value }}</span>
{%- endif -%}
<span class="UnitPriceMeasurement__ReferenceUnit">{{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}</span>
</div>
</div>
{%- endif -%}
I tried to use the following code from the Shopify-Blog https://www.shopify.com/partners/blog/collection-page-price-range
{% if available %}
{% if product.price_varies and template == 'collection' %}
From {{ product.price_min | money }} to {{ product.price_max | money }}
{% else %}
{{ money_price }}
{% endif %}
{% else %}
{{ 'products.product.sold_out' | t }}
{% endif %}
This code however, displays the product as sold out.
It will be better if you set product_pricetocompare to the value of first variant.
This will check if there is a variant. If there is no variant, you will see 999999, which is not good.
example:
{% for variant in product.variants %}
{% if forloop.index == 1 %}
{% assign product_pricetocompare = variant.price %}
{% else %}
{% if variant.available %}
{% if variant.price < product_pricetocompare %}
{% assign product_pricetocompare = variant.price %}
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
Okay I found the answer, maybe it helps someone else as well. Loop through the variants and check if the variant is available and save the lowest price:
{% assign product_pricetocompare = 999999 %}
{% for variant in product.variants %}
{% if variant.available %}
{% if variant.price < product_pricetocompare %}
{% assign product_pricetocompare = variant.price %}
{% endif %}
{% endif %}
{% endfor %}

Shopify for loop of all_tags numbers not showing ascending order? How print

I have a problem to print all_tags numbers in ascending order? For example
Currently Loop print:
11
14
15
18
20
22
24
27
40
42
44
9
Need this:
9
11
14
15
18
20
22
24
27
40
42
44
Here is a code:
<ul class="collection__filter-checkbox-list wattagess">
{% for tag in collection.all_tags %}
{% if tag contains 'Watts-' %}
<div class="wattage-tag-div"> <h4 class="wattage-tag">Wattage</h4> </div>
{% assign tagName = tag | remove: 'Watts-' | strip | remove: 'W' %}
{% if current_tags contains tag %}
{{ tagName | handle }}
<li class="collection__filter-checkbox">
<div class="checkbox-wrapper">
<input type="radio" class="checkbox" id="{{ link_id }}-tag-{{ tag | handle }}" name="tag-filter" data-action="toggle-tag" data-tag="{{ tag | handle }}" {% if current_tags contains tag %}checked="checked"{% endif %}>
{% render 'icon', icon: 'check' %}
</div>
<label for="{{ link_id }}-tag-{{ tagName | handle }}">{{ tagName }}</label>
</li>
{% else %}
<li class="collection__filter-checkbox">
<div class="checkbox-wrapper">
<input type="radio" class="checkbox" id="{{ link_id }}-tag-{{ tag | handle }}" name="tag-filter" data-action="toggle-tag" data-tag="{{ tag | handle }}" {% if current_tags contains tag %}checked="checked"{% endif %}>
{% render 'icon', icon: 'check' %}
</div>
<label for="{{ link_id }}-tag-{{ tagName | handle }}">{{ tagName }}</label>
</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
Try this:
{%- assign maxDigits = 0 -%}
{%- for tag in collection.all_tags -%}
{%- assign watts = tag | remove: "Watts-" | remove: "W" -%}
{%- if watts.size > maxDigits -%}
{%- assign maxDigits = watts.size -%}
{%- endif -%}
{%- assign all_tags = all_tags | append: "," | append: watts -%}
{%- endfor -%}
{%- assign all_tags = all_tags | remove_first: "," | split: "," -%}
{%- assign zeroPaddedTags = "" -%}
{%- for tag in all_tags -%}
{%- assign zerosToAdd = maxDigits | minus: tag.size -%}
{%- capture zeroPaddedTags -%}{{ zeroPaddedTags }},{%- for i in (1..zerosToAdd) -%}0{%- endfor -%}{{ tag }}{%- endcapture -%}
{%- endfor -%}
{%- assign sortedTags = zeroPaddedTags | remove_first: "," | split: "," | sort -%}
{%- for t in sortedTags -%}
{%- assign tag = t -%}
{%- assign tagChars = tag | split: "" -%}
{%- for char in tagChars -%}
{%- if char == "0" -%}
{%- assign tag = tag | remove_first: "0" -%}
{%- continue -%}
{%- endif -%}
{%- break -%}
{%- endfor -%}
{{- tag -}}<br>
{%- endfor -%}

Adding custom data in shopify order confirmation

I'm currently trying to find away to pass some custom data to each one of my shopify order confirmations. Specifically I need to pass a custom URL that will be displayed in the order confirmation email. According to the shopify documentation I can receive a property from a product and pass it to my confirmation form like so.
{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
{% for p in item.properties %}
{% assign first_character_in_key = p.first | truncate: 1, '' %}
{% unless p.last == blank or first_character_in_key == '_' %}
{{ p.first }}:
{% if p.last contains '/uploads/' %}
<a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
<br>
{% endunless %}
{% endfor %}
{% endif %}
Using this I figure I can pass a custom url by doing something like this:
mycustomurl.com/linepropertyitem
My problem is that each line property includes the tittle of the line property item and the input value. So my url using this method would be
mycustomurl.com/linepropertyitem = linepropertyitemtext
Any ideas or pointers how this can be done?
which wouldn't work in a URL.
You could do it like this:
{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
{% for p in item.properties %}
{% assign first_character_in_key = p.first | truncate: 1, '' %}
{% unless p.last == blank or first_character_in_key == '_' %}
{% if p.last contains '/uploads/' %}
<a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.first }}:
{{ p.last }}
{% endif %}
<br>
{% endunless %}
{% endfor %}
{% endif %}
But the best thing you could do would be to analyze the code from Shopify and understand what is going on. That way you'll be able to do a lot more on your own.

Only displaying available options on shopify

In Snippets/product-form.liquid there's a block of code:
<div class="swatch_options">
{% for option in product.options %}
{% include 'product-swatch' with option %}
{% endfor %}
</div>
This is displaying options for products with X's over the unavailable swatches:
<div data-value="option name" class="swatch-element color optionName-swatch available soldout">
<div class="tooltip">Option Name</div>
<label for="optionName">
<span class="crossed-out"></span>
</label>
</div>
When those non-compatible variants are clicked, a large "UNAVAILABLE" message is displayed:
<p class="modal_price" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="USD">
<meta itemprop="seller" content="site">
<link itemprop="availability" href="http://schema.org/InStock">
<meta itemprop="itemCondition" content="New">
<span class="sold_out">Unavailable</span>
<span itemprop="price" content="10.00" class="">
<span class="current_price "></span>
</span>
<span class="was_price"></span>
<span class="sale savings"></span>
</p>
I've tried checking for variant.available, product.variants.first.available, and variant.inventory_quantity > 0 before {% include 'product-swatch' with option %}, without success.
How do I hide the non-compatible variants?
Edit: Here's what's currently inside of product-swatch.liquid:
{% comment %}
Set the extension of your color files below. Use 'png', 'jpeg', 'jpg' or 'gif'.
{% endcomment %}
{% assign file_extension = 'png' %}
{% assign swatch = product-swatch %}
{% assign found_option = false %}
{% assign is_color = false %}
{% assign option_index = 0 %}
{% for option in product.options %}
{% if option == swatch %}
{% assign found_option = true %}
{% assign option_index = forloop.index0 %}
{% assign downcased_option = swatch | downcase %}
{% if downcased_option contains 'color' or downcased_option contains 'colour' %}
{% assign is_color = true %}
{% endif %}
{% endif %}
{% endfor %}
<div class="swatch clearfix" data-option-index="{{ option_index }}">
<div class="option_title">{{ swatch }}</div>
{% assign values = '' %}
{% for variant in product.variants %}
{% if variant.available %}
{% assign value = variant.options[option_index] %}
{% unless values contains value %}
{% assign values = values | join: ',' %}
{% assign values = values | append: ',' | append: value %}
{% assign values = values | split: ',' %}
<input id="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if forloop.first %} checked{% endif %} />
<div data-value="{{ value | escape }}" class="swatch-element {% if is_color %}color {% endif %}{{ value | handle }}-swatch {% if variant.available %}available{% else %}soldout{% endif %}">
{% if is_color %}
<div class="tooltip">{{ value }}</div>
{% endif %}
{% if is_color %}
<label for="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}" style="background-image: url({{ value | handle | append: '.' | append: file_extension | asset_img_url: '50x' }}); background-color: {{ value | split: ' ' | last | handle }};">
<span class="crossed-out"></span>
</label>
{% else %}
<label for="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}">
{{ value }}
<span class="crossed-out"></span>
</label>
{% endif %}
</div>
{% endunless %}
{% endif %}
{% endfor %}
</div>
It seems you're looking for the Linked Options functionality.
Have a look at this doc:
https://help.shopify.com/themes/customization/navigation/link-product-options-in-menus
The code is hosted on GitHub:
https://gist.github.com/carolineschnapp/1083007
It's adjusted to work with swatches as well (I suppose you're using the default implementation).
Edit your product-swatch.liquid file under "snippets" folder.
Find {% for variant in product.variants %} and Put {% if variant.available %} right after it.
Find {% endfor %} and Put {% endif %} right before it.
If its not working, share the codes of product-swatch.liquid with us.

Shopify Products count

im currently face this problem where by tag count show current view count which is corrent.
IMG
but when i click to individual tag, the number will add up together.
IMG
{% for tag in collection.all_tags %}
{% assign products_count = 0 %}
{% for product in collection.products %}
{% if product.tags contains tag %}
{% assign products_count = products_count | plus: 1 %}
{% endif %}
{% endfor %}
{% assign is_advanced_tag = false %}
{% assign cat = tag | split: '_' | first %}
{% unless cat == tag %}
{% if cat_array contains cat %}
{% assign is_advanced_tag = true %}
{% if current_tags contains tag %}
<li class="active-filter ">{{ tag | remove_first: cat | remove_first: '_' }}</li>
{% else %}
<li>{{ tag | remove_first: cat | remove_first: '_' | link_to_tag: tag }}</li>
{% endif %}
{% endif %}
{% endunless %}
{% if is_advanced_tag == false %}
{% if current_tags contains tag %}
<li class="active-filter ">
{{ tag }}({{ collection.products_count }})
</li>
{% else %}
<li>{{ tag | link_to_tag: tag }} ({{ collection.products_count }})</li>
{% endif %}
{% endif %}
{% endfor %}
is there any where to show the non current view of product count. thanks