В стартовом шаблоне «Чертоги Фрилансера» 4 (ЧФ4) реализован функционал добавления товаров в корзину с возможностью анимации изображения товара.
Расположение компонента
Файлы компонента находятся в папке src/components/forms/addtocart, здесь вы найдете JS-файл компонента, HTML-файл с примером кода, а также файл SCSS для стилизации компонента.
Использование компонента
В HTML непосредственно к объекту выводящему количество товаров в корзине добавьте дата-атрибут data-fls-addtocart:
<div class="cart"><span class="cart__quantity" data-fls-addtocart>0</span></div>Для кнопки «Купить», «Добавить в корзину» и т.д. добавьте дата-атрибут data-fls-addtocart-button:
<button data-fls-addtocart-button>Добавить в корзину</button>Для использования дополнительного функционала, добавляем обертку прилагаемого в корзину товара с дата-атрибутом data-fls-addtocart-product:
<div data-fls-addtocart-product class="product">
...
<button data-fls-addtocart-button>Додати в кошик</button>
</div>Теперь мы имеем возможность добавить управление количеством товаров, которые будут добавлены в корзину. Для этого необходимо добавить дата-атрибут data-fls-addtocart-quantity для управляющего количеством тега <input> или использовать компонент «Количество» ЧФ4 тоже с добавлением data-fls-addtocart-quantity:
<div data-fls-addtocart-product class="product">...<input data-fls-addtocart-quantity autocomplete="off" type="text" name="form[]" value="1"><button data-fls-addtocart-button>Додати у кошик</button></div>Или
<div data-fls-addtocart-product class="product">...<div data-fls-quantity class="quantity"><button data-fls-quantity-minus type="button" class="quantity__button quantity__button--minus"></button><div class="quantity__input"><input data-fls-addtocart-quantity data-fls-quantity-value autocomplete="off" type="text" name="form[]" value="1"></div><button data-fls-quantity-plus type="button" class="quantity__button quantity__button--plus"></button></div><button data-fls-addtocart-button>Добавить у кошик</button></div>Также есть возможность анимировать изображение товара создавая «полет в корзину». Для этого тега <img> товара добавьте дата-трибут data-fls-addtocart-image:
<div data-fls-addtocart-product class="product">...<img src="..." data-fls-addtocart-image alt="Image"><button data-fls-addtocart-button>Додати у кошик</button></div>Для управления скоростью анимации добавьте значение атрибута data-fls-addtocart-image в миллисекундах (по умолчанию 500ms):
<div data-fls-addtocart-product class="product">...<img src="..." data-fls-addtocart-image="1000" alt="Image"><button data-fls-addtocart-button>Додати у кошик</button></div>