Melhorar Seletor de Quantidade – Script Warehouse

2 meses ago,  fernando

Script 

{%- if product.template_suffix != 'contact' -%}
{%- if section.settings.show_quantity_selector -%}
  <div class="bloco-seletor-quantidade">
    <label for="{{ section.id }}-{{ product.id }}-quantity" class="product-form__info-title text--strong">{{ 'product.form.quantity' | t }}:</label>
    <div class="product-form__info-content">        
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <div id="myform2" method="POST" action="#" class="seletor-quantidade">
        <input type="button" value="-" class="qtyminus" field="quantity">
        <input type="text" name="quantity" value="1" class="qty">
        <input type="button" value="+" class="qtyplus" field="quantity">
      </div>         
    </div>
  </div>
{%- else -%}<input type="hidden" name="quantity" value="1">{%- endif -%}{%- endif -%}

<script>
  $(document).ready(function() {var $buttonPlus = $('.qtyplus');var $buttonMin = $('.qtyminus');var $quantity = $('.qty');
  $buttonPlus.click(function() {$quantity.val(parseInt($quantity.val()) + 1).trigger('input');});
  $buttonMin.click(function() {$quantity.val(Math.max(parseInt($quantity.val()) - 1, 0)).trigger('input');});})
</script>
<style>
input.qtyplus, input.qtyminus {width: 40px; height: 40px; line-height: 0px; vertical-align: middle; color: #1c1b1b; font-weight: 900;font-size: 24px;border-radius: 3px;background: rgba(0, 0, 0, 0);border: none;text-align: center;box-sizing: border-box;padding: 0;margin: 0;}
.qty {font-weight: 600;width: 55px;height: 40px;text-align: center;border: none;background: rgba(0, 0, 0, 0);margin: 0;cursor: default;-webkit-appearance: none;display: inline-block;vertical-align: middle;}
.product-form__info-item--quantity {display: none;}
.seletor-quantidade {background-color: #f9f9f9;display: inline-block;border-radius: 15px; border: 1px solid rgba(0, 0, 0, 0.3);}
.bloco-seletor-quantidade {display: inline-block;margin-bottom: 20px!important;}
</style>
Esse tutorial foi util?

Related articles