Быстрое добавление товаров в корзину для сайтаСегодня мы рассмотрим удобный фрагмент кода, который позволить пользователям настраивать продукт непосредственно из галереи продукции, и добавить его в корзину покупки. Это существенно уменьшит время заказа и упростит процесс выбора товара для покупателя.  Стандартная сетка с товаром примерно выглядит следующим образом: пользователь нажимает на продукт который ему понравился, то переходит на страницу этого продукта. Отсюда он должен выбрать несколько вариантов товара и наконец, добавить товар в корзину.

 

В нашем варианте мы сможем показывать клиентам "Быстрый выбор вариантов" на панели продукции, пока они взаимодействуют с превью продукта, мы можем уменьшить количество шагов, которые отделяют пользователя от покупки товара, и, возможно, увеличить скорость покупки товара.

Пользователи с различным разрешением экрана не будут обделены возможностью, по этому мы сделали универсальную сетку, которая будет адаптироваться. Кроме этого мы позаботились чтобы сетка работала во всех браузерах включая IE9. Иконы из нашей демонстрации были использованы из Nucleo библиотеки.

Шаг 1. HTML

Основой HTML структуры представляет собой неупорядоченный список. Каждый элемент списка содержит неупорядоченный список (слайдер изображение продукта), а div.cd-customization  отвечает за элементы (Добавить в корзину кнопку и параметры настройки продукта) и div.cd-item-info (с названием продукта и цены).

Шаг 2. CSS

Для создания вариантов настройки (цвет и размер), мы использовали два различных <ul> элемента завернутых в div [data-type="select"] (div.size и div.color). <ul> элемент в абсолютной позиции и центром по отношению к его начальному элементу, а  div[data-type="select"]  имеет фиксированную высоту (34px) и значение overflow: hidden. Каждый элемент списка внутри неупорядоченного списка имеет высоту, равную div[data-type="select"], так что, по умолчанию, только выбранный параметр отображается.

Быстрое добавление товаров в корзину для сайта

Когда пользователь нажимает одну из двух вариантов настройки, свойство переполнения в div data-type=select установлен в видимой сетке, так что весь <ul> элемент показан при выборе.

Чтобы убедиться, что выбранный <li> элемент всегда виден, мы должны переставлять значение в середине списка <ul>, в соответствии с выбранным вариантом. Чтобы сделать это, мы создали .selected-n  класс (где N выбранный элемент). Например, .selected-3 класс добавляется в  div data-type=select , когда третий элемент списка выбран:

Теперь рассмотрим когда нам необходимо добавить товар в корзину с анимацией: на .add-to-cart кнопке состоит значение <em> (кнопка текстового сообщения) и SVG значек. По умолчанию, SVG не видно (картинка перемещается вправо, за пределами кнопки).
Когда продукт добавлен в корзину, то .is-added класс добавляется в .add-to-cart кнопку: <em> (текстовое сообщение) которое мы было нами скрыто (перемещается влево), в то время как SVG перемещается назад внутри кнопки, что приводит к анимации:

Для SVG анимации, мы использовали два SVG атрибуты  stroke-dasharray и stroke-dashoffset. Первый позволяет указать длину тире и пробелы, а вторая позволяет изменять, где начинается dasharray. В нашем случае, мы устанавливаем штрихи -dasharray = "19.79 19.79" и штрихи для -dashoffset = "19.79" (где 19,76 длина пути):

А затем присвоить значение dashoffset в 0, чтобы создать рисунок анимации. Примечание: чтобы оживить значение dashoffset, мы могли бы использовать CSS переходы (а затем с помощью animate() jQuery), но, к сожалению IE11, есть ошибка с переходами на некоторых свойствах SVG.

Шаг 3. JS

Когда пользователь взаимодействует с одним из вариантов настройки продукта (например, опция цвета), то .hover класс добавляется к соответствующему .cd-single-item элемента. Этот класс задает .cd-customization element видимым, так что он не исчезнет, ​​если курсор покидает продукт

По той же причине нам необходимо чтобы .hover класс был удален из всех других продуктов и .ResetCustomization () функция определена для этого:

Кроме того, мы использовали JQuery, чтобы реализовать ползунок для продукции (разные цвета изображения) и updateCart () функцию (обновить количество продуктов, добавленных в корзину).

Вот и все. Готово!

Читайте также: