Главная Посты Курсы Связь О сайте

Поле "количество товаров" для интернет-магазина средствами JavaScript



Здравствуйте! Сегодня разберём, как сделать поле "количество товаров" для интернет-магазина с помощью JavaScript. Данное поле вы могли видеть на многих интернет-магазинах. У него есть кнопки: приплюсовать единицу и вычесть единицу. Наличие такого функционала не только делает использование ресурса более удобным, но и говорит о некой солидности сайта. Плюс подталкивает покупателя взять две, три единицы данного товара.


Вот, как выглядит это поле:

-
+


Для начала создадим HTML каркас:


<div class='count_box'>
<div class="minus">-</div>
<input class='inp_price' type="text" value="1"/>
<div class="plus">+</div>
</div>




Добавим CSS стили:

    .minus {
        cursor: pointer;
        width:15px;
        float:left;
        text-align:center;
        
    }
    .plus {
        cursor: pointer;
        width:15px;
        float:right;
        text-align:center;
    }
    
    .inp_price {
        width:40px;
        text-align:center;
        border:none;
        border-left:1px solid gray;
        border-right:1px solid gray;
    }
    
    .count_box {
        width:70px;
        border:1px solid gray;  
    }

Интерактивную часть поля для количество товаров будем делать c помощью jquery.


$(document).ready(function() {
    $('.minus').click(function () {
        var $input = $(this).parent().find('input');
        var count = parseInt($input.val()) - 1;
        count = count < 1 ? 1 : count;
        $input.val(count);
        $input.change();
        return false;
    });
    $('.plus').click(function () {
        var $input = $(this).parent().find('input');
        $input.val(parseInt($input.val()) + 1);
        $input.change();
        return false;
    });
    
  
});	


Основной идей интерактивной части заключается в том, что при обработке клика по кнопке 'Плюс' или 'Минус', мы ищем родителя, и внутри этого родителя производим поиск тега input, с которым и производим нужные действия.


Скачать "Поле количество товаров"


02-06-2019 в 16:24:21





Похожая статья:

Пишем скрипт для сайта ''Подписка по Email''

Сегодня напишем скрипт для сайта "Подписка по Email"...

Категория: JavaScript  Подкатегория: Скрипты
Дата: 15-01-2018 в 16:47:34 0



Оставить коментарий:



Напишите email, чтобы получать сообщения о новых комментариях (необязательно):


Задача против робота. Расположите картинки горизонтально: