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'm customizing my page to upload multiple files (photos). This is the code that I have so far and according to this link it should work:
https://shopify.dev/tutorials/customize-theme-get-customization-information-for-products
in the link go to "Allow file uploads" if you want to check.
{% form 'product', product, class:form_classes, data-product-form: '', enctype:"multipart/form-data" %}
{% unless product.has_only_default_variant %}
<div class="product-form__controls-group">
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">
<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
id="SingleOptionSelector-{{ forloop.index0 }}"
data-index="option{{ forloop.index }}"
>
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>
</div>
{% endfor %}
</div>
{% endunless %}
<select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
<option value="{{ variant.id }}"
{%- if variant == current_variant %} selected="selected" {%- endif -%}
>
{{ variant.title }} {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
</option>
{% endfor %}
</select>
{% if section.settings.show_quantity_selector %}
{% comment %}
<div class="product-form__controls-group">
<div class="product-form__item">
<input type="number" id="Quantity-{{ section.id }}"
name="quantity" value="1" min="1" pattern="[0-9]*"
class="product-form__input product-form__input--quantity" data-quantity-input
>
</div>
</div>
<div class="qtydiv">
{% comment %}<label for="Quantity" class="quantity-selector">Quantity</label>{% endcomment %}
<div class="qtybox">
<span class="btnqty qtyminus icon icon-minus">-</span>
<input type="text" id="quantity" name="quantity" value="1" min="1" class="quantity-selector quantity-input" readonly="">
<span class="btnqty qtyplus icon icon-plus">+</span>
</div>
</div>
{% endcomment %}
{% endif %}
<div class="product-form__error-message-wrapper product-form__error-message-wrapper--hidden{% if section.settings.enable_payment_button %} product-form__error-message-wrapper--has-payment-button{% endif %}"
data-error-message-wrapper
role="alert"
>
<span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
{% include 'icon-error' %}
<span class="product-form__error-message" data-error-message>{{ 'products.product.quantity_minimum_message' | t }}</span>
</div>
<div class="product-form__controls-group product-form__controls-group--submit">
<div class="qtydiv">
{% comment %}<label for="Quantity" class="quantity-selector">Quantity</label>{% endcomment %}
<div class="qtybox">
<span class="btnqty qtyminus icon icon-minus">-</span>
<input type="text" id="quantity" name="quantity" value="1" min="1" class="quantity-selector quantity-input" readonly="">
<span class="btnqty qtyplus icon icon-plus">+</span>
</div>
</div>
<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 -%}"
>
<button type="submit" name="add"
{% unless current_variant.available %} aria-disabled="true"{% endunless %}
aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"
data-add-to-cart>
<span data-add-to-cart-text>
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
<span class="hide" data-loader>
{% include 'icon-spinner' %}
</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
<input required class="required product-form__input" id="photo" type="file" name="properties[Photo]" multiple>
</div>
</div>
{% endform %}
This is my form that according to the link must have the attribute
enctype = "multipart / form-data".
At the bottom of the form it is in input type = "file".
<input required class="required product-form__input" id="photo" type="file" name="properties[Photo]" multiple>
And this is the code in the cart-template.liquid.
<div class="list-view-item__title">
<a href="{{ item.url }}" class="cart__product-title" data-cart-item-title>
{{ item.product.title }}<br>
{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
{% for p in item.properties %}
{{ item.properties.count }}
{% assign first_character_in_key = p.first | truncate: 1, '' %}
{% unless p.last == blank or first_character_in_key == '_' %}
{{ p.first }}:
{% if p.last contains '/uploads/' %}
<a class="lightbox" href="{{ p.last }}">{{ property_size }}</a>
{% else %}
{{ p.last }}
{% endif %}
<br>
{% endunless %}
{% endfor %}
{% endif %}
</a>
</div>
The problem is the property_size variable gets value one even if I upload two or more images, when in fact I should return the amount of properties that the item has.
Can anyone help me please? What I am doing wrong?
The Debut theme probably has changed since this tutorial was uploaded, and since it is not supported, probably won't be updated.
If you add a type="text" input instead of a type="file" the property gets added as expected. This happens because the _initAddToCart function (assets/theme.js line 6447) gets the form HTML element and pass it along to another function.
var $data = $(this.selectors.productForm, this.$container);
this._addItemToCart($data);
Then in the _addItemToCart function (assets/theme.js line 6513), the form is serialized to a string:
var params = {
url: '/cart/add.js',
data: $(data).serialize(),
dataType: 'json',
};
$.post(params).done(...
This function will ignore the file inputs, as explained in the jQuery documentation:
Data from file select elements is not serialized.
To send the file, the FormData browser API can be used. But to use it with the jQuery AJAX call, some properties must be set:
var params = {
url: '/cart/add.js',
// data: $(data).serialize(),
dataType: 'json',
// Disable the jQuery data processing, and send the FormData object
contentType: false,
processData: false,
data: new FormData($(data).get()[0])
};
$.post(params).done(...
However, since the HTML file <input> has name="properties[Photo]", only the last of the uploaded files will be added to the cart item's Photo property.
I tried with name="properties[Photo][]", but the cart/add.js call only returns an error 500 with the message "Internal Server Error".
So to upload multiple files you could add some custom code to the _addItemToCart function, to get each File from the <input> and add to the FormData with a different key for each file.
I'm trying to show a button that says "Email me when Available" if a product variant is not available. I'm trying to use the same logic as the Debut Theme does to have the button say "add to cart" or "sold out".
<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 %}">
<button type="submit" name="add" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}" data-add-to-cart>
<span data-add-to-cart-text>
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
</button>
{% unless current_variant.available %}
<button class="btn BIS_trigger" data-product-data='{{ product | json | escape }}'>
Email When Available
</button>
{% endunless %}
</div>
What I can't understand is why the "unless current_variant.available" logic works in the button above, but not in part.
Our "not available" variants are set to have Shopify track inventory and the available inventory at zero. We set the available variants to not tracking inventory.
How can I make this work?
This question sounds similar to my own question cart-template-variant. I am doing the same thing with ajax cart header.liquid. I just wanted to access inventory from cart object same as cart-template question {% if item.variant.inventory_quantity < 1 %}. I am initially trying to print {{item.variant.inventory_quantity}} into header.liquid since it is ajax cart. inside {% for item in cart.items %} I have printed {{item.variant.inventory_quantity}} but when I add in stock or out of stock product into the cart. It always returns 0. Which is the cart object property I am not passing properly?
I am actually following below advise but I have missed something here.
The code for Ajax cart is in header.liquid. It has a Cart object, which has many properties. See https://help.shopify.com/themes/liquid/objects/cart#cart-items
One of them is items (i.e. cart.items), which gives all the items added to cart. Around line 100, you will see a for loop {% for item in cart.items %}.
Here item = line_item. The line_item has many properties. See https://help.shopify.com/themes/liquid/objects/line_item.
One of them is variant. i.e. line_item.variant. So here inside for loop will be item.variant.
So now you have variant properties. See https://help.shopify.com/themes/liquid/objects/variant
variant.inventory_quantity is one of them.
header.liquid (Ready to share entire file if required.)
<form action="/checkout" method="post" id="cart">
<ul data-money-format="{{ shop.money_format }}" data-shop-currency="{{ shop.currency }}" data-shop-name="{{ shop.name | escape }}">
<li class="mm-subtitle"><a class="continue ss-icon" href="#cart"><span class="icon-close"></span></a></li>
{% if cart.item_count == 0 %}
<li class="empty_cart">{{ 'layout.general.empty_cart' | t }}</li>
{% else %}
{% for item in cart.items %}
{{item.variant.inventory_quantity}}
<a href="/#" >Will be dispatched by June 7</a>
<li class="cart_item {% if forloop.last %}last_cart_item{% endif %}">
<p class="mm-counter">
<span class="icon-minus minus"></span><input type="number" min="0" class="quantity" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" data-line-id="{{ forloop.index }}" readonly /><span class="icon-plus plus"></span>
</p>
<a href="{{ item.url }}">
{% if item.image %}
<div class="cart_image">
<img src="{{ item | img_url: '410x' }}" alt="{{ item.title | escape }}" />
</div>
{% endif %}
<div class="item_info">
{{ item.product.title }}
{% unless item.product.has_only_default_variant or item.variant.title contains "Title" %}
{% for option in item.product.options %}
{% unless option contains "Title" %}
- {{ item.variant.options[forloop.index0] }} {% unless forloop.last %}/{% endunless %}
{% endunless %}
{% endfor %}
{% endunless %}
{% if item.properties %}
{% for p in item.properties %}
{% if p.last != blank %}
<div class="line-item">
{{ p.first }}: {{ p.last }}
</div>
{% endif %}
{% endfor %}
{% endif %}
<div class="price">
<span class="money">{{ item.price | money }}</span>
</div>
</div>
</a>
</li>
{% endfor %}
<li class="mm-label">
<p class="mm-counter price">
<span class="money">{{ cart.total_price | money }}</span>
</p>
<a href="/cart">
<strong>{{ 'layout.general.subtotal' | t }}</strong>
</a>
</li>
<li class="mm-subtitle clearfix">
{% if settings.display_special_instructions %}
<textarea id="cart-note" name="note" rows="2" placeholder="{{ 'layout.general.cart_note' | t }}" class="clearfix">{{ cart.note }}</textarea>
{% endif %}
{% if settings.display_tos_checkbox %}
<aside class="tos tos_checkbox">
<input type="checkbox" class="tos_agree" id="sliding_agree" required />
<label class="tos_label" for="sliding_agree">
{{ settings.tos_richtext }}
</label>
</aside>
{% endif %}
<input type="submit" class="action_button right" value="{{ 'layout.general.checkout' | t }}" />
{{ 'layout.general.edit_cart' | t }}
</li>
{% endif %}
</ul>
</form>
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.