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.
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.
I need help please with showing the tags filter only if the current tags are more than 1,
Currently my filter shows even in the case on a single tag. I tried the following but couldn't find the exact liquid syntax:
<dd>
<ol>
{% for t in tags %}
{% assign tag = t | strip %}
{% assign tag_value = tag | handleize %}
{% if current_tags contains tag %}
{% if current_tags > 1 %}
<li>
<input type="checkbox" value="{{ tag_value }}" checked/>
<label>{{ tag }}</label>
</li>
{% else %}
{% if collection.tags contains tag %}
<li>
<input type="checkbox" value="{{ tag_value }}"/>
<label>{{ tag }}</label>
</li>
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
</ol>
</dd>
Thanks in advance
You can use this if condition to check current tags are more than 1
{% if current_tags.size > 1 %}
{% endif %}
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
When I compare in if the post.category is as if there was a post that is the variable is more when I put {{post.category}} it prints the name. It's like if he did not exist in most if I put in if site.post.category handle all values. The problem is that I want to get the current post to compare if that category. I want to list the posts by category.
<div class="posts">
{% for post in site.posts %}
{% if post.category == Eventos %}
<hr>
<div class="post">
<h1 class="post-title">
<a href="{{ site.url }}{{post.url}}">
{{ post.title }}
</a>
</h1>
<span class="post-date">{{ post.date | date_to_string }} / {{ post.category }}</span> {{ post.excerpt }}
<h6>Leia mais...</h6>
</div>
{% endif %}
{% endfor %}
</div>
Try with categories !
{% if post.categories | contains: 'Eventos' %}
I'm trying to make only the available product variants visible in drop downs for products like this one. For example, say you choose 2012 in the first drop down, it would only show the available choices in the second. If you then chose Wed 25th July in the second, it would only show the available variants in the third. At the minute it shows all choices and states 'We don't offer the product in this combination' for an unavailable choice.
So far, my product.liquid page has this code:
<div class="col-7 product-description clearfix">
<h1>{{ product.title }}</h1>
{{ product.description }}
{% include 'addthis' %}
<br/><br/>
{% if product.available %}
{% if product.variants.size > 1 %}
<!-- If the product only has MULTIPLE OPTIONS -->
<form action="/cart/add" method="post" class="product-variants">
<div id="options">
<select id="product-select" name='id'>
{% for variant in product.variants %}
<option value="{{ variant.id }}">{{ variant.title }}</option>
{% endfor %}
</select>
<div class="select-wrapper">
<label for="region">DVD Region</label>
<select id="color" required>
<option value="NTSC">NTSC</option>
<option value="PAL/SECAM" selected="selected">PAL/SECAM</option>
</select>
</div>
<p>Click Here find out more about your region.</p>
</div> <!-- options -->
<div class="price-field"></div>
<input type="submit" name="add" value="Add to cart" id="purchase" />
</form>
{% else %}
<!-- If the product only has ONE variant -->
<form action="/cart/add" method="post" class="product-variants">
<div class="price-field"> {{ product.price | money }}</div>
<input type="submit" name="add" value="Add to cart" id="purchase" />
<input type="hidden" id="{{ variant.id }}" name="id" value="{{ product.variants[0].id }}" /> <!-- passes variant id -->
</form>
{% endif %}
{% else %}
<p>This product is not available</p>
{% endif %}
</div><!-- .col-7 -->
<div class="col-5 last product-thumbs">
<ul>
{% for image in product.images %}
{% if forloop.first %}
<li class="featured-image" >
<a class="zoom " href="{{ image | product_img_url: 'large' }}" title="{{ product.featured_image.alt | escape }}">
<img src="{{ image | product_img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}" />
</a>
</li>
{% else %}
<li>
<a class="zoom" href="{{ image | product_img_url: 'large' }}" title="{{ image.alt | esacpe }}">
<img class="" src="{{ image | product_img_url: 'small' }}" alt="{{ image.alt | escape }}" />
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div><!-- .col-5 -->
<script type="text/javascript">
// <![CDATA[
var selectCallback = function(variant, selector) {
if (variant && variant.available == true) {
// selected a valid variant
jQuery('#purchase').removeClass('disabled').removeAttr('disabled'); // remove unavailable class from add-to-cart button, and re-enable button
jQuery('#purchase').fadeIn();
jQuery('.price-field').html(Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}")); // update price field
} else {
// variant doesn't exist
jQuery('#purchase').addClass('disabled').attr('disabled', 'disabled'); // set add-to-cart button to unavailable class and disable button
jQuery('#purchase').fadeOut();
var message = variant ? "Sold Out" : "We don't offer the product in this combination";
jQuery('.price-field').text(message); // update price-field message
}
};
// initialize multi selector for product
jQuery(document).ready(function() {
new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback });
{% assign found_one_in_stock = false %}
{% for variant in product.variants %}
{% if variant.available and found_one_in_stock == false %}
{% assign found_one_in_stock = true %}
{% for option in product.options %}
jQuery('.single-option-selector:eq(' + {{ forloop.index0 }} + ')').val({{ variant.options[forloop.index0] | json }}).trigger('change');
{% endfor %}
{% endif %}
{% endfor %}
$('#options div').addClass("selector-wrapper");
{% if product.options.size == 1 %}
$(".selector-wrapper").append("<label>{{ product.options.first }}</label>");
{% endif %}
});
// ]]>
</script>
Any help?