Заметили ошибку ?
Выделите это место и нажмите Ctrl + Q

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


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


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

-
+


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

-
+

secure-hosting-300x250

Добавим 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





Если у Вас что-то не получилось или Вы не имеете достаточных навыков по программированию, но ВСЁ РАВНО хотите данный скрипт к себе на сайт - можете обратится ко мне за помощью, и я Вам помогу!
Хочу такой скрипт к себе на Сайт

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

Пишем модуль "нашли ошибку? - нажимай Ctrl+Q" для сайта своими руками

Сегодняшняя статья посвящена модулю: "Заметили Ошибку? - нажимай Ctrl...

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



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



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


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


Последние
видео:



Задача о разрезании пиццы
Метод простого выбора


Подготовка к
ОГЭ


Подготовка к ОГЭ по информатике


Давайте
дружить!


Группа Вконтакте Code-Enjoy

Твиттер Александра Калужского

YouTube канал Code-Enjoy