I have a client asking to add an "ADD TO CART" button under each product in their collections and I can't figure out how.
I'm new to the Shopify platform and I am not familiar with Liquid but I did try to use the built in "Channel" of adding a Buy Button, but when trying to paste in the code it didn't populate anything in the preview page.
Any help would be wonderful.
Use the shopify API by adding this into the collection.liquid
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variant.id }}" />
<input min="1" type="number" id="quantity" name="quantity" value="1"/>
<input type="submit" value="Buy" class="btn" />
</form>
Add that somewhere in this loop
{% for product in collection.products %}
...
{% endfor %}
product.variant.id identifies which item is added to the cart and it could be replaced with product.variants.first.id
This details how it works and applies to standard, non ajax, forms too
https://help.shopify.com/en/themes/development/getting-started/using-ajax-api#add-to-cart
Related
Tried the solution given by another Developer in adding custom fields inside the Shopify theme cart page by generating the fields from here - https://ui-elements-generator.myshopify.com/pages/cart-attribute, and placing them inside the form tags of my Cart template. It works with Debut theme, however, when I tried testing it in Dawn, the form shows but the data never appeared inside my Orders (Admin Panel).
Is there an alternative solution for 2.0 themes, specifically Shopify Dawn theme?
The UI generator mise form="cart" this will make the magic. It will add the element to the cart form no matter where they are on the screen.
Why use that? well, remember the principle on 2.0 is flexibility using blocks, apps blocks, moving it around the screen, organizing differently, etc. form="cart" give this flexibility on the cart page
I use something like that on an app I write to add PO numbers on the orders.
The result using the UI generator should be:
<p class="cart-attribute__field">
<label for="long-custom-text">Long Custom Text</label>
<textarea
required
form="cart"
class="required"
id="long-custom-text"
name="attributes[Long Custom Text]"
>
{{ cart.attributes["Long Custom Text"] }}
</textarea>
</p>
the other very important part is Name the part inside the braquets is how it will appears on the admin side and how you should search the info on the order name="attributes[Long Custom Text]"
You can change what is inside the brackets Long Custom Text but the rest of the name should be there.
<input type="text" name="attributes[other custom Atribute]" form="cart" />
<input type="email" name="attributes[custom email]" form="cart" />
Solution by #chefjuanpi works. I have tried it and it works. Here are the sample fields I have created.
<p class="cart-attribute__field">
<label for="business-name">Business Name</label>
<input form="cart" id="business-name" type="text" name="attributes[Business Name]" value="{{ cart.attributes["Business Name"] }}">
</p>
<p class="cart-attribute__field">
<label for="tagline">Tagline</label><small>(If applicable)</small>
<input form="cart" id="tagline" type="text" name="attributes[Tagline]" value="{{ cart.attributes["Tagline"] }}">
</p>
<p class="cart-attribute__field">
<label for="colors">Colors</label>
<input form="cart" id="colors" type="text" name="attributes[Colors]" value="{{ cart.attributes["Colors"] }}">
</p>
<p class="cart-attribute__field">
<label for="upload">Upload Logo</label>
<input form="cart" id="upload" type="file" name="attributes[Upload]" class="product-form__input">
</p>
I'm trying to create buttons that add specific quantities of a product to the cart, so I modified the form that is automatically generated by the product page in Shopify, but it seems my code won't add any products from any of my 3 buttons to the cart page. I created 3 different IDs because each button posts the same product but a different quantity of that product. It also has a different description otherwise I would just leave it as 1 ID to keep it simple.
<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
{% for variant in product.variants %}
{% if variant.available %}
<option value="{{ variant.id }}">
{{ variant.title }} - {{ variant.price | money_with_currency }}
</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - sold out
</option>
{% endif %}
{% endfor %}
{{ current_variant.price | money }}
<input type="hidden" id="Quantity" name="quantity" value="1" min="1">
<input type="submit" class="two-cans" name="id" quantity="1" id="6556104458433" value="Get 2 Cans"/>
<input type="submit" class="four-cans" name="id" quantity="2" id="6556136014017" value="Get 4 Cans"/>
<input type="submit" class="six-cans" name="id" quantity="3" id="6556139389121" value="Get 6 Cans"/>
</form>
Adding the id attribute on a submit button will not do what you expect it to do, as it has nothing to do with the actual Shopify id of a product or a variant.
The quantity attribute does not do anything by itself, so that will not work either.
A typical add to cart form will look something like this:
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input min="1" type="number" id="quantity" name="quantity" value="1"/>
<input type="submit" value="Add to cart" class="btn" />
</form>
For your specific use case, a good approach would be using JS instead of liquid. You can use Shopify's REST Api, start by replacing the submit inputs with simple buttons and moving them outside of the form:
<button class="custom-submit-button two-cans" name="id" quantity="2" id="6556104458433">Get 2 Cans</button>
<button class="custom-submit-button four-cans" name="id" quantity="4" id="6556136014017">Get 4 Cans</button>
<button class="custom-submit-button six-cans" name="id" quantity="6" id="6556139389121">Get 6 Cans</button>
Then adding a bit of jQuery to handle the requests:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function addItemToCart(variant_id, qty) {
var data = {
"id": variant_id,
"quantity": qty
}
$.ajax({
type: 'POST',
url: '/cart/add.js',
data: data,
dataType: 'json',
success: function() {
location.reload();
}
});
}
$('.custom-submit-button').click(function(){
addItemToCart($(this).attr("id"), $(this).attr("quantity"));
});
</script>
I recently started to use this bootstrap_form from django_bootstrap3 package. It's a nightmare... Here is a simplified version of what I want to do:
- I have 2 textboxes for user to enter data
- POST the data to a local database through clicking a "submit" button
What I had originally was to have a base_form.html file that store the form such as:
{% extends "expense/base.html" %}
{% block content %}
<form method="post">
{% csrf_token %}
<input id="field1" type="text" name="field1" value="{{ field1 }}">
<input id="field2" type="number" name="field2" value="{{ field2 }}">
<input id="submit" type="submit" value="Submit">
</form>
Then I would just call this form in my base.html, everything works, just ugly. Now that I started to use django_bootstrap3 package, it's great looking, less code, just nothing works. With django_bootstrap3, I no longer need the base_form.html (it grabs data from forms.py directly), instead I just need to call {% bootstrap_form form %} like the following:
{% bootstrap_form form %}
{% buttons %}
<button type="submit" class="btn btn-primary btn-lg btn-block" data-loading-text="Loading...">
{% bootstrap_icon "star" %} Submit
</button>
{% endbuttons %}
However, there is no place for me to say this is a form POST not GET. Also, there is no place for me to say these are all input field, and submit button should actually submit. Right now the behavior is that after I write some data to the field, and click submit button, nothing is posting to the database. The submit button doesn't work at all.
I don't know what I am missing here. I am very new to web development using django and bootstrap framework. Please help.
it seems a stupid question but I do not really get the connection.
I use tghe latest bootstrap version ad have this template:
<div class="form-group"{% if form.name.errors %} error{% endif %}>
<label for="name" class="col-md-2 control-label">Name:</label>
<div class="col-md-10">
<input type="text" class="form-control" id="name" placeholder="Enter your name here">
{% for error in form.name.errors %}
<span class="help-inline">[{{ error }}]</span><br>
{% endfor %}
</div>
</div>
The field is rendered as desired but no matter what I enter there my form will raise the error, that this field is required.
Please let me know what I miss here - how do I link the field in the template to my form properly?
The issue was that the "name" attribute was missing - only having the "id" is insufficient.
I have a customised product.liquid template that includes two products in one template, namely: Bikini Top and Bikini Bottom.
The Bikini Bottom is "externally loaded" into the template using its own cart permalink. My question is, when using cart permalinks, how do I check whether the variant is in-stock or sold out and then display a "sold out" notice if needed?
[EDIT] Below is my cart permalink code for reference:
<form action="/cart/add" method="post" class="variantsform">
<label>Select size</label>
<select name="id">
<option value="1189203320">Small</option>
<option value="1189202416">Medium</option>
<option value="1189200892">Large</option>
<option value="1189203928">Extra Large</option>
</select>
<input type="hidden" name="return_to" value="back" />
<input type="submit" value="Add to cart" class="btn variantsadd">
</form>
at same that you load the variant with liquid, you have to check if is available. Variant manual reference
You also can use the product.first_available_variant