корзина для landing page скрипт
Корзина для landing page скрипт
СКРИПТ КОРЗИНЫ ДЛЯ LANDING PAGE
Простая корзина для landing page на javascript.
Скрип корзины оказался достаточно прост в использовании и настройке. При необходимости, можно быстро переделать и уже работающий landing page.
Виджет КОРЗИНЫ превращает любой Сайт в Магазин: http://salejs.com/ru.html
1. Добавьте sale.js в HTML страницы и проставьте нужные опции
2. Добавьте кнопку Корзины на ваш сайт
3. Добавьте кнопку «Купить» для продуктов
cartjs.add( <
name : «Nexus»,
price : 450,
quantity : 1
>)
4. Можно поменять положение всплывающего окна корзины
Expression_inertia_bounce (эффект пружинистого отскока изображения)
3D куб для содержимого вкладок
body <
background: #F8FFE5;
>
.perspective <
perspective: 76em;
perspective-origin: 50% 50px;
width: 494px;
margin: 0 auto;
font-family: ‘Roboto’, sans-serif;
font-weight: 100;
color: #fff;
text-align: center;
>
input <
display: none;
>
.tab <
position: absolute;
width: 80px;
height: 70px;
background: pink;
right: 0;
line-height: 70px;
font-weight: 300;
.cube <
position: relative;
margin: 60px auto 0;
width: 300px;
height: 200px;
transform-origin: 0 100px;
transform-style: preserve-3d;
transition: transform 0.5s ease-in;
>
.tab-content <
width: 300px;
height: 200px;
position: absolute;
.cube <
transform: rotateX(-90deg);
>
#tab-front:checked
.cube <
transform: rotateX(0deg);
>
#tab-bottom:checked
.cube <
transform: rotateX(90deg);
>
Пружинистая подсказка на CSS при наведении
form <
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 100vh;
>
input <
border: none;
width: 170px;
height: 25px;
outline: none;
padding-left: 10px;
>
.tooltip:before,
.tooltip:after <
position: absolute;
content: »;
opacity: 0;
transition: all 0.4s ease;
>
.tooltip:hover::before,
.tooltip:hover::after <
opacity: 1;
transform: translateY(-2px);
>
@keyframes shake <
0% <
transform: rotate(2deg);
>
50% <
transform: rotate(-3deg);
>
70% <
transform: rotate(3deg);
>
#anim:hover <
animation: shake 500ms ease-in-out forwards;
>
Модуль корзины интернет-магазина на jQuery
При разработке интернет-магазинов мне часто приходилось посредством javascript (а конкретнее его фреймворком — jQuery) проделывать некоторые повторяющиеся от проекта к проекту вещи. Например, добавление товаров в корзину, обновление информации о количестве товаров и общей сумме на странице, удаление товаров из корзины по одному, изменение их количества и полная очистка всех товаров из корзины. И все это, разумеется, без перезагрузки страницы.
И я пришел к выводу, что нужно писать код так, что бы потом его с легкостью можно было использовать в следующих проектах.
Итак пишем модуль для работы с корзиной интернет-магазина с использованием jQuery.
Оговорюсь, что я опубликую только javascript-код, серверную часть трогать не буду, обозначу так же, какими данными будет обмениваться клиент с сервером.
Определяемся с методами:
Смешиваем параметры указанные при инициализации с параметрами по умолчанию и применяем их
Делаем обновление блока с информацией о количестве товаров в корзине и общей сумме, вешаем обработчики событий на заданные элементы и возвращаем сущность объекта (может пригодится).
Добавление одного наименования товара в корзину в количестве 1шт.
Метод add, получает параметр context (элемент, на который произошел клик) и отправляет на сервер данные.
Получение информации о количестве товаров в корзине и общей сумме, обновление блока (метод get).
Отличе метода get от add в url на который отправляются данные и в параметрах (метод get не передает параметров).
Думаю, дабы осуществить повторное использование кода, можно добавить некоторый метод updateCart, в который будут переданы url и vars (параметры).
В свою очередь метод add изменится на такой.
Изменение количества товаров одного наименования при потере фокуса поля, соответствующего этому наименованию.
Сообщение о добавлении товара в корзину (в зависимости от типа alert или flash).
Теперь это все объединияем.
По этой ссылке можно посмотреть пример модуля,
а тут можно скачать его архивом.
Модуль будет дописываться и исправляться.
Спасибо за внимание. Жду критики, вопросов и замечаний.
Есть желание доработать это до некого API работы с интернет-магазинами.
Корзина для сайта магазина с помощью CSS и JavaScript
Шаг 1: Создадим HTML-структуру
Внутри него у нас будет заголовок и три пункта, которые будут содержать:
Убедитесь, что при создании корзины для сайта на PHP вы подключили шрифт, который мы используем в этом руководстве. Теперь добавим основные стили для раздела body :
Мы задали основные стили. Теперь по порядку установим стили для товаров. Первыми элементами являются кнопки « Удалить » и « Добавить в избранное ».
Следующий элемент скрипта корзины для сайта HTML — это изображение товара, для которого нужно задать поле справа 50 пикселей:
Далее нужно задать стили для количества приобретаемого товара: кнопки для увеличения и уменьшения количества. Сначала мы создадим CSS корзины покупок для сайта, а затем заставим его работать с помощью JavaScript :
Полная стоимость товаров:
JavaScript
Теперь заставим работать кнопки количества приобретаемого товара:
И это наша окончательная версия корзины товаров для сайта :
Руководство завершено! Надеюсь, оно вам понравилось, и вы узнали что-то новое. Если у вас есть вопросы, напишите об этом в комментариях!
Дайте знать, что вы думаете по этой теме материала в комментариях. Мы очень благодарим вас за ваши комментарии, отклики, дизлайки, подписки, лайки!
Скрипт корзины для лендинга
Всем, привет. Многие слышали, что я начал разрабатывать свой скрипт корзины для лендинга. На блоге уже была статья на эту тему, но я использовал готовое решение другого автора.
Сначала все прекрасно работало, но, примерно год назад, многие начали жаловаться, что корзина не работает. Связано это было с тем, что часть файлов, необходимых для работы скрипта лежали на сервере у разработчика, который время от времени «падал», причем не на короткое время, а на недели. Конечно читателей это не устраивало. Кроме того, некоторые писали и об ошибках работы самой логики скрипта, связанной с подсчетом цены при удалении товара из корзины.
Сначала я рекомендовал написать напрямую автору скрипта, но позже решил заняться разработкой корзины самостоятельно, так как многие об этом просили. Появилось немного времени, и я на скорую руку собрал минимальный функционал корзины.
Назвал скрипт SmartBasket и в этой статье хочу поделиться им с вами. Если он окажется полезным и интересным для вас, то напишите мне, пожалуйста, в комментариях свой отзыв (чего не хватает конкретно вам, что улучшить, какой функционал добавить и т.д.). Так я пойму, что скрипт корзины действительно нужен и будет стимул его развивать.
Демонстрация работы скрипта
Как подключить корзину
Для подключения скрипта, скачайте архив с этой страницы и поместите папку smartbasket в корень вашего сайта.
Так как скрипт использует jQuery, то убедитесь, что он у вас подключен.
После подключения jQuery (обычно перед закрывающим тегом body) подключаем и инициализируем скрипт, там же добавим div, в котором и будет располагаться основная корзина.
Не забываем подключить и таблицу стилей:
Настройки корзины
С подключением закончили, теперь давайте займемся настройкой.
Сразу хочу сказать, что при разработке скрипта я ориентировался на то, чтобы, практически, никак не влиять на внешний вид вашего сайта. Не подключал никаких шрифтов, не писал стилей для карточек и т.д. Старался сделать так, чтобы по минимуму влиять на внешний вид вашего сайта.
Для этого, в месте, где инициализировали скрипт указываем класс обертки карточки в параметре ‘productElement‘:
На следующем шаге нужно указать скрипту класс кнопки, которая будет отправлять товар в корзину, для этого воспользуемся параметром «buttonAddToBasket»:
У кнопки есть несколько обязательных атрибутов, в которых и хранятся основные данные о товаре.
Не обязательные атрибуты:
Пример кнопки
Обратите внимание, что все атрибуты обязательны для заполнения. Если у вас нет артикула, то просто задайте уникальный набор цифр.
Следующим параметром, который мы настроим будет маска ввода номер телефона «countryCode». По умолчанию сейчас маска для Украины с первыми цифрами ‘+38‘, но вы можете поставить, ‘+7‘ или любые другие цифры.
Пока можно менять только их, но, если вы хотите иметь полный контроль над всеми цифрами, напишите мне и я сделаю.
Теперь укажем валюту, которую хотим использовать в корзине. Для этого есть параметр smartBasketCurrency, в который можно положить один из значков валют:
Выбор количества
Если ваша карточка товара предусматривает выбор количества товара, добавляемого в корзину, то укажите класс элемента где будет располагаться блок выбора количества в параметре ‘productQuantityWrapper‘. Например, я хочу, чтобы выбор количества располагался в теге div с классом ‘product__quantity’.
После добавления параметра ‘productQuantityWrapper’ cо значением ‘product__quantity’, кнопки выбора количества автоматически появятся на сайте в указанном блоке.
Выбор размера в карточке
Давайте я немного поясню суть работы. Вот так выглядит верстка блока с выбором размера у меня:
Чтобы цена в карточке менялась, нужно обернуть число с ценой в отдельный блок, например, span, со своим классом. У меня это выглядит так:
Теперь класс обертки «product__size» для блока с размерами и класс обертки цены «product__price-number» нужно передать в настройки скрипта:
Теперь при клике на элемент с размером из «data-sb-curent-price» подставится цена в «product__price-number». Если не совсем понятно, напишите мне, попробую разъяснить.
Последняя настройка, которая сейчас доступна это вывод мини-корзины. То есть кнопки, которая отображает статус корзины (показывает текущее количество товара в корзине) и вызывает, при нажатии на нее, модальное окно с основной корзиной.
Я специально не задавал никаких стилей и ей, чтобы у вас был полный контроль если не над всей корзиной, то над максимальным количеством ее элементов. Принцип вывода, похож на настройку предыдущего поля. Нужно указать класс элемента, в котором отобразится кнопка в параметре ‘smartBasketMinArea‘.
Кроме того, у вас есть возможность задать текст в кнопке, перед иконкой корзины и изменить саму иконку. Делается это при помощи параметров smartBasketMinText и smartBasketMinIconPath.
Для настройки отступов и внешнего вида, иконка и текст обернуты в теги с классами «smart-basket__min-icon» и «smart-basket__min-text».
Настройка почты для отправки
Для настройки отправки почты, нужно открыть файл config.php, который находится в папке /smartbasket/php/
Здесь нас интересуют 2 строки:
Если у вас возникают проблемы с отправкой формы, то воспользуйтесь SMTP протоколом передачи почты. Для этого в одном из последних обновлений я добавил специальные константы:
Обязательность полей для заполнения пользователем
В новом обновлении, как вы и просили, добавил еще одно поле для связи (email), теперь, если кому-то накладно звонить в другие регионы, они могут сделать обязательным поле для заполнения почты.
По умолчанию обязательным оставил только телефон, но вы можете это исправить в настройках. Для этого предусмотрено 2 параметра:
Чтобы сделать обязательным поле, поставьте ему значение «true». Чтобы сделать необязательным, укажите «false». Все это выглядеть может так:
При этом поле с указанием телефона не пропадает, просто данные из формы можно отправить без заполнения этого поля.
Пользовательское соглашение
В последнем обновлении, как вы и просили, добавил чекбокс с принятием пользовательского соглашения. Настраивается аналогично другим параметрам:
Пока это все, что есть. Да, впереди еще много работы и много идей. Будет больше проверок, больше функций, больше возможностей. Много раз еще придется переписать все и оптимизировать. Пока, это тестовый вариант, чтобы понять нужен ли кому-то подобный скрипт и насколько он актуален. Все пожелания и предложения пишите в комментариях, буду рад любой обратной связи и постараюсь улучшать функционал по мере свободного времени.
Если нужна видео-инструкция с описанием процесса установки настройки, напишите в комментариях, я попробую сделать.
Друзья, если будет время, постараюсь до конца года сделать новый, улучшенный скрипт корзины для лендинга и учесть ваши пожелания по поводу того, каким он должен быть. Пишите, какого функционала не хватает, но с учетом того, что это не универсальное решение, под все задачи а именно скрипт для лендинга или простого сайта. Этот скрипт не поддерживается больше.
Корзина для лендинга с простой установкой
UPD 2019-02-21: Корзина опубликована на github. Там же и актуальная версия документации
Адаптивная, простая, легковесная, но функциональная и красивая корзина, которая подойдет для большинства мультитоварных лендингов. Легко устанавливается и, при желании, кастомизируется под нужды магазина.
В разделе «Быстрый старт» описан базовый вариант установки, с которым может самостоятельно справиться каждый. Дальше следует более подробная инструкция с описанием всех возможностей корзины.
2. В любом месте страницы внутри добавьте элемент c-cart
3. Ко всем кнопкам добавления товаров в корзину добавьте класс cart-add и атрибуты data-name, data-image, data-price
4. В вашу страницу «спасибо» ( thankyou.php ) добавьте вызов обработчика форм, заменив email’ы на свои (один или несколько через запятую)
Результат
Всё. Этого достаточно для полноценной работы. Дальнейшая информация подробнее описывает установку, настройку и кастомизацию корзины и предназначена для людей, знакомых с html, css, javascript и php хотя бы на базовом уровне.
Если вы фрилансер — это для вас. Если вы владелец лендинга и хотите более тонкую настройку — можете показать эту инструкцию своему фрилансеру, либо обратиться ко мне.
Инструкция
Установка
Корзина подключается к лендингу добавлением в или в строки:
Полный пример использования :
Управление
Для того, чтобы «оживить» кнопки добавления товаров в корзину, необходимо к каждой из них добавить css класс cart-add и следующие атрибуты, которые будут отображаться в корзине:
Полный пример кнопки:
Управление для продвинутых
Вы можете вообще не использовать ни вспомогательные классы, ни дефолтный fab, а реализовать управление корзиной самостоятельно с помощью javascript API.
Выбрав стандартным способом компонент корзины
, вы получите объект, со следующими методами/параметрами:
Кроме того, корзина создает следущие события, на которые можно подписаться с помощью addEventListener() :
Кастомизация
В корзине есть 4 слота (области), которые можно полностью заменить своими. У каждго слота есть своё имя:
Используются слоты следующим образом (пример):
Не обязательно использовать сразу все слоты. Вы можете заменить, напрмер, только область под списком товаров, разместив там информацию о скидках, либо предложение добавить к заказу что-то очень нужное (апселл), а остальное оставить как есть.
Обработка форм
В корзине используется обычная post форма с полями:
Само собой, вы можете не использовать обработчик из комплекта, а написать свой, который, например, отправляет заказы в CRM (об этом скоро напишу отдельно).
Корзина использует localStorage браузера, поэтому при обновлении страницы, товары, добавленные посетителем, остаются в корзине.