Hi Everyone.
I’ve built out a sticky add to cart bar following a couple of different tutorials online to get the functionality we’re after. I’m happy with it now but unfortunately the quantity selector doesn’t change the quantity that gets added to cart.
The Variants are adjusted, as is the price on the bar, but the quantity doesn’t change.
Any help would be much appreciated!
code for quantity and button:
<div class="quantity-container">
<div class="product--sticky-form__quantity product-form__quantity{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} product-form__quantity-top{% endif %}">
<div class="input-wrapper">
<quantity-input class="quantity" data-url="{{ product.url }}" data-section="{{ section.id }}">
<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>
<input
class="quantity__input"
type="number"
name="quantity"
aria-label="{{ 'products.product.quantity.input_label' | t: product: variant.title | escape }}"
id="Quantity-{{ section.id }}"
data-index="{{ variant.id }}"
min="1"
value="1"
>
<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>
</div>
</div>
<div class="atc-button-container">
{%- form 'product',
product,
id: product_form_id,
class: 'form',
novalidate: 'novalidate',
data-type: 'add-to-cart-form'
-%}
<input
type="hidden"
name="id"
value="{{ product.selected_or_first_available_variant.id }}"
disabled
class="product-variant-id"
>
{%- if gift_card_recipient_feature_active -%}
{%- render 'gift-card-recipient-form', product: product, form: form, section: section -%}
{%- endif -%}
<div class="product-form__buttons sticky-product-form__buttons">
{%- liquid
assign check_against_inventory = true
if product.selected_or_first_available_variant.inventory_management != 'shopify' or product.selected_or_first_available_variant.inventory_policy == 'continue'
assign check_against_inventory = false
endif
if product.selected_or_first_available_variant.quantity_rule.min > product.selected_or_first_available_variant.inventory_quantity and check_against_inventory
assign quantity_rule_soldout = true
endif
-%}
<button
id="StickyProductSubmitButton-{{ section_id }}"
type="submit"
name="add"
class="product-form__submit button button--full-width button--primary sticky-atc-button"
{% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
disabled
{% endif %}
>
<span>
{%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
{{ 'products.product.sold_out' | t }}
{%- else -%}
{{ 'products.product.add_to_cart' | t }}
{%- endif -%}
</span>
{%- render 'loading-spinner' -%}
</button>
</div>
{%- endform -%}
</div>