How to limit Quantity Box to the stock available?

New Member
5 0 0

I want to limit the quantity select box with the amount of inventory of the selected product option. How do I do that?

 

 

Here's my code:

 

<link rel="stylesheet" type="text/css" href="{{ 'print.css' | asset_url }}" media="print" />

<center>
<div id="printOnly" style="text-align: center;top:0; width:60%;margin-bottom: -10000px; margin-top: -250px">
{% include 'print-product' %}
</div>
</center>

<div class="container offset-0 product-page">
  <div class="row">
    <div class="{% if settings.product_header_type != 'horizontal' or settings.product_content_size == "medium" %}col-md-7{% else %}col-md-5{% endif %} hidden-xs">
      {% include 'product-page-gallery' type: "default" %}
    </div>
    <div class="{% if settings.product_header_type != 'horizontal' or settings.product_content_size == "medium" %}col-md-5{% else %}col-md-7{% endif %}">
      {% include 'product-page-gallery' type: "mobile" %}
      <div class="product-info">

        {% unless product_meta.countdown == blank %}
        <div class="countdown-promo">
          <div class="countdown" data-date="{{ product_meta.countdown }}"></div>
        </div>
        {% endunless %}

        {% if settings.show_product_sku or settings.show_product_quantity %}
        {% if product_meta.countdown != blank and product.available %}<div class="wrapper">{% endif %}
        <div class="add-info">
          {% if settings.show_product_sku %}
          <div class="sku pull-left">
            <span class="font-weight-medium color-defaulttext2">{{ 'products.product.sku' | t }}</span> <span>{{ product.selected_or_first_available_variant.sku }}</span>
          </div>
          {% endif %}
          {% if settings.show_product_quantity %}
          <div class="availability pull-left">
            <span class="font-weight-medium color-defaulttext2">{{ 'products.product.availability' | t }}</span>
            {% if product.available %}
            <span class="color-base stock_quantity hide"></span> <span class="color-base in_stock hide">{{ 'products.product.in_stock' | t }}</span> <span class="color-base many_in_stock hide">{{ 'products.product.many_in_stock' | t }}</span> <span class="color-red sold_out hide">{{ "products.product.sold_out" | t }}</span>
            {% else %}
            <span class="color-red sold_out">{{ "products.product.sold_out" | t }}</span>
            {% endif %}
          </div>
          {% endif %}
        </div>
        {% if product_meta.countdown != blank and product.available %}</div>{% endif %}
        {% endif %}

        <h1 class="title" itemprop="name">{{ product.title }}</h1>

        {% unless settings.catalogue_mode %}
        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
          <meta itemprop="priceCurrency" content="{{ shop.currency }}">

          {% if sale_on %}
          <div class="price" itemprop="price" content="{{ product.selected_or_first_available_variant.price | divided_by: 100.00 }}"><span class="new-price">{{ product.selected_or_first_available_variant.price | money }}</span><span class="old-price">{{ product.selected_or_first_available_variant.compare_at_price | money }}</span></div>
          {% else %}
          <div class="price" itemprop="price" content="{{ product.selected_or_first_available_variant.price | divided_by: 100.00 }}"><span>{{ product.selected_or_first_available_variant.price | money }}</span><span class="old-price hide"></span></div>
          {% endif %}
        </div>
        {% endunless %}

        {% if settings.show_product_vendor or settings.show_product_type or settings.show_product_barcode %}
        <div class="add-info">
          <ul class="productvendorsmallinfo">
            {% if settings.show_product_vendor %}<li><span itemprop="brand">{{ "products.product.vendor" | t }}</span> {{ product.vendor }}</li>{% endif %}
            {% if settings.show_product_type and product.type != '' %}<li><span>{{ "products.product.type" | t }}</span> {{ product.type }}</li>{% endif %}
            {% if settings.show_product_barcode %}<li><span>{{ "products.product.barcode" | t }}</span> <span class="barcode"></span></li>{% endif %}
          </ul>
        </div>
        {% endif %}

        {% unless settings.catalogue_mode %}
        {% if settings.show_product_rating %}
        <div class="review">
          <div class="rating">
            <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
          </div>
        </div>
        {% endif %}
        {% endunless %}

        {% unless product_meta.custom_html == blank %}
        <div class="description">
          <div class="text">{{ product_meta.custom_html }}</div>
        </div>
        {% endunless %}

        <div class="swatches-container"></div>

        {% comment %} Bold POV2: add placeholder for the options {% endcomment %}
	    <div class="bold_options"></div>

        {% unless settings.catalogue_mode %}
        {% if product.available %}
        <div class="wrapper">
          <div class="pull-left"><label class="qty-label">{{ 'products.product.quantity' | t }}</label></div>
          <div class="pull-left">
            <div class="style-2 input-counter">
              <span class="minus-btn"></span>
              {% comment %} Bold POV2: added name=quantity {% endcomment %}
              <input type="text" value="1" size="99" name="quantity"/>
              <span class="plus-btn"></span>
            </div>
          </div>
        </div>

        <div class="wrapper">
          <div class="pull-left add-to-cart-btn-prod-page">
            {% comment %} Bold POV2: add type="submit" so PO can clone the add to cart button {% endcomment %}
            <a href="#" type="submit" class="btn btn-lg btn-addtocart addtocart-js">{{ "products.general.add_to_cart_html" | t }}</a>
          </div><!-- include 'wishlist-button-product' with '{{ product.id }}' -->




        </div>
        {% else %}
        <div class="wrapper">
          <div class="pull-left">
            <a href="#" class="btn btn-lg disable">{{ "products.general.unavailable" | t }}</a>
          </div>
        </div>
        {% endif %}
        {% endunless %}
      </div>

      {% if settings.show_sharingtool %}<div class="wrapper">
      <div class="socialbuttons">
        <div class="addthis_inline_share_toolbox_bwkk" style="margin-top: 20px;"></div>
      {% include 'addthis' %}
        <span>
        <a style="padding-right: 45px" class="social-share-email" title="Email a friend" href="javascript:window.location='mailto:?subject=Singhvis &body=I thought you might find this interesting:   ' + window.location;" >
      <img class="emailicon" width="40px" src="https://cdn.shopify.com/s/files/1/1678/6181/files/email.png?8449504750535789186" />
          </a>
        <a class="social-share-print" href="#!" onclick="window.print();" title="Print">
      <img class="printicon" width="40px" src="https://cdn.shopify.com/s/files/1/1678/6181/files/print.png?16071124934814270771" />
          </a></span>
      </div>



      </div>{% endif %}
    </div>
  </div>
