Quantity selector dropdown - Product page

Ninthony
Shopify Partner
1626 224 611

 So here is the code you will need to change the quantity, you can put it at the end of your theme.js file in your assets folder:

$(document).ready(function(){
let decrement = document.querySelector('.custom-icon-minus');
let increment = document.querySelector('.custom-icon-plus');

increment.addEventListener('click', adjustQuantity)
decrement.addEventListener('click', adjustQuantity)

function adjustQuantity(){
let quantitySelector = document.getElementById('quantity');
let quantity = parseInt(quantitySelector.getAttribute('value'));
if(this.classList.contains('custom-icon-minus') && quantity > 1){
  quantity = quantity - 1;
  quantitySelector.setAttribute('value', quantity);
}else if(this.classList.contains('custom-icon-plus') && quantity >= 1) {
quantity = quantity + 1;
quantitySelector.setAttribute('value', quantity);
}
}
})

 

However, for whatever reason, your add to cart button is still only adding 1 item to the cart. I don't know how that functions, so I couldn't tell you why without digging a little deeper into your code, I went through your entire theme.js file and did not see where the add to cart action is taking place -- so I'm not sure where it is happening. Possibly product.liquid in script tags. Did you perhaps change anything about your quantity selector other than adding the plus an minus? It may have relied on an id or class name if they are different now. 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Leadermar
Tourist
20 0 0

Ah yes almost there ! Thank you so much for your help

Here is my product form.liquid code : 

<!-- /snippets/product-form.liquid -->

{%- assign variants_count = product.variants.size -%}
{%- assign enable_quickview_payment_button = settings.enable_payment_button -%}
{%- assign product_description_content = product.description -%}

{%- if enable_tabs_h6 -%}
    {%- assign product_description_content = product_description_content | split: '<h6>' | first -%}
{%- endif -%}

{%- comment -%}
Check if the product is on sale and set a variable to be used below.
{%- endcomment -%}
{%- assign on_sale = false -%}
{%- if product.compare_at_price > product.price -%}
    {%- assign on_sale = true -%}
{%- endif -%}

{%- comment -%}
Check if the product is sold out and set a variable to be used below.
{%- endcomment -%}
{%- assign sold_out = true -%}
{%- if product.available -%}
    {%- assign sold_out = false -%}
{%- endif -%}

{%- comment -%}
#addToCartForm is a selector for the Ajax Cart plugin
{%- endcomment -%}

