I have managed to add an Add to Cart button to my collection page in the Flex theme from Out of the Sandbox. However, for variant products, when you click on the Add to Cart, it automatically adds the default variant product to the Cart. I would like to change this so that instead of "Add to Cart" it displays "Choose Option" on the button and when clicked it takes you to the product page, where you then have to select the variant before adding this to the cart.
My code for the Add to Cart button is:
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input type="submit" value="{% if product.variants.first.available%}Add to Basket{% else %}Out of Stock{% endif%}" class="button ajax-submit action_button button--add-to-cart" {% unless product.variants.first.available %}disabled{% endunless %} />
</form>
Can anyone help with this?
Thanks
Something like this would work:
{% if product.available == false %}
<span>Out of Stock</span>
{% elsif product.has_only_default_variant %}
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input type="submit" value="Add to Basket" class="button ajax-submit action_button button--add-to-cart" />
</form>
{% else %}
Choose option
{% endif %}
Related
I have made a form page in Shopify in which following fields I have taken:-
<form action="/cart" method="post">
{% comment %}
Successful message
{% endcomment %}
{% if form.posted_successfully? %}
<p class="note form-success">
{{ 'contact.form.post_success' | t }}
</p>
{% endif %}
<div class="selection-wrapper">
{{ form.errors | default_errors }}
</div>
<div class="selection-wrapper">
<div class="grid">
<label for="Name" class="hidden-label">Name*</label>
<div class="grid__item medium-up--one-half">
<input type="text" style="width:100%;" name="first_name" id="FirstName" {% if form.first_name %}value="{{ form.first_name }}"{% endif %} required>
<label for="FirstName">{{ 'customer.register.first_name' | t }}</label>
</div>
<div class="grid__item medium-up--one-half">
<input type="text" style="width:100%;" name="last_name" id="LastName" {% if form.last_name %}value="{{ form.last_name }}"{% endif %}>
<label for="LastName">{{ 'customer.register.last_name' | t }}</label>
</div>
</div>
<br/>
<div class="grid">
<label for="Email" class="hidden-label">Email Address *</label>
<input type="email" style="width:100%;" id="Email" name="email" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}">
</div>
<br/>
<div class="grid">
<label for="ContactFormPhone" class="hidden-label">Key Code Card Number*</label>
<input type="text" id="key_cord_card_no" style="width:100%;" name="keyCordCardNo" value="{{ form.keyCordCardNo }}" required>
</div>
<br/>
<div class="grid">
<label for="Product Name" class="hidden-label">Product Name*</label>
<input type="text" id="productName" style="width:100%;" name="product_name" value="{{ form.product_name }}" required>
the </div>
<div class="grid">
<p class="submit">
<input type="submit" class="button solid" value="submit">
</p>
</div>
</div>
</form>
I have to add product to cart by its name how can i do it?
How can I add products in a cart in Shopify by through a form in which only product name field is taken?
The short answer is - you can't add a product only by his name.
A product MUST have a variant ID in order for you to submit it to the cart.
The long answer is:
The only way to add a product by it's name is if you make an AJAX request to the product page and get the variant ID from there and submit that.
You always buy a variant in Shopify, even if a product doesn't have any variants it always have a defaut variant which is bought.
So if you plan to allow the customer to enter the product name in a text field you will need to make an AJAX request to the search page ( since I assume the customer won't be able to enter the exact name of the product in order for you to make a direct AJAX request ) and get the first result ( it will be best if you add the variant ID in the result item as a data attribute for example or some other way so that you don't need to make a second AJAX call to the product page itself ) and submit that to the cart.
Since the information given is so little I can't provide you any code or further instructions how to proceed.
def reserve(request):
if request.method=="POST":
user=User.objects.get(pk=request.POST['user'])
**book = Book.objects.get(pk=request.POST['book'])**
book.isAvailable=True
book.save()
reservation=Reserve(dateLoaned=datetime.now(),book=book, user=user)
reservation.save()
reservations=Reserve.objects.all()
return redirect('/library/reservations/')
else:
user=User.objects.all()
book=Book.objects.all()
return render(request, 'reserve.html',{"users":user, "book":book})
There is some error in my book = Book.objects.get(pk=request.post[book'])
Im doing a project that needs to be submitted on Monday. PLS HELP!
reserve.html
{% extends 'base.html' %}
{% load static %}
{% block title %}
Reserve
{% endblock %}
{% block maincontent %}
<form action="../reserve/" method="post">
{% csrf_token %}
<br>
<div class="table">
<input value="{{ book.title }}" class="form-control"
id="exampleFormControlInput1" enabled>
</div>
<div class="form-group">
<td>
<img src = "{{ book.cover }}" height="150" width="100"/>
</td>
</div>
<div class="form-group">
<br>
<label for="FormControlSelect1">Select Users</label>
<select class="form-control" id="FormControlSelect1" required
name="user">
{% for user in users %}
<option value="{{ user.pk }}">{{ user }}</option>
{% endfor %}
</select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-block">Reserve</button><br>
</div>
<input type="hidden" value="{{ book.pk }}" name="book" />
</form>
{% endblock %}
My reserve html might have some error. it should link my reserve to another page. but it didnt.
Error in the above image MultiValueDictKeyError. You have to replace the below code
reservation = Reserve.objects.get(pk=request.POST['reservation'])
to
reservation = Reserve.objects.get(pk=request.POST.get('reservation'))
I have override my Login form, so I want login by mobileNumber, not by username and password.
This is the template:
{% if error %}
<div>{{ error.messageKey|trans(error.messageData, 'security') }}</div>
{% endif %}
<form action="{{ path("fos_user_security_check") }}" method="post">
{% if csrf_token %}
<input type="hidden" name="_csrf_token" value="{{ csrf_token }}" />
{% endif %}
<div class="main-text">Войти</div>
<div class="text-description-mobile-phone">Мобильный телефон</div>
<input type="text" name="mobileNumber" placeholder="+7(999) 123-45-67" class="info-input" required="required" />
<div class="text-description-password">Код из СМС</div>
<input type="text" name="code" placeholder="9876" class="info-input" required="required" />
<div class="line"></div>
<input type="submit" id="_submit" name="_submit" value="{{ 'Войти'|trans }}" class="enter-button"/>
</form>
Where does the login logic take place?
Where can I add checking of my own field?
How can I override user identification?
Can you provide an example?
I found the answer in the Internet. If someone will face the same problem, you can find solution there: https://ourcodeworld.com/articles/read/459/how-to-authenticate-login-manually-an-user-in-a-controller-with-or-without-fosuserbundle-on-symfony-3
Or in russian : http://fkn.ktu10.com/?q=node/9574
I’m outputting two collections on my home page, with a quantity textbox and add to cart button for each product.
My problem is that the quantity field is not working - no matter what value I enter, only a single product is added to the cart. If I remove the quantity field from one of the collections, the other one starts working, so it’s only a problem when they are both there.
I feel like this should be very simple, but I’ve been banging my head against it for almost a day now, so I am admitting defeat!
Here’s the code from my liquid file (with most html removed for clarity):
{% for product in collections.mixr.products %}
<div class="product">
{{ product.title }}
{{ product.price | money }}
<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm{{ product.variants.first.id }}">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input min="1" type="number" name="quantity" id="product-quantity-{{ product.variants.first.id }} value="1" />
<button type="button" name="add">
{{ 'products.product.add_to_cart' | t }}
</button>
</form>
</div>
{% endfor %}
I'm trying to make it so that my variants are display like the following image instead of the default dropdown Shopify provides.
I'm currently using the following code, but it throws up an error when trying to add something to the basket. The error states "Parameter Missing or Invalid: Required parameter missing or invalid: id"
<form action="/cart/add" method="post" enctype="multipart/form-data">
{% for variant in product.variants %}
{% if variant.available == true %}
<fieldset class="group">
<ul class="checkbox">
<li>
<input type="checkbox" value="{{variant.id}}">
<label>{{ variant.title }} for {{ variant.price | money_with_currency }}</label>
</input>
</li>
</ul>
</fieldset>
{% else %}
<option disabled="disabled"> {{ variant.title }} - sold out!</option>
{% endif %}
{% endfor %}
<input type="submit" name="add" id="add" class="inpost-buy w-button" value="Add to Bag →"></input>
</form>
You are missing your name attribute for the checkbox.
It should have name="id". ( or if you are really determine to have checkboxes and not radio buttons it should be name="id[]" )
In addition, this is not a valid HTML code:
<input type="checkbox" value="{{variant.id}}">
<label>{{ variant.title }} for {{ variant.price | money_with_currency }}</label>
</input>
You can't have label inside of an input. The other way around will be OK.
And there is no point for this, since you are not using select any more:
<option disabled="disabled"> {{ variant.title }} - sold out!</option>