I'm having trouble hiding a sold out variant in the search filter result.
Like in this picture, that is the result from clicking size-42 in the drop down. Now the issue is, that first item "eleven" is not available in size 42. It is, although, available in another size. So it shouldn't appear here.
Here's my select code that populates my dropdown
<select class="filters-toolbar__input hidden" name="FilterTags" id="FilterTags" aria-describedby="a11y-refresh-page-message a11y-selection-message">
{% if current_tags %}
{% if collection.handle %}
<option value="/collections/{{ collection.handle }}">{{ 'collections.filters.all_tags' | t }}</option>
{% elsif collection.current_type %}
<option value="{{ collection.current_type | url_for_type }}">{{ 'collections.filters.all_tags' | t }}</option>
{% elsif collection.current_vendor %}
<option value="{{ collection.current_vendor | url_for_vendor }}">{{ 'collections.filters.all_tags' | t }}</option>
{% endif %}
{% else %}
<option value="">{{ 'collections.filters.all_tags' | t }}</option>
{% endif %}
{% for tag in collection.all_tags %}
<option value="/collections/{% if collection.handle != blank %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handleize }}"{% if current_tags contains tag %} selected="selected"{% endif %}>{{ tag }}</option>
{% endfor %}
</select>
Any help please?
You can use the where filter to remove unavailable products or variants: https://shopify.dev/api/liquid/filters#where
Related
I have edited my store to have an add to cart button and variant selector in the collection page and it's working. But my boss want another change, how can I change the dropdown list to button selector?
My code form
{% unless sold_out %}
<form action="/cart/add" method="post" enctype="multipart/form-data" id="product-form-{{ product.id }}" class="product-form">
<div class="add-to-cart__wrapper" style="margin-top:0px; margin-bottom: 10px;">
<button type="submit" name="add" class="btn btn--splash btn--full uppercase addToCart">
<span id="AddToCartText">Add to Order</span>
</button>
</div>
{% if product.variants.size == 1 %}
<input type="hidden" id="variant-select" name="id" value="{{ product.variants.first.id }}" />
{% else %}
<div class="selector-wrapper">
<select name="id" id="productSelect" class="product-single__variants btn--full uppercase">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }}</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
</div>
{% endif %}
</form>
{% endunless %}
Please advise.
Thank you!
You could change the select element to a radio button element and style the radios as regular buttons. This pattern is fairly common, you just need to make sure your event listener target for the variant selection is the same as you have now.
How to save current appended fillter to collecttions page to display it current state
like what i selected
so i have 4 filters
date sort, brand, category and a price range
so all of these filters is displayed in adress bar
and i need to save information about selected option so i can display what is currently selected on page
how to do it?
here is example of 2 filters:
<select
name="brands"
id="brands"
onchange="FILTER.searchParams(event, 'filter.p.vendor')"
>
<option value="{{ collection.url }}">ALL</option>
{% for product_vendor in collection.all_vendors %}
<option {% if option.vendor == product_vendor %} selected="selected" {% endif %} >{{ product_vendor }}</option>
{% endfor %}
</select>
<select
name="category"
id="category"
onchange="FILTER.changePath(event)"
>
<option value="{{ collection.url }}">ALL</option>
{% for collection in collections %}
<option value="{{ collection.url }}">
{{ collection.title }}
</option>
{% endfor %}
</select>
I'm trying to have multiple tag selector that you can filter if is round and red at the same time, but only one filter selector works. Anyone knows how can I do it ??
<label>Shop by color</label>
<select name="SortTags" id="SortTags" >
{% assign tags = 'Red, Green, Blue' | split: ',' %}
<option value="/collections/{{ collection.handle }}">All</option>
{% for t in tags %}
{% assign tag = t | strip %}
{% if current_tags contains tag %}
<option value="{{ tag | handle }}" selected>{{ tag }}</option>
{% elsif collection.all_tags contains tag %}
<option value="/collections/{{ collection.handle }} / {{ tag | handle }}">{{ tag }}</option>
{%endif%}
{%endfor%}
</select>
<label>Shop by size</label>
<select name="SortTags" id="SortTags" >
{% assign tags = 'Round, square, geometric' | split: ',' %}
<option value="/collections/{{ collection.handle }}">All</option>
{% for t in tags %}
{% assign tag = t | strip %}
{% if current_tags contains tag %}
<option value="{{ tag | handle }}" selected>{{ tag }}</option>
{% elsif collection.all_tags contains tag %}
<option value="/collections/{{ collection.handle }} / {{ tag | handle }}">{{ tag }}</option>
{% endif %}
{% endfor %}
</select>
<label>Shop by material</label>
<select name="SortTags" id="SortTags" >
{% assign tags = 'White, leopard, Satin' | split: ',' %}
<option value="/collections/{{ collection.handle }}">All</option>
{% for t in tags %}
{% assign tag = t | strip %}
{% if current_tags contains tag %}
<option value="{{ tag | handle }}" selected>{{ tag }}</option>
{% elsif collection.all_tags contains tag %}
<option value="/collections/{{ collection.handle }} / {{ tag | handle }}">{{ tag }}</option>
{% endif %}
{% endfor %}
</select>
Thanks for all.
Currently I am trying to show/hide an inline element on the page when a specific variant of the product is selected in a <select> input. I've tried multiple tries with jquery to access the select with no luck and even tried inline <% if %> liquid tag. Any help would be greatly appreciated!
Basically I want a textbox to show when two of the options are selected else not show the textbox.
Below is what I have:
{% if product.variants.size > 1 %}
<div id="product-variants" class="card_options">
<select id="product-select-{{ product.id }}" name="id" class="hidden line-item-property__field">
{% for variant in product.variants %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}
</select>
</div>
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" />
{% endif %}
Now if only I could add something like below to add the textbox when option1 or option2 are selected.
<-- Same as above -->
{% if product.variants.size > 1 %}
<div id="product-variants" class="card_options">
<select id="product-select-{{ product.id }}" name="id" class="hidden line-item-property__field">
{% for variant in product.variants %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}
</select>
</div>
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" />
{% endif %}
<-- End Same as above -->
<-- New Code -->
{% if variant != option1 %}
<p class="line-item-property__field" id=card_message>
<label for="card-message">Card Message:</label>
<span id="char-counter"></span><span id="message-alert"></span>
<textarea id="message-textarea" maxlength="250" name="properties[Card Message]"></textarea>
</p>
{% else %}
<span id="placeholder"></span>
{% endif %}
This is what it should look like:
UPDATE: Apparently my solution with jQuery worked. I was just targeting the wrong select on the page. I had to retrieve the select dynamically instead of finding it by class or id. For some reason Shopify creates a second <select> input and hides the one you see in products.liquid document. So I had to resort to using $(".selector-wrapper select").bind('change', function(event) {//do something} and var selected = $('.selector-wrapper select option:selected').val(); to retrieve the values of the options. I'll link a fiddle I created with the same logic, you will just have to update it with what I listed above. Hope this helps anyone looking for same solution.
Fiddle Demo
With Shopify I am trying to alter my product template to display a dropdown select list instead of radio buttons for my product variants. I managed to do this but when you try and add a product to the cart from the list it says, "No variant ID was passed."
Here is the code for their radio buttons:
<ul id="product-variants">
{% for variant in product.variants %}
<li>
{% if variant.available %}
<input type="radio" name="id" value="{{variant.id}}" id="radio_{{variant.id}}" style="vertical-align: middle;" {%if forloop.first%} checked="checked" {%endif%} />
<label for="radio_{{variant.id}}"><span class="sku">{{ variant.sku }}</span> {%if variant.title != 'Default' %}{{ variant.title }} for {%endif%} <span class="price">{{ variant.price | money_with_currency }}</span></label>
{% else %}
<del style="margin-left: 26px">{{ variant.title }}</del> <span>Sold Out!</span>
{% endif %}
</li>
{% endfor %}
</ul>
Here is the code for my dropdown select at this point:
<select id="product-variants">
{% for variant in product.variants %}
<li>
{% if variant.available %}
<option value="{{variant.id}}" selected="selected"><span class="sku">{{ variant.sku }}</span> {%if variant.title != 'Default' %}{{ variant.title }} for {%endif%} <span class="price">{{ variant.price | money_with_currency }}</span></option>
{% else %}
<del style="margin-left: 26px">{{ variant.title }}</del> <span>Sold Out!</span>
{% endif %}
</li>
{% endfor %}
</select>
Thanks,
Wade
https://help.shopify.com/themes/development/templates/product-liquid
This wiki had the answer to my question.