</div>

<script type="text/javascript">
var addthis_config = addthis_config||{};
    addthis_config.data_track_addressbar = false;
    addthis_config.data_track_clickback = false;
</script>


<script>
  $(function() {
    function productPageJsonLoaded(json_data) {
      var view = Boolean({{ settings.variant_combobox }}) ? 'viewSelect' : 'viewButtons';
      var group1 = new SwatchesConstructor(json_data, {contentParent: '.swatches-container', viewDesign:view, enableHistoryState: true, callback: productPageVariant, externalImagesObject: texture_obj, externalColors: colors_value, colorWithBorder: color_with_border });
      json_data = null;
      group1 = null;
    };

    function productPageVariant(variant, product){
      var _parent = $('.product-page .product-info');
      var _swatch = _parent.find('.swatches-container');
      swatchVariantHandler(_parent, variant);

      var img_id = variant.featured_image ? variant.featured_image.id : 'none';
      var target = img_id == 'none' ? $("[data-slick-index=0]").children() : $("[data-target="+img_id+"]");
      var num = target.last().parent().attr('data-slick-index');

      var $container = $("#smallGallery");
      setDefaultSlider(num, $container, target);
      $container = $('.slider-scroll-product');
      setScrollSlider(num, $container);

      $container = $('.mobileGallery-product');
      if(num && $container.length) {
        $container.slick('slickGoTo', num, true);
      }

      addToCartHandler.initFormAddToCartButton(variant.id, _parent, _swatch);
    }
    function setDefaultSlider(num, $container, target){
      if(!(num && $container.length)) return false;
      $container.slick('slickGoTo', num, true);
      $container.find('.zoomGalleryActive').removeClass('zoomGalleryActive');
      target.addClass('zoomGalleryActive');

      $(".zoom-product").attr('src', target.attr('data-image')).attr('data-zoom-image', target.attr('data-zoom-image'));

      !elevateZoomWidget.checkNoZoom() && elevateZoomWidget.configureZoomImage();
    }
    function setScrollSlider(num, $container){
      if(!(num && $container.length)) return false;
      $container.slick('slickGoTo', num, true);
    }
    Shopify.getProduct('{{ product.handle }}', productPageJsonLoaded);
                       });
</script>

Thanks 

0 Likes
New Member
4 0 0

Hi,

did you find a solution?

 

best regards

Kevin

0 Likes