Quantity selector dropdown - Product page

Leadermar
Tourist
21 0 0

Hello, 

I am using the Palo Alto template and at the moment on my product page, customers have to fill in manually the quantity they would like to purchase. 

Is there an easy way to replace this by a dropdown menu with quantity 1, 2,3...,10? 

Here is a preview link (my website is not live yet): https://2doazzf6qo31kedi-48968269976.shopifypreview.com/products_preview 

Thank you in advance for your help. 

Regards, 

Lea. 

Replies 23 (23)

Ninthony
Shopify Partner
2329 350 1023

I think it would personally be better and probably a little easier if you had a  - and + button on either side of the quantity and allowed the user to increment. It's a little heavier on the editing side but I can provide this for you if you want. I'd need to request access to your theme. Is that something you're comfortable with?

If my solution helped you, please like it and accept it as the 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 😄
Leadermar
Tourist
21 0 0

Hello, 

Thank you for your answer. 

Ideally we would like to have a drop down but having a - and + button is better that we have at the moment 🙂 

I can copy you my product form and theme css code in here maybe? 

Thanks, 
Lea 

Ninthony
Shopify Partner
2329 350 1023

Unfortunately that wouldn't work, I wouldnt be able to see what I was doing and I would need to have the store functionality to make sure what I was doing was working.  What I would do is just duplicate your theme so that nothing happens to the original and work on the unpublished theme. I'm sure I could swap it out for a dropdown, do you have set amounts you want as options?

If my solution helped you, please like it and accept it as the 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 😄
Leadermar
Tourist
21 0 0

Sure, I understand - let me know your email address in order for me to give you access. 

Ninthony
Shopify Partner
2329 350 1023

I sent you a direct message as I'd rather not post it on the forum

If my solution helped you, please like it and accept it as the 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 😄
Leadermar
Tourist
21 0 0

Hi Ninthony, 

Apologise but I am not able to provide you access to our store. 

I managed to add the + and - on the quantity selector but nothing happen when I click on it. 

Capture d’écran 2021-02-18 à 13.40.37.png

I believe this has something to do with java script? Here is the code I am using at the moment in my product form.liquid: 

            <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" readonly="">
              
              <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>
 
And here is our theme java script code : 
 
            <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" readonly="">
              
              <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>
Would really need your help here 🙂 
 
Thank you. 
 
Regards, 
Lea. 
Leadermar
Tourist
21 0 0

Sorry just noticed that I copied twice the same code. 

Please find below my theme java script. 

Thanks, 
Lea 

 

/*============================================================================
  Table of Contents

  #General Variables
  #Sass Mixins
  #Base Styles
  #Media Queries
  #Print Styles
  #Keyframe Animations
==============================================================================*/

/*============================================================================
  #General Variables
==============================================================================*/
// Timber Colors
$colorBgBody: #fafafa;
$colorBorder: #ccc;

// Gift Card Colors
$colorGiftText: {{settings.color_body_text}}; // note, this is always on a white background
$colorGiftBorder: #ccc;

// Sizes
$gutter: 30px;

/*============================================================================
  #Sass Mixins
    - Copied from timber.scss.liquid
==============================================================================*/
.clearfix {
  &:after {
    content: "";
    display: table;
    clear: both; }
  *zoom: 1;
}

@mixin clearfix() {
  &:after {
    content: "";
    display: table;
    clear: both; }
  *zoom: 1;
}

@mixin prefix($property, $value) {
  -webkit-#{$property}: #{$value};
  -moz-#{$property}: #{$value};
  -ms-#{$property}: #{$value};
  -o-#{$property}: #{$value};
  #{$property}: #{$value};
}

/*============================================================================
  #Base Styles
==============================================================================*/
header, nav, section, article, aside, footer {
  display:block;
}

.template-giftcard,
.template-giftcard body {
  background: $colorBgBody;

  a {
    text-decoration: none;
  }
}

.template-giftcard .wrapper {
  max-width: 588px;

  img, object, iframe {
    max-width: 100%;
  }
}

.giftcard-header {
  padding: ($gutter * 2) 0;
  font-size: 1em;
  text-align: center;
  -webkit-animation: fadein 0.5s ease-in-out both 0.4s;
  animation: fadein 0.5s ease-in-out both 0.4s;
}

.shop-url {
  display: none;
}

.giftcard {
  -webkit-animation: slideup 0.8s ease-in-out;
  animation: slideup 0.8s ease-in-out
}

.giftcard__border {
  padding: 1em;
  -webkit-animation: container-slide 0.8s ease-in-out;
  animation: container-slide 0.8s ease-in-out
}

