Hi all, I’ve got the quantity picker set up on my product-grid (on my home page), as well as on my individual product pages.
The quantity picker works fine on the home page, but in the individual product page, it increments by 2 each time when you click the + button.
Looking through the theme.js file, I can see the function which executes the increment (qtySelectors). Is this increasing my number by 2 on the product page because it is double counting the numbers from the home page when the global settings first load at the home page?
I thought this was the case initially, but then I tried a workaround by changing the individual product page to use a dropdown quantity selector, and nothing changed. The page still shows a button based quantity selector which is weird.
Here’s my page for reference (currently set back to button quantity picker): https://naturalbrews.sg/
I’m using the Brooklyn theme.
I’ve also added code snippets below of my existing page. Any help or direction is much appreciated!
product-grid-item.liquid
{% comment %}
This snippet is used to showcase each product during the loop,
'for product in collection.products' in collection.liquid.
A liquid variable (grid_item_width) is set just before the this
snippet is included to change the size of the container.
Once the variable is set on a page, all future instances of this
snippet will use that width. Overwrite the variable to adjust this.
Example
- assign grid_item_width = 'large--one-quarter medium--one-half'
{% endcomment %}
{% unless grid_item_width %}
{% assign grid_item_width = 'large--one-third medium--one-half' %}
{% endunless %}
{% unless width %}
{%- assign width = 310 -%}
{% endunless %}
{% unless height %}
{%- assign height = 415 -%}
{% endunless %}
{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
{% assign on_sale = true %}
{% endif %}
{% assign sold_out = true %}
{% if product.available %}
{% assign sold_out = false %}
{% endif %}
{%- assign variant = product.selected_or_first_available_variant -%}
{% capture img_id_class %}ProductImage-{{ product.featured_media.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_media.id }}{% endcapture %}
{%- assign featured_image = product.featured_media.preview_image %}
{%- assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% if featured_image.src== blank %}
{% else %}
{% include 'image-style' with image: featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %}
{% endif %}
{% if sold_out %}
{{ 'products.product.sold_out_html' | t }}
{% elsif on_sale %}
{% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}
{{ 'products.general.save_html' | t: saved_amount: saved_amount }}
{% endif %}
{% comment %}
Next bit of code has been added to include "Add to Cart" button below every product in a grid, with the quantity displayed
{% endcomment %}
{{ product.title }}
—
{% if on_sale %}
{{ 'products.general.sale_price' | t }}
{% else %}
{{ 'products.general.regular_price' | t }}
{% endif %}
{% if product.price_varies %}
{{ product.price_min | money_without_trailing_zeros }}
+
{% else %}
{{ product.price | money_without_trailing_zeros }}
{% endif %}
{%- if product.price_varies == false and variant.unit_price_measurement -%}
{%- capture unit_price_separator -%}
/ {{ 'general.accessibility.unit_price_separator' | t }}
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endcapture -%}
{{ 'products.general.unit_price' | t }}
{{ variant.unit_price | money }}{{- unit_price_separator -}}{{- unit_price_base_unit -}}
{%- endif -%}
{% if section.settings.product_vendor_enable %}
{{ product.vendor }}
{% endif %}
product-template.liquid
{%- assign first_3d_model = product.media | where: "media_type", "model" | first -%}
{% assign current_variant = product.selected_or_first_available_variant %}
{% assign featured_media = current_variant.featured_media | default: product.featured_media %}
{% assign stacked = false %}
{% if section.settings.media_layout == "stacked" %}{% assign stacked = true %}{% endif %}
{%- assign first_media = true -%}
{%- assign enable_image_zoom = section.settings.enable_image_zoom -%}
{% assign height = 850 %}
{% assign width = 575 %}
{%- assign first_3d_model = product.media | where: "media_type", "model" | first -%}
{% comment %}
Display product images
{% endcomment %}
{%- for media in product.media -%}
{%- assign featured = false -%}
{%- if media == featured_media -%}
{%- assign featured = true -%}
{%- endif -%}
{%- capture thumbnail_alt -%}
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
{{ 'products.product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- elsif media.media_type == 'model' -%}
{{ 'products.product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- else -%}
{{ 'products.product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- endif -%}
{%- endcapture -%}
{%- include 'media' with media, enable_image_zoom: enable_image_zoom, stacked: stacked, featured: featured, width: width, height: height -%}
{% comment %}
Display a "View in your space" button (multi) for the first visible media and each individual model.
Stacked layout only.
{% endcomment %}
{% if stacked %}
{%- assign xr_id = false -%}
{%- if first_media and first_3d_model -%}
{%- assign xr_id = first_3d_model.id -%}
{%- elsif media.media_type == 'model' -%}
{%- assign xr_id = media.id -%}
{%- endif -%}
{%- if xr_id -%}
{%- include 'xr-button' with model_id: xr_id, multi: true -%}
{%- endif -%}
{%- assign first_media = false -%}
{% endif %}
{%- endfor -%}
{% comment %}
Display a "View in your space" button (single).
Stacked/Thumbnails layout (mobile)
Thumbnail layout only (desktop)
{% endcomment %}
{%- if first_3d_model -%}
{%- include 'xr-button' with model_id: first_3d_model.id, multi: false -%}
{%- endif -%}
{% unless stacked %}
{% for media in product.media %}
{% if product.media.size > 1 %}
- {%- capture thumbnail_alt -%}
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
{{ 'products.product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- elsif media.media_type == 'model' -%}
{{ 'products.product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- else -%}
{{ 'products.product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- endif -%}
{%- endcapture -%}
{%- if media.media_type == 'video' or media.media_type == 'external_video' or media.media_type == 'model' -%}
{% include 'svg-definitions' with media.media_type %}
{%- endif -%}
{% endif %}
{% endfor %}
{% endunless %}
{% if section.settings.product_vendor_enable %}
## {{ product.vendor }}
{% endif %}
# {{ product.title }}
{% comment %}
Optionally show the 'compare at' or original price of the product.
{% endcomment %}
{% include 'product-price', variant: current_variant %}
{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
{%- if shop.taxes_included -%}
{{ 'products.general.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.general.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
{%- endif -%}
---
{% capture "form_classes" %}
product-single__form{% if product.has_only_default_variant %} product-single__form--no-variants{% endif %}
{%- endcapture %}
{% capture "form_id" %}AddToCartForm--{{ section.id }}{%- endcapture %}
{% form 'product', product, class:form_classes, id:form_id, data-product-form: '' %}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
{% if section.settings.product_selector == 'radio' %}
{% else %}
{% endif %}
{% endfor %}
{% endunless %}
{% if section.settings.quantity_enabled %}
{% endif %}
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
{% endform %}
{{ product.description }}
{% if section.settings.social_sharing_products %}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product.featured_media %}
{% endif %}
{% unless product == empty %}
{% endunless %}
//removed schema for abbreviation
theme.js.liquid
qtySelectors = function() {
// Change number inputs to JS ones, similar to ajax cart but without API integration.
// Make sure to add the existing name and id to the new input element
var $numInputs = $('input[type="number"]');
if ($numInputs.length) {
$numInputs.each(function() {
var $el = $(this),
currentQty = $el.val(),
inputName = $el.attr('name'),
inputId = $el.attr('id');
var itemAdd = currentQty + 1,
itemMinus = currentQty - 1,
itemQty = currentQty;
var source = $('#JsQty').html(),
template = Handlebars.compile(source),
data = {
key: $el.data('id'),
itemQty: itemQty,
itemAdd: itemAdd,
itemMinus: itemMinus,
inputName: inputName,
inputId: inputId
};
// Append new quantity selector then remove original
$el.after(template(data)).remove();
});
// Setup listeners to add/subtract from the input
$('.js-qty__adjust').on('click', function() {
var $el = $(this),
$qtySelector = $el.siblings('.js-qty__num'),
qty = parseInt($qtySelector.val().replace(/\D/g, ''));
qty = validateQty(qty);
// Add or subtract from the current quantity
if ($el.hasClass('js-qty__adjust--plus')) {
qty += 1;
} else {
qty -= 1;
if (qty <= 1) qty = 1;
}
// Update the input's number
$qtySelector.val(qty);
});
}
};