У нас есть много способов добавить продукты в корзину. Обычная практика - нажать кнопку «Добавить в корзину», которая прыгнет к корзине. В корзине вы можете нажать кнопку «Проверка», чтобы проверить. И сегодня я познакомлю вас с более дружелюбным решением.
Посмотреть демо скачать исходный код
По умолчанию корзина покупок скрыта и невидима. Когда пользователь нажимает кнопку «Добавить в корзину», информация о продукте будет добавлена в корзину. Корзина для покупок появится в правом нижнем углу страницы в виде кнопки. Нажатие кнопки расширит корзину покупок, чтобы отобразить информацию о продукте в корзине. В то же время вы также можете удалить или урегулировать продукты в корзине. Пользователи также могут временно закрывать свои корзины и продолжать делать покупки.
HTML -структура
Структура HTML в основном включает в себя две части. Первая часть - кнопка «Добавить в корзину покупок» в списке продуктов. Как показано в следующем коде, мы используем атрибут Data-* для объединения идентификатора продукта, изображения, имени, цены и другой информации.
<a href = "#0" data-price = "3669.00" data-proid = "1" data-proname = "huawei p9" data-proimg = "img/huawei_p9.jpg"> Добавить в корзину </a>
Вторая часть-это корзина для покупок, часть корзины для корзины включает в себя кусок куски для закусок и статистику корзины покупок.
<div> <a href = "#0"> корзина для покупок <ul> <!-CORT ITERS COUNT-> <LI> 0 </li> <li> 0 </li> </ul> </a> <div> <div> <header> <h2> Корзина по магазинам </h2> <pan> deleted <a href = "#0"> exflue> </vep> <div> <Div> <Div> <Div> <Div> <Div> <Div> <Div> <Div> <Div> <Div> <Div> <Div> <div> <Div> Часть, динамически вставленная JavaScript-> </ul> </div> <gooler> <a href = "#0"> <em> current- ￥ <pan> 0 </span> </em> </a> </looter> </div> </div> </div> </em> </a> </looter> </div> </div> </div>
Список UL в элементе Div.Body по умолчанию пуст. Он используется для отображения информации о списке продуктов в корзине. Его грубая структура заключается в следующем. Он динамически вставлен JavaScript.
<div> <ul> <li> <div> <a href = "#0"> <img src = "img/pro.jpg"> </a> </div> <div> <h3> <a href = "#0"> Название продукта </a> </h3> <pran> ￥ 3999.99 </span> </ a href = "#0a"/divet> diver> diver> diver> diver> </h3> <pran> ￥ 3999.99 </#diver </a> ". <label for="cd-product-'+ productId +'">Number of items</label> <span> <span>x<i id="cd-product-'+proid+'">1</i></span> </span> </div> </div> </div> </li> </ul> </div> </div> </div> </div> </li> </div> </div> </div> </li> </div> </div> </div> </div> </li> </div> </div>
Часть CSS не отображается в этой статье. Вы можете скачать css/style.css в исходном коде, чтобы просмотреть его.
JavaScript
Код этого примера основан на jQuery, поэтому файл библиотеки JQUERY должен быть загружен заранее.
Когда пользователь нажимает кнопку.
Функция addProduct (naame, proid, price, proimg) {var sumberity = $ ("#cd-product-"+proid) .text (); var select = '', productAdded = ''; if (количество == '') {var select = '<pan> x <i id = "cd-product-'+proid+'"> 1 </i> </span>'; var ProductDded = $ ('<li> <div> <a href = "#0"> <img src = "'+proimg+'"> </a> </div> <div> <h3> <a href = "#0">'+neame+'</a> </h3> <pan> ￥'+'</span> href = "#0"> delete </a> <div> <label for = "cd-product-'+proid+'"> количество файлов </label> '+select+' </div> </div> </li> '); cartlist.prepend (ProductAdded); } else {количество = parseint (количество); $ ("#cd-product-"+proid) .html (количество+1); }}Выше приведено реализация эффекта на основе JavaScript, добавленного в корзину покупок с загрузкой исходного кода. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!