.giftcard__content {
  @include clearfix;
  background-color: #fff;
  color: $colorGiftText;
  border: 1px solid darken($colorGiftBorder, 5%);
  -webkit-animation: cardslide 0.8s ease-in-out;
  animation: cardslide 0.8s ease-in-out;
}

.giftcard__header {
  @include clearfix;
  border-bottom: 1px solid $colorBorder;
  padding: $gutter / 2;
}

.giftcard__header img {
  margin-left: auto;
  margin-right: auto;
  display: block;
  padding-bottom: 10px;
}

.giftcard__title {
  margin-bottom: 0;
  color: #555;
}

.giftcard__tag {
  display: block;
  float: right;
  background-color: lighten($colorGiftText, 10%);
  border: 1px solid transparent;
  color: #fff;
  padding: $gutter / 3;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1;
}

.giftcard__tag--active {
  background: transparent;
  color: $colorGiftText;
  border: 1px solid lighten($colorGiftText, 20%);
}

.giftcard__wrap {
  position: relative;
  margin: ($gutter / 2) ($gutter / 2) $gutter;

  img {
    position: relative;
    display: block;
    z-index: 2;
  }

  &:before,
  &:after {
    content: "";
    position: absolute;
    width: 47px;
    height: 47px;
    z-index: 3;
  }

  &:before {
    top: -1px;
    left: -1px;
  }

  &:after {
    bottom: -1px;
    right: -1px;
  }

  .lt-ie9 &:before,
  .lt-ie9 &:after {
    display: none;
  }
}

.giftcard__code {
  position: absolute;
  bottom: $gutter;
  text-align: center;
  width: 100%;
  z-index: 50;
}

.giftcard__code--medium {
  font-size: .875em;
}

.giftcard__code--small {
  font-size: .75em;
}

.giftcard__code__inner {
  display: inline-block;
  vertical-align: baseline;
  background-color: #fff;
  padding: .5em;
  max-width: 450px;
  -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1);

  .giftcard__code--small & {
    overflow: auto;
  }
}

.giftcard__code__text {
  font-weight: 400;
  font-size: 1.875em;
  text-transform: uppercase;
  padding: .4em .5em;
  display: inline-block;
  vertical-align: baseline;
  color: #777;
  line-height: 1;

  .disabled & {
    color: #999;
    text-decoration: line-through;
  }
}

.giftcard__amount {
  position: absolute;
  top: 0;
  right: 0;
  color: #fff;
  font-size: 2.75em;
  line-height: 1.2;
  padding: 10px;
  z-index: 50;

  strong {
    display: block;
    text-shadow: 3px 3px 0 rgba(0,0,0,0.1);
  }
}

.giftcard__amount--medium {
  font-size: 2em;
}

.tooltip {
  display: block;
  position: absolute;
  top: -50%;
  right: 50%;
  margin-top: 16px;
  z-index: 3;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  -webkit-animation: popup 0.5s ease-in-out both 0.7s;
  animation: popup 0.5s ease-in-out both 0.7s;

  &:before {
    content: "";
    display: block;
    position: absolute;
    left: 100%;
    bottom: 0;
    width: 0;
    height: 0;
    margin-left: -5px;
    margin-bottom: -5px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 5px solid #333;
    border-top: 5px solid rgba(51,51,51,0.9);
  }
}

.tooltip__label {
  display: block;
  position: relative;
  right: -50%;
  border: none;
  background: #333;
  background: rgba(51,51,51,0.9);
  min-height: 14px;
  font-weight: 400;
  font-size: 12px;
  text-decoration: none;
  line-height: 16px;
  text-shadow: none;
  padding: .5em .75em;
  margin-left: .25em;

  small {
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #b3b3b3;
    font-size: .875em;
  }
}

.giftcard__instructions {
  text-align: center;
  font-size: 12px;
  margin: 0 ($gutter / 2) $gutter;
}


.giftcard__actions {
  position: relative;
  border-top: 1px solid $colorBorder;
  padding: $gutter ($gutter / 2);
  text-align: center;
  overflow: hidden;
}

.action-link {
  position: absolute;
  left: $gutter / 2;
  top: 50%;
  font-size: 0.875em;
  font-weight: bold;
  display: block;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: lighten($colorGiftText, 10%);
  margin-top: -10px;

  &:hover,
  &:focus {
    color: $colorGiftText;
  }
}

.action-link__print {
  display: inline-block;
  vertical-align: baseline;
  width: 17px;
  height: 17px;
  vertical-align: middle;
  margin-right: 5px;
  opacity: 0.25;
  background: {
    image: url('//cdn.shopify.com/s/assets/gift-card/icon-print-164daa1ae32d10d1f9b83ac21b6f2c70.png');
    repeat: no-repeat;
    position: 0 0;
  }

  .svg & {
    background-image: url('//cdn.shopify.com/s/assets/gift-card/icon-print-6a10b2fb86d223b8c783c9696eaf4c31.svg');
  }

  .action-link:hover & {
    opacity: 0.4;
  }
}

