Develop Reference

Shopify show stock when quantity is lower than 2

I have built this code snippet for my shopify store to display more information in the dropdown field. With the change, the status is now also displayed next to the size selection. Available or Sold Out. Unfortunately I can't get it solved that if the stock quantity on a variant is less than 2, that the system then displays the text. Only 1 available.
<select id="product-select-{{ product.id }}" name="id" class="main_select">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} <span>Verfügbar: {{ variant.inventory_quantity}}</span></option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
Current

You should be able to add another if statement within the option itself, like this:
<select id="product-select-{{ product.id }}" name="id" class="main_select">
{% for variant in product.variants %}
{% if variant.available %}
<option
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
value="{{ variant.id }}"
>
{{ variant.title }} <span>Verfügbar {% if variant.inventory_quantity < 2 %}: ONLY 1 AVAILABLE{% endif %}</span>
</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>

Not able to figure out how to work with product size in django ecommerce website as select box for different products have same id

This is my html:
{% if product.id in list_cart %}
<div class="btn-group" style="display: none;">
<select class="selection-2 border" data-product={{product.id}} style="border: cadetblue;"
name="size" required id="sizebox">
{% for t in product.size.all %}
<option value="{{t}}" id="{{t}}">{{t}}</option>
{% endfor %}
</select>
</div>
{% else %}
<div class="btn-group">
<select class="selection-2 border" data-product={{product.id}} style="border: cadetblue;"
name="size" required id="sizebox">
{% for t in product.size.all %}
<option value="{{t}}" id="{{t}}">{{t}}</option>
{% endfor %}
</select>
</div>
{% endif %}
And this is my javascript:
var updateBtns = document.getElementsByClassName('update-cart')
for (i=0;i<updateBtns.length;i++){
updateBtns[i].addEventListener('click',function(){
var productId=this.dataset.product
var action=this.dataset.action
var sizebox = document.getElementById("sizebox");
var size = sizebox.options[sizebox.selectedIndex].value;
console.log(size)
updateUserOrder(productId, action, size)
})
}
I am working on a basic django ecom. website. I have come across a problem which I am not able to solve. The problem is that on the products page of my website every product has a select box for size of the item and every select box has the same id (As i am iterating over the products). So whenever I choose a size for any product other than the first product the size selected from the first select box under first product goes to my database instead of the size selected under that product.
I want to figure out a way so that the size from the select box under a product is sent to the database instead of the size from first select box with id selectbox which is currently happening. Please help. Thanks.

Try using loop counter and generate different id for select field,
use loop.index to generate value or use custom counter like
counter = 0
{%for ...%}
<option value="{{t}}" id="{{t+counter}}">{{t}}</option>
counter++
{%endfor%}
Or by using loop.index here's your code
{% if product.id in list_cart %}
<div class="btn-group" style="display: none;">
<select class="selection-2 border" data-product={{product.id}} style="border: cadetblue;"
name="size" required id="sizebox">
{% for t in product.size.all %}
<option value="{{t}}" id="{{t+loop.index}}">{{t}}</option>
{% endfor %}
</select>
</div>
{% else %}
<div class="btn-group">
<select class="selection-2 border" data-product={{product.id}} style="border: cadetblue;"
name="size" required id="sizebox">
{% for t in product.size.all %}
<option value="{{t}}" id="{{t+loop.index}}">{{t}}</option>
{% endfor %}
</select>
</div>
{% endif %}

How can I do to remove the circle?

Hello I have this select but I got an error with that :
Here is my code :
<label for="id_user">{% 'User' %}
<select name="user" id="id_user" class="form-control user"
data-live-search="true" data-width="100%"
ng-change="user()" ng-init="user()"
ng-model="user">
<option value=""></option>
{% for user in users %}
<option data-content="{{ user.displayname }}" value="{{ user.uniqueid }}">
{{ user.displayname }}</option>
{% endfor %}
</select>
</label>
Actually I got this :
My problem
I don't know why I got two circles like this...
Anyone can help me please ?
Thank you very much !

Try to remove this line:
<option value=""></option>

Django. How to make a condition for hide/show fields in the form so that it depends on the backend?

I want to make a condition under which it will not be necessary to change the code if the data in the database has been deleted. Now I have a simple condition:
$('#category_id').change(function () {
var optionSelected = $("option:selected", this);
var valueSelected = $(this).val();
if (valueSelected === '1') {
$('#rooms_id').hide();
$('#series_id').hide();
} else if (valueSelected === '2') {
$('#rooms_id').hide();
$('#series_id').hide();
} else {
$('#rooms_id').show();
$('#series_id').show();
}
});
That is, when you select a specific category, unnecessary fields are hidden. But, if you delete the categories in the database, and the categoties is added again not in the order as they were before, the condition will stop working. Because select will be different.
<div class="col-md-3 mb-3">
<label class="sr-only">Categories</label>
<select name="category" class="form-control" id="category_id">
<option selected="true" disabled="disabled">Categories</option>
{% for category in categories %}
<option value="{{ category.pk }}">{{ category.name }}</option>
{% endfor %}
</select>
</div>
This fields must be hide:
<div class="col-md-6 mb-3">
<label class="sr-only">Комнаты</label>
<select name="rooms" class="form-control" id="rooms_id">
<option selected="true" disabled="disabled">Комнаты</option>
{% for key, value in room_choices.items %}
<option value="{{ key }}">{{ value }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-6 mb-3">
<label class="sr-only">Серия</label>
<select name="series" class="form-control" id="series_id">
<option selected="true" disabled="disabled">Серия</option>
{% for series in series %}
<option value="{{ series.pk }}">{{ series.name }}</option>
{% endfor %}
</select>
</div>
Now everything works only in this sequence, but if you add categories to the database in a different order, then nothing works, because this solution is not entirely correct. Pleace, help :)

