How to put quantity on header cart

PamDigital
Excursionist
42 2 7

Hey there,

I want to put quantity on header cart popup. I can put the quantity but it doesn't effect without js. 

This is the code.  Do you know what should i use as js ? 

<div class="quantity-selector">
    <label class="control-label" for="Quantity">{{ 'products.product.quantity' | t }}:</label>
    <input type="text" name="quantity" value="1" size="2" id="Quantity" onkeyup="updatecartsticky(1)" class="form-control" /> 
    </div>

  

0 Likes
ChoosiZon
Trailblazer
219 39 66

 

something like this?Then you define var x and maybe set an event

 

 

<script>
function myFunction() {
  var x = document.getElementById("myInput").value;
  document.getElementById('Quantity').value = x;
}
</script>

 

 

 

PamDigital
Excursionist
42 2 7

Hello @ChoosiZon, thank you for your answer

So you mean like;

<script>
function myFunction() {
  var  $quantityElements = $('.quantity-selector, label + .js-qty');
  document.getElementById("myInput").value;
  document.getElementById('Quantity').value = x;
}
</script>



My js on product page is like this btw;

<script>

  $(document).ready(function() {

    // vertical thumbs on product page
    {% assign product_page_layout =  section.settings.product_page_layout | strip %}
    {% if product_page_layout contains 'vertical_thumbs' %}
    $('.bxslider').bxSlider({
      mode: 'vertical',
      slideMargin: 5,
      infiniteLoop: false,
      hideControlOnEnd: true,
      adaptiveWidth: true,
      minSlides: 6,
      moveSlides: 1
    }); 
    {% endif %}
    {% if product_page_layout == 'sticky_layout' %}
    if ($(window).width() >= 768  ) {
      $("#desc").stick_in_parent();
    }
    {% endif %}

    // review link to reviews
    var reviewsTimeout = setInterval(function() {
      if ($('.product-info-main .spr-badge-caption').length > 0) {
        $('.product-info-main .spr-badge-caption').on('click', function() {
          $('html,body').animate({
            scrollTop: $('.nav-tabs li:last').offset().top
          },'400');
          $('.nav-tabs a[href="#reviews"]').tab('show');
        });
        clearInterval(reviewsTimeout);
      }
    }, 1000);

  });

  // Pre-loading product images, to avoid a lag when a thumbnail is clicked, or
  // when a variant is selected that has a variant image.
  Shopify.Image.preload({{ product.images | json }}, '{{ product_img_size }}');

                        var selectCallback = function(variant, selector) {

    var $addToCart = $('#button-cart'),
        $addToCartBuy = $('#button-cart-buy'),
        $addToCartSticky = $('#button-cart-sticky'),
        $productPrice = $('#productPrice'),
        $comparePrice = $('#comparePrice'),
        $variantQuantity = $('#variantQuantity'),
        $quantityElements = $('.quantity-selector, label + .js-qty'),
        $addToCartText = $('#button-cart'),
        $featuredImage = $('#productPhotoImg');
    if (variant) {
      // Update variant image, if one is set
      // Call timber.switchImage function in shop.js
      if (variant.featured_image) {
        var newImg = variant.featured_image,
            el = $featuredImage[0];
        $(function() {
          Shopify.Image.switchImage(newImg, el, timber.switchImage);
          {% if section.settings.product_sticky_layout == true %}
          $('body,html').animate({scrollTop: 125}, 800);
          return false;
          {% endif %}
        });
      }

      // Select a valid variant if available
      if (variant.available) {
        // We have a valid product variant, so enable the submit button
        $addToCart.removeClass('disabled').prop('disabled', false);
        $addToCartBuy.removeClass('disabled').prop('disabled', false);
        $addToCartSticky.removeClass('disabled').prop('disabled', false);
        {% if template == 'product.pre-order' %}
        $addToCartText.html({{ 'products.product.pre_order' | t | json }});
        $addToCartSticky.html({{ 'products.product.pre_order' | t | json }});
        $addToCartBuy.html({{ 'products.product.pre_order' | t | json }});
        {% else %}
        $addToCartText.html({{ 'products.product.add_to_cart' | t | json }});
        $addToCartSticky.html({{ 'products.product.add_to_cart' | t | json }});
        $addToCartBuy.html({{ 'products.product.buy_now' | t | json }});
        {% endif %}
        $quantityElements.show();
        var inventory_level = (inv_qty[ variant.id ]);
        // Show how many items are left, if below 10
        {% if section.settings.product_quantity_message %}
        if (variant.inventory_management) {
          if (inventory_level < 10 && inventory_level > 0) {
            $variantQuantity.html({{ 'products.product.only_left' | t: count: '1' | json }}.replace('1', inventory_level)).addClass('is-visible');
          } else if (inventory_level <= 0 && variant.incoming) {
            $variantQuantity.html({{ 'products.product.will_not_ship_until' | t: date: '[date]' | json }}.replace('[date]', variant.next_incoming_date)).addClass('is-visible');
          } else {
            $variantQuantity.removeClass('is-visible');
          }
        }
        else {
          $variantQuantity.removeClass('is-visible');
        }
        {% endif %}
        if (variant.inventory_management) {
          if (inventory_level >= 10 ) {
            $('.ex-text').html('{{ 'products.product.in_stock' | t }}').css("color", "#66aa00");
                               } else if (inventory_level < 10 && inventory_level > 0) {
              $('.ex-text').html(inventory_level +' {{ 'products.product.in_stock' | t }}').css("color", "orange");
                                 } else {
                                 $('.ex-text').html('{{ 'products.product.out_stock' | t }}').css("color", "red");
                                                    }
                                                    }
                                                    } else {
                                                    // Variant is sold out, disable the submit button
                                                    $addToCart.addClass('disabled').prop('disabled', true);
              $addToCartBuy.addClass('disabled').prop('disabled', true);
              $addToCartSticky.addClass('disabled').prop('disabled', true);
              $addToCartText.html({{ 'products.product.sold_out' | t | json }});
              $addToCartBuy.html({{ 'products.product.sold_out' | t | json }});
              $addToCartSticky.html({{ 'products.product.sold_out' | t | json }});
              $variantQuantity.removeClass('is-visible');
              $('.ex-text').html('{{ 'products.product.out_stock' | t }}').css("color", "red");
                                 if (variant.incoming) {
                $variantQuantity.html({{ 'products.product.will_be_in_stock_after' | t: date: '[date]' | json }}.replace('[date]', variant.next_incoming_date)).addClass('is-visible');
              }
              else {
                $variantQuantity.addClass('hide');
              }
              $quantityElements.hide();
            }

            // Regardless of stock, update the product price
            Shopify.money_format = '{{shop.money_format }}'; 

            //var customPrice = timber.formatMoney( Shopify.formatMoney(variant.price,Shopify.money_format) );
            var a11yPrice = Shopify.formatMoney(variant.price, Shopify.money_format);
            // var customPriceFormat = ' <span aria-hidden="true">' + customPrice + '</span>';
            var customPriceFormat = ' <span class="visually-hidden">' + a11yPrice + '</span>';
            $productPrice.html(customPriceFormat);

            // Also update and show the product's compare price if necessary
            {% if settings.product_show_compare_at_price %}
            if ( variant.compare_at_price > variant.price ) {
              var a11yComparePrice = Shopify.formatMoney(variant.compare_at_price, Shopify.money_format);
              comparePriceFormat = ' <span class="visually-hidden">' + a11yComparePrice + '</span>';
              $comparePrice.html(comparePriceFormat);
              $comparePrice.show();
            } else {
              $comparePrice.hide();
            }
            {% endif %}


          } else {
            // The variant doesn't exist, disable submit button.
            // This may be an error or notice that a specific variant is not available.
            $addToCart.addClass('disabled').prop('disabled', true);
            $addToCartBuy.addClass('disabled').prop('disabled', true);
            $addToCartSticky.addClass('disabled').prop('disabled', true);
            $addToCartText.html({{ 'products.product.unavailable' | t | json }});
            $addToCartBuy.html({{ 'products.product.unavailable' | t | json }});
            $addToCartSticky.html({{ 'products.product.unavailable' | t | json }});
            $variantQuantity.removeClass('is-visible');
            $quantityElements.hide();
          }
          if (variant && variant.featured_image) {
            var originalImage = $(".cloud-zoom.main-image img");
            var newImage = variant.featured_image;
            var element = originalImage[0];
            Shopify.Image.switchImage(newImage, element, function (newImageSizedSrc, newImage, element) {
              $(element).parents('a').attr('href', newImageSizedSrc);
              $(element).attr('src', newImageSizedSrc);              
              $('#light-box-position').val(newImage.position);
              $('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();

            });
          }
          // BEGIN SWATCHES
          if (variant) {
            var form = $('#' + selector.domIdPrefix).closest('form');
            for (var i=0,length=variant.options.length; i<length; i++) {
              var radioButton = form.find('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]');
              if (radioButton.size()) {
                radioButton.get(0).checked = true;
              }
            }
          }
          // END SWATCHES
          {% if section.settings.product_show_sku %}
          // SHOW/HIDE SKU
          if (variant) {
            $('.variant-sku').text(variant.sku);
            if(variant.sku != '')
              $('.skuvariant').show();
            else 
              $('.skuvariant').hide();
          } else {
            $('.variant-sku').empty();
          }
          {% endif %}
          {% if section.settings.product_show_barcode %}
          // SHOW/HIDE Barcode
          if (variant) {
            $('.variant-barcode').text(variant.barcode);
            if(variant.barcode != '')
              $('.barcodevariant').show();
            else 
              $('.barcodevariant').hide();
          } else {
            $('.variant-barcode').empty();
          }
          {% endif %}
          // Sticky Add to cart
          if (variant) {
            var select1 = $('#form_buy').find('select[name="productSelect"]').val();
            $('#form_buy_sticky').find('select[name="id"]').val($('#form_buy').find('select[name="id"]').val());

            $('#form_buy_sticky').find('.special-price .price').html(customPriceFormat);
            {% if settings.product_show_compare_at_price %}
            if ( variant.compare_at_price > variant.price ) {
              $('#form_buy_sticky').find('.old-price .price').html(comparePriceFormat);
            }
            {% endif %}

            if (variant.featured_image) {
              var originalImageSticky = $("#form_buy_sticky img");
              var newImage = variant.featured_image;
              var element = originalImageSticky[0];
              Shopify.Image.switchImage(newImage, element, function (newImageSizedSrc, newImage, element) {
                $(element).parents('a').attr('href', newImageSizedSrc);
                $(element).attr('src', newImageSizedSrc);

              });
            }
          }

          {% if settings.show_multiple_currencies %}
          var defaultCurrency = '{{ settings.default_currency | default: shop.currency }}';
          var shopCurrency = '{{ shop.currency }}';
          var cookieCurrency = Currency.cookie.read();
          if (cookieCurrency == null) {
            Currency.convertAll(shopCurrency, defaultCurrency);
          } else {
            Currency.convertAll(shopCurrency, cookieCurrency);
          }    
          {% endif %}

        };

        jQuery(function($) {
          var product = {{ product | json }};
          {% if section.settings.product_quantity_message %}
          {% for variant in product.variants %}
          product.variants[{{ forloop.index0}}].incoming = {{ variant.incoming | default: false }};
          product.variants[{{ forloop.index0}}].next_incoming_date = {{ variant.next_incoming_date | date: format: 'month_day_year' | json }};
          {% endfor %}
          {% endif %}

          new Shopify.OptionSelectors('productSelect', {
            product: product,
            onVariantSelected: selectCallback,
            enableHistoryState: true
          });

          // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
          {% if product.options.size == 1 and product.options.first != 'Title' %}
          $('.selector-wrapper:eq(0)').prepend('<label>{{ product.options.first | escape }}</label>');
                                               {% endif %}
                                               /* Hide selectors if we only have 1 variant and its title contains 'Default'. */
                                               {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
                                               $('.selector-wrapper').hide();
          // Sticky Add to cart
          $("#title").removeClass("hidden-sm hidden-xs").addClass( "col-7" );
          {% else %}
          $('#variantBreak').removeClass('hr--clear');
          {% endif %}
          //$('.selector-wrapper').hide();
        }); 
</script>

 

0 Likes
ChoosiZon
Trailblazer
219 39 66

Screenshot 2021-02-15 020105.jpg

you mean this part you are building?I think you need build another set js for this.And it is much more complicated than i thought

PamDigital
Excursionist
42 2 7

cart.JPG

 

hey there @ChoosiZon 

Actually I want to add here. I couldn't manage to add quantity here for couple of days. 

0 Likes