Cách tạo các button tăng giảm số lượng cho theme blogspot

Các button tăng giảm số lượng là một trong những yếu tố không thể thiếu đối với theme bán hàng cho dù là theme wordpress hay blogspot. Trang web bán hàng cần các button số lượng hiển thị khi thêm sản phẩm vào giỏ hàng và cập nhật sản phẩm tại trang giỏ hàng

Button tăng giảm số lượng bao gồm nút giảm (-) bên trái, nút tăng (+) bên phải và ở giữa là ô hiển thị số => Cần 2 button tăng giảm ở hai bên (có thể thay bằng thẻ div) và 1 thẻ input ở giữa hiển thị số hoặc có thể sử dụng cả 3 thẻ input cũng được.

Đầu tiên tạo button, thêm đoạn code html vào vị trí cần hiển thị

<div class="buttons_added">

  <input class="minus is-form" type="button" value="-">

  <input aria-label="quantity" class="input-qty" max="Số tối đa" min="Số tối thiểu" name="" type="number" value="">

  <input class="plus is-form" type="button" value="+">

</div>

Hiển thị

Lưu ý về số lượng tối thiểu và số lượng tối đa trong thẻ input hiển thị, ví dụ

<input aria-label="quantity" class="input-qty" max="10" min="1" name="" type="number" value="1">

=> Số lượng tăng tối đa bằng 10 và tối thiểu bằng 1

Tiếp theo, viết css cho giao diện button

<b:tag name='style'>/* <![CDATA[ */

.buttons_added {

    opacity:1;

    display:inline-block;

    display:-ms-inline-flexbox;

    display:inline-flex;

    white-space:nowrap;

    vertical-align:top;

}

.is-form {

    overflow:hidden;

    position:relative;

    background-color:#f9f9f9;

    height:2.2rem;

    width:1.9rem;

    padding:0;

    text-shadow:1px 1px 1px #fff;

    border:1px solid #ddd;

}

.is-form:focus,.input-text:focus {

    outline:none;

}

.is-form.minus {

    border-radius:4px 0 0 4px;

}

.is-form.plus {

    border-radius:0 4px 4px 0;

}

.input-qty {

    background-color:#fff;

    height:2.2rem;

    text-align:center;

    font-size:1rem;

    display:inline-block;

    vertical-align:top;

    margin:0;

    border-top:1px solid #ddd;

    border-bottom:1px solid #ddd;

    border-left:0;

    border-right:0;

    padding:0;

}

.input-qty::-webkit-outer-spin-button,.input-qty::-webkit-inner-spin-button {

    -webkit-appearance:none;

    margin:0;

}

/* ]]> */</b:tag>

Bước cuối, viết script tăng giảm số lượng khi click vào button, mình viết bằng jquery

<script>//<![CDATA[

$('input.input-qty').each(function() {

  var $this = $(this),

    qty = $this.parent().find('.is-form'),

    min = Number($this.attr('min')),

    max = Number($this.attr('max'))

  if (min == 0) {

    var d = 0

  } else d = min

  $(qty).on('click', function() {

    if ($(this).hasClass('minus')) {

      if (d > min) d += -1

    } else if ($(this).hasClass('plus')) {

      var x = Number($this.val()) + 1

      if (x <= max) d += 1

    }

    $this.attr('value', d).val(d)

  })

})

//]]></script>

Test demo