Trying to see if there's a way on certain products in my clients Shopify store where for wholesale customers, they must order at least a quantity of 15 per item.
I'm trying a script to get the Quantity Selector to start at 15 instead of one but it's not working. Here's my code:
<quantity-input class="quantity">
<button class="quantity__button no-js-hidden" name="minus" type="button">
<span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: product.title | escape }}</span>
{% render 'icon-minus' %}
</button>
{% assign productTags = product.tags | join: ', ' %}
{% if productTags contains 'wholesale' %}
<input class="quantity__input"
type="number"
name="quantity"
id="Quantity-{{ section.id }}"
min="15"
value="1"
form="{{ product_form_id }}"
>
{% else %}
<input class="quantity__input"
type="number"
name="quantity"
id="Quantity-{{ section.id }}"
min="1"
value="1"
form="{{ product_form_id }}"
>
{% endif %}
<button class="quantity__button no-js-hidden" name="plus" type="button">
<span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product.title | escape }}</span>
{% render 'icon-plus' %}
</button>
</quantity-input>
Assuming all your other conditions are working regarding the wholesale Tag logic, you also need to set the Value to Min Value (in this case 15) instead of 1. So your input field code for Wholesale products would become
<input class="quantity__input" type="number" name="quantity" id="Quantity-{{ section.id }}" min="15" value="15" form="{{ product_form_id }}">
Related
Everything is showing like I expect but the send button is not working.
the button is not clickable as well
This part is for product-form.liquid
{% unless product.available %}
{%- form 'contact', id: form_id -%}
{% if form.posted_successfully? %}
<p class="accent-text">Thanks! We will notify you when this product becomes available!</p>
{% else %}
<p>Enter your email to get notified when {{ product.title }} become available.</p>
{% endif %}
<div id="notify-me-wrapper" class="clearfix">
{% if customer %}
<input type="hidden" name="contact[email]" value="{{ customer.email }}" />
{% else %}
<input style="float:left; width:180px;" required="required" type="email" name="contact[email]" placeholder="your#email.com" class="styled-input" />
{% endif %}
<input type="hidden" name="contact[body]" value="Please notify me when {{ product.title | escape }} becomes available." />
</div>
<button type="submit" class="btn">
{{ 'contact.form.send' | t }}
</button>
{% endform %}
{% endunless %}
I've checked your code on my store. there is no error in the liquid code. it may possible that some js code is being affected after page load. please check your JS files.
So I'm on Shopify product template (using Debut Theme). I changed the default dropdown variant selector to radio buttons and it works great. I wanted the radio buttons to display the variant image, and that's where I'm stuck. (Here's a link to a test product where I want this to work: TEST product link
Here's the radio button form:
{% form 'product', product, class:form_classes %}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<label style="font-weight: 700; font-size: 1.2em;"{% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
¡Escoge la versión que quieres!
</label>
{% assign option_position = forloop.index %}
<fieldset class="botones-radio">
{%- for value in option.values -%}
<div class="imagen-mas-boton">
<input type="radio" class="single-option-selector-{{ section.id }} "
{% if option.selected_value == value %} checked="checked"{% endif %}
value="{{ value | escape }}"
data-index="option{{option_position}}"
name="{{ option.name | handleize }}"
id="SingleOptionSelector-{{option_position}}">
<img src="{{ featured_image | img_url: '200x' }}" />
<label style="text-align: center;" for="SingleOptionSelector-{{ forloop.index0 }}">
{{value}}
</label>
</div>
{%- endfor -%}
</fieldset>
{% endfor %}
{% endunless %}
<select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
{% 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 }}
</option>
{% else %}
<option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
{% endif %}
{% endfor %}
</select>
{% if section.settings.show_quantity_selector %}
<div class="product-form__item product-form__item--quantity">
<label for="Quantity">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*">
</div>
{% endif %}
<div class="product-form__item product-form__item--submit{% if section.settings.enable_payment_button %} product-form__item--payment-button{% endif %}{% if product.has_only_default_variant %} product-form__item--no-variants{% endif %}">
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}">
<span id="AddToCartText-{{ section.id }}">
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
</button>
</div>
{% endform %}
Now, the <img src="{{ featured_image | img_url: '200x' }}" /> obviously displays the featured image so both variants will display the same image, and both will change when selecting the other variant and refreshing the page.
I want to display the image assigned to each variant. I tried <img src="{{ variant| img_url: '200x' }}" /> and <img src="{{ variant.image | img_url: '200x' }}" />
But it doesn't seem to work.
I also would like to display each variants price on the lable, for this I tried the following:
<label style="text-align: center;" for="SingleOptionSelector-{{ forloop.index0 }}"> {{value}} {{current_variant.price | money }} </label>
but this will show the price of the selected variant and will only change when refreshed.
I need to setup the quantity selector in such a way that the user cant increment after the quantity exceeds the stock.
here's the code
{% if section.settings.show_quantity_selector %}
<div class="product-form__controls-group">
<div class="product-form__item">
<label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity-{{ section.id }}" name="quantity" value="1" min="1" max="current_variant.inventory_quantity == 1" class="product-form__input product-form__input--quantity" data-quantity-input>
</div>
</div>
{% endif %}
You are close, try something like this:
<input type="number" id="Quantity-{{ section.id }}" name="quantity" value="1" min="1" max="{{ current_variant.inventory_quantity }}" class="product-form__input product-form__input--quantity" data-quantity-input>
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>
I want to have the Add to Cart button on my collections page (eg - example.com/collections/collection-name) next to each product. So if I have 20 products on the page I want to have 20 Add to Cart buttons, next to their respective product.
I edited product-card.liquid with the following:
<select name="product-form-{{ product.variants.first.id }}" id="product-form-{{ product.variants.first.id }}" class="product-form__variants">
{% for variant in product.variants %}
<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" {% unless variant.available %} disabled="disabled" {% endunless %}>
{% if variant.available %}
{{ variant.title }} - {{ variant.price | money_with_currency }}
{% else %}
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
{% endif %}
</option>
{% endfor %}
</select>
<div class="product-form__item product-form__item--quantity">
<label for="Quantity">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity-{{ product.variants.first.id }}" name="quantity" value="1" min="1" class="product-form__input">
</div>
<div class="product-form__item product-form__item--submit">
<button name="add" class="btn btn--full product-form__cart-submit">
<span id="AddToCartText-{{ product.variants.first.id }}">{{ 'products.product.add_to_cart' | t }}</span>
</button>
</div>
</form>
The issue is that when I click Add to Cart on the 1st product on the page, the last product on the page is added to Cart.
Is there an existing onclick event for Add to Cart that finds the last product id on the page and adds that to the cart? I am using the Venture theme.
What am I missing?
Where is the form opening?
It should be there before the first select.