.giftcard__footer {
  text-align: center;
  padding: ($gutter * 2) 0;
  -webkit-animation: fadein 0.5s ease-in-out both 0.4s;
  animation: fadein 0.5s ease-in-out both 0.4s
}


.giftcard__icon {
  display: none;

  .svg & {
    display: inline-block;
    vertical-align: baseline;
  }
}

#QrCode {
  img {
    margin: 0 auto $gutter;
  }
}

#apple-wallet-badge {
  display: block;
  margin: 0 auto 20px;
}


/*============================================================================
  #Media Queries
==============================================================================*/

/*================ Medium-down width ================*/
@media screen and (max-width: 580px) {
  .giftcard {
    font-size: 12px;
  }

  .giftcard-header {
    padding: $gutter 0;
  }

  .header-logo {
    font-size: 2em;
  }

  .giftcard__border {
    padding: $gutter / 2;
  }

  .giftcard__actions {
    padding: $gutter / 2;
  }

  .giftcard__actions .btn {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .action-link {
    display: none;
  }

  .wrapper {padding:0px;}
  .giftcard__amount {font-size:2.5em}
}

/*================ Small width ================*/
@media screen and (max-width: 400px) {
  .giftcard__amount strong {
    text-shadow: 2px 2px 0 rgba(0,0,0,0.1);
  }

  .giftcard__wrap:before,
  .giftcard__wrap:after {
    display: none;
  }

  .giftcard__code {
    font-size: .75em;
  }

  .giftcard__code--medium {
    font-size: .65em;
  }

  .giftcard__code--small {
    font-size: .55em;
  }
}


/*================ Small height ================*/
@media screen and (max-height: 800px) {
  .header-logo img {
    max-height: 90px;
  }
}


/*============================================================================
  #Print Styles
==============================================================================*/
@media print {
  @Page {
    margin: 0.5cm;
  }

  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }

  h2, h3 {
    page-break-after: avoid;
  }

  html, body {
    background-color: #fff;
  }

  .giftcard-header {
    padding: 10px 0;
  }

  .giftcard__content,
  .giftcard__border {
    border: 0 none;
  }

  .giftcard__actions,
  .giftcard__wrap:before,
  .giftcard__wrap:after,
  .tooltip {
    display: none;
  }

  .giftcard__title {
    float: none;
    text-align: center;
  }

  .giftcard__code__text {
    color: #555;
  }

  .shop-url {
    display: block;
  }

  .logo {
    color: #58686F;
  }
}

 

 

Ninthony
Shopify Partner
2329 350 1023

That's CSS lol. It doesnt matter, can you post another preview link? I may be able to help now that you already have the buttons in there.

If my solution helped you, please like it and accept it as the 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 😄
Leadermar
Tourist
21 0 0

I copied the code of the gift card instead, sorry about that... Would be simple with a preview link indeed. 

Here it is: https://ojz9ff295edmq1tw-48968269976.shopifypreview.com/products/saladier-en-ceramique-bazile

Thank you for your help! 

Lea. 

Ninthony
Shopify Partner
2329 350 1023

 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 it and accept it as the 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 😄
Leadermar
Tourist
21 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> 

 

 

Ninthony
Shopify Partner
2329 350 1023

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 it and accept it as the 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 😄
Leadermar
Tourist
21 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. 

Ninthony
Shopify Partner
2329 350 1023

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 it and accept it as the 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 😄
Leadermar
Tourist
21 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. 

Ninthony
Shopify Partner
2329 350 1023

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 it and accept it as the 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 😄
Leadermar
Tourist
21 0 0

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

This one should works ! 

🙂 

Ninthony
Shopify Partner
2329 350 1023

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 it and accept it as the 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 😄
Leadermar
Tourist
21 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

Ninthony
Shopify Partner
2329 350 1023
<span class="icon icon-minus custom-icon-plus" aria-hidden="true"">

 

There's an extra quotation at the end of that element. Just delete that.

If my solution helped you, please like it and accept it as the 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 😄
Leadermar
Tourist
21 0 0

Ah yes indeed! However error message for out of stock is still not displaying 😞 

Ninthony
Shopify Partner
2329 350 1023

Yeah I'm not going to be able to help you out with that unless you give me access to your themes. It requires mixing liquid and javascript and I don't want to keep going back and fourth trying to get this to work. So if you want it done you can let me know and I can request access to your store or you can add me as staff.

If my solution helped you, please like it and accept it as the 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 😄
Leadermar
Tourist
21 0 0

I am going to see what I can do - will get back to you ASAP. Thanks!