I am facing a strange problem. As per shopify documentation, != is not equal to. However when I use it, the IDE is not recognizing it. Below is two screenshots. In one when I replace != with == the variable following the == gets highlighted. When I replace it with != the variable is not getting highlighted and the logic is failing too. How do I correct it.
The line I am referring in each image is if tag != 'sweets' or …:
Edited
{% if collection.all_tags.size > 0 %}
<div class="form-horizontal">
<label for="BrowseBy">{{ 'collections.sorting.city' | t }}</label>
{% comment %}Good for /collections/all collection and regular collections{% endcomment %}
{% if collection.handle %}
{% capture collection_url %}/collections/{{ collection.handle }}{% unless collection.sort_by == blank %}?sort_by={{ collection.sort_by }}{% endunless %}{% endcapture %}
{% comment %}Good for automatic type collections{% endcomment %}
{% elsif collection.current_type %}
{% assign collection_url = collection.current_type | url_for_type | sort_by: collection.sort_by %}
{% comment %}Good for automatic vendor collections{% endcomment %}
{% elsif collection.current_vendor %}
{% assign collection_url = collection.current_vendor | url_for_vendor | sort_by: collection.sort_by %}
{% endif %}
<select name="BrowseBy" id="BrowseBy" class="btn--tertiary">
<option value="{{ collection_url }}">{{ 'collections.sorting.all_tags' | t }}</option>
{% for tag in collection.all_tags %}
{% if tag == 'jamshedpur' or tag == 'ranchi' %}
{% capture new_url %}{{ tag | link_to_tag: tag | split: 'href="' | last | split: '"' | first }}{% endcapture %}
<option{% if current_tags contains tag %} selected{% endif %} value="{{ new_url }}">{{ tag }}</option>
{% endif %}
{% endfor %}
</select>
<label for="BrowseBy">{{ 'collections.sorting.category' | t }}</label>
<select name="BrowseBy" id="BrowseBy" class="btn--tertiary">
<option value="{{ collection_url }}">{{ 'collections.sorting.all_tags' | t }}</option>
{% for tag in collection.all_tags %}
{% if tag == 'sweets' or tag == 'cake' or tag == 'savories' %}
{% capture new_url %}{{ tag | link_to_tag: tag | split: 'href="' | last | split: '"' | first }}{% endcapture %}
<option{% if current_tags contains tag %} selected{% endif %} value="{{ new_url }}">{{ tag }}</option>
{% endif %}
{% endfor %}
</select>
<label for="BrowseBy">{{ 'collections.sorting.shop' | t }}</label>
<select name="BrowseBy" id="BrowseBy" class="btn--tertiary">
<option value="{{ collection_url }}">{{ 'collections.sorting.all_tags' | t }}</option>
{% for tag in collection.all_tags %}
{% if tag != 'sweets' or tag != 'cake' or tag != 'savories' or tag != 'jamshedpur' or tag != 'ranchi' %}
{% capture new_url %}{{ tag | link_to_tag: tag | split: 'href="' | last | split: '"' | first }}{% endcapture %}
<option{% if current_tags contains tag %} selected{% endif %} value="{{ new_url }}">{{ tag }}</option>
{% endif %}
{% endfor %}
</select>
</div>
{% endif %}
<script>
$(function() {
$('#BrowseBy')
.bind('change', function() {
location.href = jQuery(this).val();
}
);
});
</script>
Related
First time using Liquid.. I am an old-time Vbasic programmer.
I had added some customization to our Shopify Store. I have worked out the basic details for the mechanics of the code and have it working, but I would like the items to be properly capitalized when it creates the dropbox.
{% if section.settings.show_collection_tags and section.settings.collection_tags == 'dropdown' %}
{% if collection.url.size == 0 %}
{% assign collection_url = routes.all_products_collection_url %}
{% else %}
{% assign collection_url = collection.url %}
{% endif %}
{% assign has_tags = false %}
{% capture tags_html %}
<span class="tags filter">
<label for="filter-by">{{ 'collections.general.filter_by' | t }}:</label>
<select id="filter-by" class="redirect">
<option value="{{ collection_url }}">{{ 'collections.general.all_items' | t }}</option>
{% for tag in collection.all_tags %}
{% unless BadTags contains tag %}
<option value="{{ collection_url }}/{{ tag | handle }}" {% if current_tags contains tag %}selected="selected"{% endif %}>{{ tag }}</option>
{% assign has_tags = true %}
{% endunless %}
{% endfor %}
</select>
</span>
{% endcapture %}{% if has_tags %}{{ tags_html }}{% endif %}
{% endif %}
I tried using | Capitalize following {{{ tag | handle but that didn't work.
Where am I going wrong?
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 %}
Trying to pull images into a into a wrapper after assigning a specific collection but my images are all returning - //cdn.shopify.com/s/assets/no-image
<div id="NewColorOptions" class="color-select">
{% assign color_options = '' %}
{% for collection in collections %}
{% if product.handle contains collection.handle %}
{% assign collection = collection.handle %}
{% for p in collection.products %}
{% assign p_handle = '--' | append: p.handle | append: '--' %}
{% if color_options contains p_handle %}
{% comment %} Probably Duplicates {% endcomment %}
{% else %}
{% assign color_options = color_options | append: p_handle %}
{% assign product_text = p.title | handleize | remove : collection.handle | replace : '-', ' ' %}
<a href="{{ p.url }}" datattitle="{{ product_text | textilize | upcase }}" {% if p.url contains product.handle %}class="ActiveThumb"{%endif%}>
<img {% if forloop.first == true %} class="imgOne" {% endif %} src="{{ image.src | product_img_url: 'compact' }}">
</a>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
I assume my error is within my <img> tag but I'm not sure why that would be breaking.
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.
I wonder if is it possible to remove specific product option dropdown and display it inside a <p> tag or just a normal string? Imagine I have 3 product options:
Color
Size
Type
We all know that all those options will be displayed inside a dropdown menu. What about like I wanted to display the Size option as a normal string or text? How can we do that?
Here's an image to make it clearer.
product.liquid
<select name="id" id="ProductSelect" class="product-single__variants">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }} </option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
I just found the answer for this. I'll post it in here to help others with the same problem as I have.
In product.liquid:
<!-- product options -->
{% capture option_titles %}Size,Flavor{% endcapture %}
{% assign option_titles = option_titles | split:',' %}
{% for option in product.options %}
{% if option_titles contains option %}
{% capture option_index %}option{{ forloop.index }}{% endcapture %}
{% assign option_values = product.variants | map: option_index | uniq %}
{% if option == 'Flavor' and option_values.size > 1 %}
<label for="option">{{ option }}</label>
{{ option_values | join:', ' }}
{% elsif option_values.size == 1 %}
<label for="option">{{ option }}</label>
{{ option_values }}
{% endif %}
{% endif %}
{% endfor %}
<!-- end product options --->
You have to modify product.liquid template and instead of that drop down you have to create that as a LI or Text the you are set for that . 😃