Customizing Dropdown on Shopify Product Page (Single Variant)

Working with one variant in Shopify on the product page dropdown, and would like it grayed out when not available (sold out).
Here's the code I have so far: (for the entire page)
{% include 'buyx-product' with product %}
{% include 'buyx-price-min' with product %}
{% assign option_to_match = settings.option_to_match %}
{% assign option_index = 0 %}
{% for option in product.options %}
{% if option == option_to_match %}
{% assign option_index = forloop.index0 %}
{% endif %}
{% endfor %}
{% if buyx_product_available %}
<form action="/cart/add" method="post" class="clearfix product_form" data-money-format="{{ shop.money_format }}" data-option-index="{{ option_index }}" id="product-form-{{ product.id }}">
{% if product.options.size > 1 and (product.options[1] != "BuyXDiscount") %}
<div class="select">
<select id="product-select-{{ product.id }}" name='id'>
{% for variant in product.variants %}
{% unless variant.title contains '% Off' %}
<option value="{{ variant.id }}">{{ variant.title }}</option>
{% endunless %}
{% endfor %}
</select>
</div>
{% elsif buyx_select_one_option and (product.variants.size > 1 or product.options[0] != "Title" or product.options.first != 'BuyXDiscount') %}
<div class="select">
<label>{{ product.options[0] }}:</label>
<select id="product-select-{{ product.id }}" name='id'>
{% for variant in product.variants %}
{% unless variant.title contains '% Off' %}
<option value="{{ variant.id }}">{{ variant.title }}</option>
{% endunless %}
{% endfor %}
</select>
</div>
{% else %}
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
{% endif %}
{% include 'swatch' with 'Color' %}
{% if settings.display_product_quantity %}
<div class="left">
<label for="quantity">Quantity:</label>
<input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="1" />
</div>
{% endif %}
<div class="purchase clearfix {% if settings.display_product_quantity %}inline_purchase{% endif %}">
{% if settings.cart_return == 'back' %}
<input type="hidden" name="return_to" value="back" />
{% endif %}
<input type="submit" name="add" value="Add to Cart" class="action_button add_to_cart" />
</div>
<script data-product="{{ product | json | escape }}" id="out-of-stock" src="http://setup.shopapps.io/out-of-stock/script/nisolo.js"></script>
</form>
{% if buyx_product_variants_size > 1 %}
<script type="text/javascript">
// <![CDATA[
$(function() {
function buyx_product_json(product) {
var variants = []
//does it have BuyXDiscount option?
var option_position = -1
for (var oi = 0, olen = product.options.length; oi < olen; oi++) {
if (product.options[oi] == "BuyXDiscount") {
option_position = oi+1
break
}
}
if (option_position == -1) {
return product
}
if (product.options.length > 1) {
product.options.splice(option_position-1, 1)
} else {
product.options[0] = "Title"
}
option_position = "option" + option_position
product.available = false
for (var vi = 0, vlen = product.variants.length; vi < vlen; vi++) {
if (product.variants[vi][option_position] == "Default") {
product.variants[vi][option_position] = ""
variants.push(product.variants[vi])
product.available = product.available || product.variants[vi].available
}
}
product.variants = variants
return product
}
<strong>$product = $('#product-' + {{ product.id }});
// if($('.single-option-selector', $product).length == 0) {
new Shopify.OptionSelectors("product-select-{{ product.id }}", { product: buyx_product_json({{ product | json }}), onVariantSelected: selectCallback });
{% if product.available %}
{% assign found_one_in_stock = true %}
{% for variant in product.variants %}
{% if variant.available == false %}
jQuery('.single-option-selector option:eq({{ forloop.index0 }})').attr('disabled', 'disabled');
{% endif %}
{% endfor %}
{% endif %}</strong>
//}
});
// ]]>
</script>
{% endif %}
{% endif %}
Unfortunately, what's happening is that instead of the product with 0 inventory being grayed out, the product prior to the product with 0 inventory is being grayed out. For example, in the screenshot below, size 9.5 is the size with zero inventory, but size 9 is showing as grayed out.

When I say manually, I mean something like this...
<select>
{% for variant in product.variants %}
{% if variant.available %}
<option value="{{variant.id}}">{{variant.title}}</option>
{% else %}
<option value="{{variant.id}}" disabled>{{variant.title}}</option>
{% endif %}
{% endfor %}
</select>

Perhaps instead of using the for loop index, you could select the option with the corresponding variant title or id? Something like this:
{% unless variant.available %}
jQuery('.single-option-selector option[value="{{ variant.title }}"]').attr('disabled', 'disabled');
{% endunless %}
This answer might also be useful:
jQuery('.single-option-selector option:contains({{ variant.title | json }})')...
although option:contains may not work in your situation where you have sizes like 9 and 9.5.
EDIT:
From the link you provided, it looks like Size is option2, so try this:
jQuery('.single-option-selector option[value="{{ variant.option2 }}"]').attr('disabled', 'disabled');