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?
Related
{% for option in product.options_with_values %}
<select class="option-selector {{option.name}}" data-var="{{forloop.index}}">
{% if product.available %}
{% for values in option.values %}
<option value="{{values}}">{{values}}</option>
{% endfor %}
{% endif %}
</select>
{% endfor %}
this is the code i want to put titles before the swatches options like
size color
According to documentation, you can you the same like this:
{% for product_option in product.options_with_values %}
<label>
{{ product_option.name }}
<select>
{% for value in product_option.values %}
<option {% if product_option.selected_value == value %}selected{% endif %}>
{{ value }}
</option>
{% endfor %}
</select>
</label>
{% endfor %}
Documentation Link
I need to fetch all the tags on my collection page and display it within tag link.
I use this below code :
{% assign collection = collections.all %}
{% paginate collection.products by 1000 %}
<h3>All Tags</h3>
<div id="tags">
{% if collection.tags.size == 0 %}
No tags found.{% else %}
{% for tag in collection.tags %}
<a href="{{ collection.url }}/{{ tag | handle }}">
{{ tag }}
</a>
{% unless forloop.last %}, {% endunless %}
{% endfor %}
{% endif %}
</div>
{% endpaginate %}
Please help me to solve my problem.
I think you need to use a built-in solution rather than paginate
use like it
<h3>All Tags</h3>
<div id="tags">
{% if collection.all_tags.size == 0 %}
No tags found.
{% else %}
{% for tag in collection.all_tags %}
{{ tag | link_to_tag: tag }}
{% unless forloop.last %}, {% endunless %}
{% endfor %}
{% endif %}
</div>
please replace below code :
{{ tag }}
To this :
{{ tag | link_to_tag: tag }}
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 . 😃
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>