how to increase, decrease input quantity in cart shopify liquid - html

i have following code:
<div class="quantity">
<input type="number" name="updates[]" id="updates_{{ item.key }}" value="{{ item.quantity }}" min="0">
</div>
which increases input field value, but not product quantity in cart, how to fix it?

Related

Value iteration in HTML

Description
I want to make this view work,
I'm using a loop for this table, I managed to do a loop for the input part of the id.
The input id has followed the increment according to the number of iterations
Problem
However, I also want variables like input id to apply in the value input.
Ex,
Iteration 1 > <input id="id-sensor-1" type="text" value="{{ variable-loopindex1 }}">
Iteration 2 > <input id="id-sensor-2" type="text" value="{{ variable-loopindex2 }}">
Iteration 3 > <input id="id-sensor-3" type="text" value="{{ variable-loopindex3 }}">
I'm using Python Flask and HTML Template. How do I get the conditions I want to work? Or is there any other solution? I'm at a loss to search for the keywords. Thanks
Store variables in an iterable object, such as variables:
{% for variable in variables %}
<input id="id-sensor-{{loop.index0}}" type="text" value="{{ variable }}">
{% endfor %}

shopify liquid add to cart button

I am new to shopify theme development and I'm building a theme from scratch to gain experience. I'm having trouble with the 'add to cart' button on my product page. Even though I have various product options for a product, I am only displaying the 'size' options as radio buttons and then I take an input quantity and add it to the cart. The problem I am facing right now, is that the cart only adds 1 item at a time, So even if I input 3 or 4 as my quantity, the cart only adds 1 as the quantity.
here's my code:
{% form 'product', product %}
<div>
<p class="option-title">Size</p>
<div class="line"></div>
<div class="options">
{% for product_option in product.options_by_name['Size'].values %}
<input type="radio" id = "{{ product_option }}" name="size" value="{{ product_option }}" >
<label for="{{ product_option }}">{{ product_option }}</label>
{% endfor %}
</div>
</div>
<div class="line"></div>
<div class="quantity-add">
<div class="input-quantity">
<input class="input-quantity" type="number" min="1" placeholder="1">
<input type="hidden" name="id" data-productid="{{ product.variants[0].id }}" value="{{ product.variants[0].id }}" data-variant-title="{{ product.variants[0].title }}" />
</div>
<div class="cart-button">
<button class="cart-btn" type="submit" value="Add To Cart">ADD</button>
</div>
</div>
{% endform %}
Any help will be much appreciated. I am so lost regarding how I should fix it.
It should work fine if you add the proper name and value attribute to your input element:
<input name="quantity" value="3">
This would add the selected variant ID three times to the cart.

how to name numerous dynamic input fields for post method - Django