{%- assign productFormID = "AddToCartForm--" | append: section.id -%}
{%- form 'product', product, class: "product-form product-form--is-loading", id: productFormID, data-swatches: enable_swatches, data-enable-button: enable_payment_button, data-enable-quickview-button: enable_quickview_payment_button -%}
    {%- comment -%} id
    Show product title only as Featured product
    {%- endcomment -%}
    {%- if template == 'index' -%}
        <h1 class="featured-product-title product-title">
            <a href="{{ product.url | within: collection }}">{{ product.title | truncate: 50 }}</a>
        </h1>
        {%- if enable_reviews or settings.enable_yotpo and settings.yotpo_ID != '' -%}
          <div class="product__badge">
            {%- if settings.enable_yotpo and settings.yotpo_ID != '' -%}
              <div class="yotpo bottomLine" data-product-id="{{ product.id }}"></div>
            {%- elsif enable_reviews -%}
              <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
            {%- endif -%}
          </div>
        {%- endif -%}
    {%- endif -%}

    {%- comment -%}
    Prices
    {%- endcomment -%}
    <h2 class="product-price" itemprop="price">
        <span id="ProductPrice">{{ current_variant.price | money }}</span>
        <span id="ComparePrice">
            {%- if current_variant.compare_at_price -%}
                <s class="reduced-price">{{ current_variant.compare_at_price | money }}</s>
            {%- endif -%}
        </span>

        <span id="UnitPrice" class="unit-price">
            {%- if current_variant.unit_price_measurement -%}
                {{ current_variant.unit_price | money }}
                {%- if current_variant.unit_price_measurement.reference_value != 1 -%}
                    {{- current_variant.unit_price_measurement.reference_value -}}
                {%- endif -%}
                {{ current_variant.unit_price_measurement.reference_unit }}
            {%- endif -%}
        </span>
    </h2>

    {%- comment -%}
    Variants
    {%- endcomment -%}
    <div class="variants-wrapper">
        {%- if variants_count > 1 -%}
            {%- if enable_swatches -%}
                {%- render 'swatch' with 'Color', product: product -%}
            {%- endif -%}
            <select name="id" data-productid="{{ product.id }}" id="productSelect--{{ section.id }}"
                    class="product-single__variants">
                {%- for variant in product.variants -%}
                    {%- if variant.available -%}
                        <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
                                data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }}
                            - {{ variant.price | money_with_currency }}</option>
                    {%- else -%}
                        <option disabled="disabled">
                            {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                        </option>
                    {%- endif -%}
                {%- endfor -%}
            </select>
        {%- else -%}
            <input name="id" data-productid="{{ product.id }}" type="hidden" value="{{ current_variant.id }}">
        {%- endif -%}

            <div class="qtydiv">                
              <label for="Quantity" class="quantity-selector">{{ 'products.product.quantity' | t }}</label>
      		 
              <button type="button" class="js-qty__adjust--minus icon-fallback-text">
              <span class="icon icon-minus custom-icon-minus" aria-hidden="true"></span>
              <span class="fallback-text">&minus;</span>
              </button>
              
              <input type="text" id="quantity" value="1" min="1" pattern="[0-9]*" aria-label="quantity" class="quantity-selector quantity-input">
              
              <button type="button" class="js-qty__adjust--plus icon-fallback-text">
              <span class="icon icon-minus custom-icon-plus" aria-hidden="true" data-line="{{line}}" data-qty="{{itemAdd}}"></span>
              <span class="fallback-text">&plus;</span>
              </button>
      </div>

    {%- comment -%}
    Buttons
    {%- endcomment -%}

    <button type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn {% if enable_payment_button %}btn--submit-light{% else %}btn--submit{% endif %} {% if sold_out %}disabled{% endif %}" {% if sold_out %}disabled{% endif %}>
        <span id="AddToCartText">
            {%- if sold_out -%}
                {{- 'products.product.sold_out' | t -}}
            {%- else -%}
                {{- 'products.product.add_to_cart' | t -}}
            {%- endif -%}
        </span>
        {%- render 'icon-loading' -%}
    </button>

    {%- if enable_payment_button or enable_quickview_payment_button -%}
        <div data-payment-button="{{ enable_payment_button }}" data-quickview-payment-button="{{ enable_quickview_payment_button }}">
            {{ form | payment_button }}
        </div>
    {%- endif -%}

    {%- comment -%}
    Product Description and product tabs
    {%- endcomment -%}
    <div class="product-description rte" itemprop="description">
        <p> {{ product_description_content }}</p>
    </div>

    {%- if template != 'index' -%}
        {%- render 'product-tabs',
            product: product, enable_reviews: enable_reviews, enable_tabs_h6: enable_tabs_h6,
            tab_1: tab_1, tab_2: tab_2, tab_3: tab_3 -%}
    {%- endif -%}

    {%- comment -%}
    Social Icons
    {%- endcomment -%}
    <div class="featured-product-social-wrapper">
        {%- if section.settings.enable_social_sharing_products -%}
            {%- render 'social-sharing', product: product  -%}
        {%- endif -%}
    </div>
{%- endform -%}

And here is the previous code I replaced : 

  {%- unless section.settings.hide_quantity -%} 

            {%- comment -%} 

            Quantity Selector 

            {%- endcomment -%} 

            <div class="qtydiv">                 

              <label for="Quantity" class="quantity-selector">{{ 'products.product.quantity' | t }}</label> 

              <input type="text" id="Quantity" name="quantity" value="1" min="1" pattern="[0-9]*" class="quantity-selector quantity-input"> 

            </div> 

        {%- else -%} 

            <input type="hidden" name="quantity" value="1"> 

        {%- endunless -%} 

    </div> 

 

 

0 Likes
Ninthony
Shopify Partner
1626 224 611

I would put that input text area for your quantity back to the way it was before. Then you would have to change my code to:


$(document).ready(function(){
let decrement = document.querySelector('.custom-icon-minus');
let increment = document.querySelector('.custom-icon-plus');

increment.addEventListener('click', adjustQuantity)
decrement.addEventListener('click', adjustQuantity)

function adjustQuantity(){
let quantitySelector = document.getElementById('Quantity');
let quantity = parseInt(quantitySelector.getAttribute('value'));
if(this.classList.contains('custom-icon-minus') && quantity > 1){
  quantity = quantity - 1;
  quantitySelector.setAttribute('value', quantity);
}else if(this.classList.contains('custom-icon-plus') && quantity >= 1) {
quantity = quantity + 1;
quantitySelector.setAttribute('value', quantity);
}
}
})

 

The only change in my code is the ID of your previous quantity selector was "Quantity" and the new one is "quantity" -- that could very well be the problem. 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Leadermar
Tourist
20 0 0

Hi Ninthony, 

Thank you so much for your help - it's working now! The only thing is when the product is sold out, I can't add more quantity on my basket which is fine but I no longer have the error message saying that the item is out of stock. 

Also, is there an easy way to set up a max amount of product you can add to your basket (10 for examples?).

Thank you, 
Lea. 

0 Likes
Ninthony
Shopify Partner
1626 224 611

I can probably write in some more functionality to do an Ajax call and check the amount of available products for the product and set a max limit on the input to that amount. I won't be on till tomorrow morning, but could you send a preview link tomorrow morning (Monday) when you get on? I'll see what I can do.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Leadermar
Tourist
20 0 0

Hi Ninthony, 

Hope you had a lovely week-end  

Here is the preview link: 

https://bk0d9fm28q35gdan-48968269976.shopifypreview.com/products_preview?preview_key=eed1077a013a01a...

Thank you so much, 
Lea. 

0 Likes
Ninthony
Shopify Partner
1626 224 611

Sorry the link is expired again, can you send another one? This is why it would be better to give me access to your theme  ~_^

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Leadermar
Tourist
20 0 0

Here you go : https://bk0d9fm28q35gdan-48968269976.shopifypreview.com/ 

This one should works ! 

 

0 Likes
Ninthony
Shopify Partner
1626 224 611

So with javascript I cannot see the inventory level, that feature has been depreciated by Shopify. I can access that through liquid, but I would need access to your site for this, I don't want to keep playing tag back and fourth to see if something works or not because when coding you kind of code as you go. So I'm going to need to constantly write something > check it > correct it if wrong > continue > repeat. If you just want them to only be able to add 10 products you can change my code to this, but ideally the max-number should be the available amount of product if it's less than 10:

$(document).ready(function(){

let decrement = document.querySelector('.custom-icon-minus');
let increment = document.querySelector('.custom-icon-plus');

increment.addEventListener('click', adjustQuantity)
decrement.addEventListener('click', adjustQuantity)



function adjustQuantity(){
let quantitySelector = document.getElementById('Quantity');
let quantity = parseInt(quantitySelector.getAttribute('value'));
if(this.classList.contains('custom-icon-minus') && quantity > 1){
  quantity = quantity - 1;
  quantitySelector.setAttribute('value', quantity);
}else if(this.classList.contains('custom-icon-plus') && quantity >= 1 && quantity < 10) {
quantity = quantity + 1;
quantitySelector.setAttribute('value', quantity);
}
}
})

 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Leadermar
Tourist
20 0 0

Hi Ninthony, 

Thank you for that  

I believe there is something wrong going on in my product form liquid - 

<!-- /snippets/product-form.liquid -->

{%- assign variants_count = product.variants.size -%}
{%- assign enable_quickview_payment_button = settings.enable_payment_button -%}
{%- assign product_description_content = product.description -%}

{%- if enable_tabs_h6 -%}
    {%- assign product_description_content = product_description_content | split: '<h6>' | first -%}
{%- endif -%}

{%- comment -%}
Check if the product is on sale and set a variable to be used below.
{%- endcomment -%}
{%- assign on_sale = false -%}
{%- if product.compare_at_price > product.price -%}
    {%- assign on_sale = true -%}
{%- endif -%}

{%- comment -%}
Check if the product is sold out and set a variable to be used below.
{%- endcomment -%}
{%- assign sold_out = true -%}
{%- if product.available -%}
    {%- assign sold_out = false -%}
{%- endif -%}

{%- comment -%}
#addToCartForm is a selector for the Ajax Cart plugin
{%- endcomment -%}

{%- assign productFormID = "AddToCartForm--" | append: section.id -%}
{%- form 'product', product, class: "product-form product-form--is-loading", id: productFormID, data-swatches: enable_swatches, data-enable-button: enable_payment_button, data-enable-quickview-button: enable_quickview_payment_button -%}
    {%- comment -%} id
    Show product title only as Featured product
    {%- endcomment -%}
    {%- if template == 'index' -%}
        <h1 class="featured-product-title product-title">
            <a href="{{ product.url | within: collection }}">{{ product.title | truncate: 50 }}</a>
        </h1>
        {%- if enable_reviews or settings.enable_yotpo and settings.yotpo_ID != '' -%}
          <div class="product__badge">
            {%- if settings.enable_yotpo and settings.yotpo_ID != '' -%}
              <div class="yotpo bottomLine" data-product-id="{{ product.id }}"></div>
            {%- elsif enable_reviews -%}
              <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
            {%- endif -%}
          </div>
        {%- endif -%}
    {%- endif -%}

    {%- comment -%}
    Prices
    {%- endcomment -%}
    <h2 class="product-price" itemprop="price">
        <span id="ProductPrice">{{ current_variant.price | money }}</span>
        <span id="ComparePrice">
            {%- if current_variant.compare_at_price -%}
                <s class="reduced-price">{{ current_variant.compare_at_price | money }}</s>
            {%- endif -%}
        </span>

        <span id="UnitPrice" class="unit-price">
            {%- if current_variant.unit_price_measurement -%}
                {{ current_variant.unit_price | money }}
                {%- if current_variant.unit_price_measurement.reference_value != 1 -%}
                    {{- current_variant.unit_price_measurement.reference_value -}}
                {%- endif -%}
                {{ current_variant.unit_price_measurement.reference_unit }}
            {%- endif -%}
        </span>
    </h2>

    {%- comment -%}
    Variants
    {%- endcomment -%}
    <div class="variants-wrapper">
        {%- if variants_count > 1 -%}
            {%- if enable_swatches -%}
                {%- render 'swatch' with 'Color', product: product -%}
            {%- endif -%}
            <select name="id" data-productid="{{ product.id }}" id="productSelect--{{ section.id }}"
                    class="product-single__variants">
                {%- for variant in product.variants -%}
                    {%- if variant.available -%}
                        <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
                                data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }}
                            - {{ variant.price | money_with_currency }}</option>
                    {%- else -%}
                        <option disabled="disabled">
                            {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                        </option>
                    {%- endif -%}
                {%- endfor -%}
            </select>
        {%- else -%}
            <input name="id" data-productid="{{ product.id }}" type="hidden" value="{{ current_variant.id }}">
        {%- endif -%}

            <div class="qtydiv">                
              <label for="Quantity" class="quantity-selector">{{ 'products.product.quantity' | t }}</label>
      		 
              <button type="button" class="js-qty__adjust--minus icon-fallback-text">
              <span class="icon icon-minus custom-icon-minus" aria-hidden="true"></span>
              <span class="fallback-text">&minus;</span>
              </button>
              
			  <input type="text" id="Quantity" name="quantity" value="1" min="1" pattern="[0-9]*" class="quantity-selector quantity-input"> 
              
              <button type="button" class="js-qty__adjust--plus icon-fallback-text">
              <span class="icon icon-minus custom-icon-plus" aria-hidden="true""></span>
              <span class="fallback-text">&plus;</span>
              </button>
      </div>

    {%- comment -%}
    Buttons
    {%- endcomment -%}

    <button type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn {% if enable_payment_button %}btn--submit-light{% else %}btn--submit{% endif %} {% if sold_out %}disabled{% endif %}" {% if sold_out %}disabled{% endif %}>
        <span id="AddToCartText">
            {%- if sold_out -%}
                {{- 'products.product.sold_out' | t -}}
            {%- else -%}
                {{- 'products.product.add_to_cart' | t -}}
            {%- endif -%}
        </span>
        {%- render 'icon-loading' -%}
    </button>

    {%- if enable_payment_button or enable_quickview_payment_button -%}
        <div data-payment-button="{{ enable_payment_button }}" data-quickview-payment-button="{{ enable_quickview_payment_button }}">
            {{ form | payment_button }}
        </div>
    {%- endif -%}

    {%- comment -%}
    Product Description and product tabs
    {%- endcomment -%}
    <div class="product-description rte" itemprop="description">
        <p> {{ product_description_content }}</p>
    </div>

    {%- if template != 'index' -%}
        {%- render 'product-tabs',
            product: product, enable_reviews: enable_reviews, enable_tabs_h6: enable_tabs_h6,
            tab_1: tab_1, tab_2: tab_2, tab_3: tab_3 -%}
    {%- endif -%}

    {%- comment -%}
    Social Icons
    {%- endcomment -%}
    <div class="featured-product-social-wrapper">
        {%- if section.settings.enable_social_sharing_products -%}
            {%- render 'social-sharing', product: product  -%}
        {%- endif -%}
    </div>
{%- endform -%}

 

After 
<button type="button" class="js-qty__adjust--plus icon-fallback-text">
<span class="icon icon-minus custom-icon-plus" aria-hidden="true"">

Every <> are in red which I guess have an impact of the error message when the product is out of stock. 

 

Capture d’écran 2021-02-22 à 17.40.59.png

0 Likes