In my online shop, I fetch all of the products and services from two different apps and list them for the user to make his wishlist.
Each product or service is displayed in a bootstrap card that contains an input field for the count of products.
#views.py
def my_products(request):
ip_sensor = Ip_sensor.objects.all().order_by('title')
control_valves = ControlValves.objects.all().order_by('title')
context = {
'ip_sensor': ip_sensor,
'control_valves': control_valves,
}
return render(request, 'users/basket/my_products.html', context)
then in the template, they are being displayed in this way:
<form method="post" id="add_to_wishlist" data-url="{% url 'my_products' %}">
{% csrf_token %}
{% if ip_sensor %}
{% for item in ip_sensor %}
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-12">
<p class="card-text text-center text-capitalize">{{ item.title }}</p>
</div>
<div class="col-12">
<div class="form-group">
<input type="hidden" name="tag" value="{{ item.type }}"> <!-- what to put in name field of this line -->
<input type="hidden" name="item_id" value="{{ item.id }}"> <!-- what to put in name field of this line -->
<label for="count" class="control-label">count</label>
<input type="text"
id="count"
name="count" <!-- what to put in name field of this line -->
placeholder="Count"
class="form-control"
autofocus/>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
{% endif %}
</form>
Question:
When I return the count of each product or service through a POST method back to my views.py to save to his wishlist, I don't know how to distinguish between the returned values??
Since items are being displayed in a for loop and I want to save each of the selected items separately in a WishListItem object (model), I need to name each card's input fields separately but I don't know how to do it.
I can save each item in this way:
if request.method == 'POST':
owner = request.user
count = request.POST.get('count')
tag = request.POST.get('tag')
object_id = request.POST.get('item_id')
wishlist = WishListItem(owner=owner,
content_type=class_types[tag],
object_id=object_id,
tag=tag,
count=count)
wishlist.save()
return redirect('my_products')
When there are multiple inputs with same name, request.POST has list of all those input element values. So, you can get all item ids using request.POST.getlist('item_id') and it will return list containing all ids. In your html you can name all other inputs using id as part of the name attribute, like this:
...
<input type="hidden" name="tag_{{ item.id }}" value="{{ item.type }}"> <!-- item id has become part of the input name -->
<input type="hidden" name="item_id" value="{{ item.id }}"> <!-- all item ids will be accessed as list in view -->
<label for="count" class="control-label">count</label>
<input type="text"
id="count"
name="count_{{ item.id }}" <!-- item id has become part of the input name -->
placeholder="Count"
class="form-control"
autofocus/>
...
And in your view you can access all values like this:
...
for object_id in request.POST.getlist('item_id'): #this will contain a list with all item ids in it
count = request.POST.get('count_%s'%object_id) #as html inputs are named with ids as part of name you can access them
tag = request.POST.get('tag_%s'%object_id) #as html inputs are named with ids as part of name you can access them
wishlist = WishListItem(owner=owner,
content_type=class_types[tag],
object_id=object_id,
tag=tag,
count=count)
wishlist.save()
...
I found the answer based on #datosula's answer.
since the product id may be repetitive because products are loaded from various tables, then a unique tag is required to distinguish returned values in views.py. I mixed up product's title and products type to achieve this:
<div class="form-group">
<input type="hidden" name="title_type" value="{{ item.title }}{{ item.type }}">
<input type="hidden" name="item_id_{{ item.title }}{{ item.type }}" value="{{ item.id }}">
<input type="hidden" name="tag_{{ item.title }}{{ item.type }}" value="{{ item.type }}">
<input type="hidden" name="title_{{ item.title }}{{ item.type }}" value="{{ item.title }}">
<div class="text-center">
<input type="number"
id="count"
name="count_{{ item.title }}{{ item.type }}"
placeholder="count"
class="form-control"
value="0"
min="0"
max="9999"
autofocus/>
</div>
</div>
in views.py I got the values and created the object like the following:
....
for item in request.POST.getlist('title_type'):
object_id = request.POST.get('item_id_%s'%item)
tag = request.POST.get('tag_%s'%item)
print('\ntag: ', tag )
print('\nclass_types[tag]: ', class_types[tag])
count = request.POST.get('count_%s'%item)
title = request.POST.get('title_%s'%item)
if count != '0': # only save those products that their count is not 0
wishlist = WishListItem(owner=owner,
content_type=class_types[tag],
object_id=object_id,
tag=tag,
count=count,
title=title)
wishlist.save()
....
wish it helps somebody

How to get radio button value from gentlest() method with jinja2 syntax inside?

I'm having a problem with request.form.getlist(), part of my HTML looks like:
{{ question.optionA }} <input type="radio" value="{{ question.optionA }}" name="myradio_{{question.id}}">
{{ question.optionB }} <input type="radio" value="{{ question.optionB }}" name="myradio_{{question.id}}">
{{ question.optionC }} <input type="radio" value="{{ question.optionC }}" name="myradio_{{question.id}}">
{{ question.optionD }} <input type="radio" value="{{ question.optionD }}" name="myradio_{{question.id}}">
now I use:
request.form.getlist('myradio_{{question.id}}')
to get radio button value, but it failed, and I think that's because I can't use {{}} inside of the getlist(). So what should I do?
You can try:
question_id = "myradio_" + question.id
radio_value = request.form[question_id]
Of course, you need to know your question.id before it.

How do I preserve data in Django templates on a drop-down menu?

I am trying to preserve form data on a registration template on a Django project. I am using ginger statements such as {{ old_data.[data] }}. I have no problem doing it with regular text input (like this):
<div class="form-group">
<input type="text" name="zip_code" id="zip_code" class="form-control input-sm" placeholder="Zip" value="{{ old_data.zip_code }}">
</div>
And with textarea (like so):
<textarea type="area" name="area" id="area" class="form-control
textarea" rows="3" placeholder="Please tell us briefly in what part
of town you live and how far you are willing to travel for
rehearsals and performances. i.e., 'I live in the Heights but I'm
willing to drive anywhere within the loop.'">{{ old_data.area }}
</textarea>
But I cannot figure out how to do it with a drop-down menu. Here is my current code:
<select class="form-control" name="primary_instrument" id="primary_instrument" placeholder="Primary instrument" value="{{ old_data.primary_instrument }}">
<option selected disabled>Primary instrument</option>
{% for instrument in instruments %}
<option value='{{ instrument.id }}'>{{ instrument }}</option
{% endfor %}
</select>
Please help!
You can iterate over it, and check for every element if the value corresponds to the value of that option, if that is the case, you add a selected attribute:
<select class="form-control" name="primary_instrument" id="primary_instrument" placeholder="Primary instrument">
<option selected disabled>Primary instrument</option>
{% for instrument in instruments %}
<option value='{{ instrument.id }}' {% if instrument.id == old_data.primary_instrument %}selected{% endif %}>{{ instrument }}</option>
{% endfor %}
</select>
Note the {% if instrument.id == old_data.primary_instrument %}selected{% endif %}. We thus check if the value is the same, and if so, we add the selected attribute to the <option> tag.