Содержание
- 1 Сообщить
- 2 Сообщить о проблеме с загрузкой
- 3 Демонстрация работы скрипта
- 4 Как подключить корзину
- 5 Настройки корзины
- 6 Пример кнопки
- 7 Выбор количества
- 8 Выбор размера в карточке
- 9 Настройка почты для отправки
- 10 Обязательность полей для заполнения пользователем
- 11 Положение и вид корзины
- 12 Настройка пустой корзины
- 13 Изменение иконки корзины
- 14 Изменение формы корзины
- 15 Собственая иконка корзины
- 16 Изменение расположения корзины
- 17 Эффекты анимации у иконки корзины
+11 000 Бесплатные изображения.
Простой набор значков для покупок и электронной коммерции для веб-сайтов и мобильных приложений
alexdndz
Гигантский мобильный телефон по продаже товаров
andrydj
Магазин значок корзины установлен. плоский набор из магазина корзину векторные иконки коллекции изолированы
yliv
Пакет или бумажные коробки с логотипом корзины в тележке на клавиатуре ноутбука.
sunnygb5
Покупки онлайн на дому concept.online shopping является формой электронной коммерции
dashu83
Информационный плакат письменный семейный шоппинг.
teravector
Набор иконок линейной электронной коммерции. шоппинг иконки в простом дизайне.
keep_calm
Корзина на ярко-желтой бумаге
photomars
Интернет-магазин tiny people character
dealita
Коробки и пакеты для покупок в корзине с ноутбуком для онлайн-покупок и концепции доставки
surasak.ch
Рекламный баннер с большой надписью о продаже и корзиной
studiogstock
Интернет-магазин плоский состав
macrovector
Электронные покупки горизонтальные баннеры
macrovector
macrovector
Электронная коммерция круглый состав
macrovector
Интернет-магазин горизонтальные баннеры
macrovector
Фастфуд изометрические cort set
macrovector
Электронная коммерция горизонтальные баннеры
macrovector
Служба доставки квартира состав
macrovector
Концепция электронной коммерции flat
macrovector
Современная композиция с плоским дизайном
freepik
Плакат "черная пятница"
macrovector
Покупки онлайн иллюстрации
Olga_spb
Люди, несущие сумки для покупок
pikisuperstar
Супермаркет корзина с продуктовой пиктограммой
macrovector
Черная пятница концепция, корзина
freepik
Интернет-магазин, изометрическая концепция для мобильного приложения
upklyak
Интернет-магазин концепции для целевой страницы
pikisuperstar
Тележка для покупок с пакетами
freepik
Концепция черного пятна с тележкой и пространством
freepik
Композиция черного пятна с четырьмя мешками и тележкой
freepik
Шоппинг горячие цены на тему
studiogstock
Интернет-магазин концепции для целевой страницы
freepik
Специальная скидка cyber понедельник желтый фон
ibrandify
Корзина с маркетинговым набором иконок
studiogstock
flaticon
Большой шаблон продажа
freepik
Ноутбук и сумки, концепция онлайн-покупок
snowing
Интернет-магазин, корзина для покупок, помещенная рядом с ноутбуком на синем фоне.
jcomp
flaticon
Интернет-магазин концепции с иллюстрацией
pikisuperstar
Шаблон целевой страницы продажи квартиры
pikisuperstar
flaticon
Коллекция торговых икон
freepik
freepik
Современный корзина логотип
kreativkolors
Иконки электронной коммерции e
photoroyalty
Корзина из клетчатой конструкции
flaticon
Установить мультимедийные простые иконки
freepik
Современный баннер продаж для социальных сетей
freepik
Шаблон целевой страницы продажи квартиры
freepik
3ab2ou
Интернет-магазин концепции для целевой страницы
freepik
Шаблон целевой страницы продажи квартиры
freepik
Интернет-магазин концепции для целевой страницы
pikisuperstar
Корзина вид пустой сторона
flaticon
flaticon
Черная пятница корзина продажа фон
starline
Социальные сети
Получи эксклюзивные ресурсы прямо на свой почтовый адрес
Copyright © 2010-2019 Freepik Company S.L. Все права защищены.
Регистрируясь на этом веб-сайте, ты принимаешь наши Условия использования и Политику конфиденциальности
Зарегистрироваться
И наслаждайся преимуществами
Увеличь свой ежедневный лимит скачиваний
Получи доступ к эксклюзивным предложениям и скидкам
Получи набор из 20 Премиум-ресурсов бесплатно, подписавшись на нашу рассылку
Уже есть аккаунт? Войти
Зарегистрироваться с аккаунтом социальной сети
Помощь с паролем
Введи имя пользователя или адрес электронной почты чтобы восстановить пароль. Ты получишь письмо с инструкциями. Если у тебя возникли проблемы с восстановлением пароля, свяжись с нами.
Здравствуйте!
В нашей рассылке вы найдете эксклюзивные дизайны, новости и рекламные предложения.
Подпишитесь и получите 20 векторов премиум
Да, получить Нет, продолжить без получения пакета
Мы защитим вашу личную информацию. Подробнее
Сообщить
Уведомление о нарушении Авторских Прав
Если ты являешься владельцем авторских прав или агентом, отвечающим за это, и считаешь, что какой-либо контент на сайте Freepik нарушает авторские права твоей работы, ты можешь подать уведомление в DMCA для уведомления о ресурсах, которые могут представлять собой нарушение соответствующих лицензий
Сообщить о проблеме с загрузкой
Что пошло не так?
Поздравляем! Теперь ты Премиум пользователь Freepik.
Теперь ты можешь использовать весь контент без атрибуции и скачивать ресурсы, помеченные значком Премиум.
Краткое описание лицензии
Наша лицензия позволяет вам использовать контент
- Для коммерческих и личных проектов
- В цифровых или печатных СМИ
- Можно использовать, неограниченное число раз в течение долгого времени
- В любой точке планеты
- Можно изменять, или создавать работы на основе данного контента
* Этот текст является только кратким описанием и не содержит никаких договорных обязательств. Для получения дополнительной информации, перед использованием контента прочитайте наши Условия использования.
Всем, привет. Многие слышали, что я начал разрабатывать свой скрипт корзины для лендинга. На блоге уже была статья на эту тему, но я использовал готовое решение другого автора.
Сначала все прекрасно работало, но, примерно год назад, многие начали жаловаться, что корзина не работает. Связано это было с тем, что часть файлов, необходимых для работы скрипта лежали на сервере у разработчика, который время от времени «падал», причем не на короткое время, а на недели. Конечно читателей это не устраивало. Кроме того, некоторые писали и об ошибках работы самой логики скрипта, связанной с подсчетом цены при удалении товара из корзины.
Сначала я рекомендовал написать напрямую автору скрипта, но позже решил заняться разработкой корзины самостоятельно, так как многие об этом просили. Появилось немного времени, и я на скорую руку собрал минимальный функционал корзины.
Назвал скрипт SmartBasket и в этой статье хочу поделиться им с вами. Если он окажется полезным и интересным для вас, то напишите мне, пожалуйста, в комментариях свой отзыв (чего не хватает конкретно вам, что улучшить, какой функционал добавить и т.д.). Так я пойму, что скрипт корзины действительно нужен и будет стимул его развивать.
Демонстрация работы скрипта
Как подключить корзину
Для подключения скрипта, скачайте архив с этой страницы и поместите папку smartbasket в корень вашего сайта.
Так как скрипт использует jQuery, то убедитесь, что он у вас подключен.
После подключения jQuery (обычно перед закрывающим тегом body) подключаем и инициализируем скрипт, там же добавим div, в котором и будет располагаться основная корзина.
Не забываем подключить и таблицу стилей:
Настройки корзины
С подключением закончили, теперь давайте займемся настройкой.
Сразу хочу сказать, что при разработке скрипта я ориентировался на то, чтобы, практически, никак не влиять на внешний вид вашего сайта. Не подключал никаких шрифтов, не писал стилей для карточек и т.д. Старался сделать так, чтобы по минимуму влиять на внешний вид вашего сайта.
Итак, первое что мы сделаем — это укажем нашему скрипту обертку вашей карточки товара.
Для этого, в месте, где инициализировали скрипт указываем класс обертки карточки в параметре ‘productElement‘:
product__element — и есть класс моего блока с карточкой.
На следующем шаге нужно указать скрипту класс кнопки, которая будет отправлять товар в корзину, для этого воспользуемся параметром «buttonAddToBasket»:
product__add-to-cart-button — класс моей кнопки.
У кнопки есть несколько обязательных атрибутов, в которых и хранятся основные данные о товаре.
- data-sb-id-or-vendor-code — артикул или id товара;
- data-sb-product-name — название товара;
- data-sb-product-price — цена, разделенная точкой, если есть копейки;
- data-sb-product-quantity — количество, по умолчанию укажите 1;
- data-sb-product-img — полный путь к картинке;
Не обязательные атрибуты:
- data-sb-product-size — размер. Задается, если вы используете опцию вывода размера в карточке товара. Подробнее о том, как это сделать в инструкции ниже.
Пример кнопки
Обратите внимание, что все атрибуты обязательны для заполнения. Если у вас нет артикула, то просто задайте уникальный набор цифр.
Следующим параметром, который мы настроим будет маска ввода номер телефона «countryCode». По умолчанию сейчас маска для Украины с первыми цифрами ‘+38‘, но вы можете поставить, ‘+7‘ или любые другие цифры.
Пока можно менять только их, но, если вы хотите иметь полный контроль над всеми цифрами, напишите мне и я сделаю.
Теперь укажем валюту, которую хотим использовать в корзине. Для этого есть параметр smartBasketCurrency, в который можно положить один из значков валют:
Выбор количества
Если ваша карточка товара предусматривает выбор количества товара, добавляемого в корзину, то укажите класс элемента где будет располагаться блок выбора количества в параметре ‘productQuantityWrapper‘. Например, я хочу, чтобы выбор количества располагался в теге div с классом ‘product__quantity’.
После добавления параметра ‘productQuantityWrapper’ cо значением ‘product__quantity’, кнопки выбора количества автоматически появятся на сайте в указанном блоке.
Выбор размера в карточке
Недавно появилась возможность добавлять размер, который в свою очередь, может влиять и на цену. Например, в интернет-магазине продают 3 размера пиццы — 32 см, 26 см или 16 см. От радиуса зависит и цена. Вы хотите, чтобы в карточке пользователь мог выбрать нужный размер.
Давайте я немного поясню суть работы. Вот так выглядит верстка блока с выбором размера у меня:
Для работы скрипта здесь важны атрибуты «data-sb-curent-price» и «data-sb-curent-size» и «data-sb-curent-id-or-vendor-code» так как в них содержаться параметры для подстановки цены, размера и артикула. То есть при размере 32 см, цена пиццы 320 рублей, при размере 22 см — цена пиццы 220 рублей и т.д. Если цена при любом размере остается одинаковой, просто укажите везде одну и туже стоимость. Аналогичная ситуация и с артикулом. Или укажите везде одинаковый, или вообще не используйте атрибут «data-sb-curent-id-or-vendor-code», если не планируете давать возможность добавлять один и тот же товар с разными характеристиками.
Чтобы цена в карточке менялась, нужно обернуть число с ценой в отдельный блок, например, 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 строки:
- const SENDER = ‘sender@yandex.ru’;
- const CATCHER = ‘catcher@list.ru’;
SENDER — это адрес, с которого будет отправляться письмо. CATCHER — адрес на который будет приходить письмо. Обратите внимание, что адрес отправителя должен быть реальными, чтобы не возникало проблем с доставкой.
Если у вас возникают проблемы с отправкой формы, то воспользуйтесь SMTP протоколом передачи почты. Для этого в одном из последних обновлений я добавил специальные константы:
Раскомментируйте эти строки и заполните в соответствии с вашим почтовым сервисом. Возникнут вопросы — пишите.
Обязательность полей для заполнения пользователем
В новом обновлении, как вы и просили, добавил еще одно поле для связи (email), теперь, если кому-то накладно звонить в другие регионы, они могут сделать обязательным поле для заполнения почты.
По умолчанию обязательным оставил только телефон, но вы можете это исправить в настройках. Для этого предусмотрено 2 параметра:
Чтобы сделать обязательным поле, поставьте ему значение «true». Чтобы сделать необязательным, укажите «false». Все это выглядеть может так:
При этом поле с указанием телефона не пропадает, просто данные из формы можно отправить без заполнения этого поля.
Пока это все, что есть. Да, впереди еще много работы и много идей. Будет больше проверок, больше функций, больше возможностей. Много раз еще придется переписать все и оптимизировать. Пока, это тестовый вариант, чтобы понять нужен ли кому-то подобный скрипт и насколько он актуален. Все пожелания и предложения пишите в комментариях, буду рад любой обратной связи и постараюсь улучшать функционал по мере свободного времени.
Надеюсь, что ничего не упустил, если что — пишите!
Если нужна видео-инструкция с описанием процесса установки настройки, напишите в комментариях, я попробую сделать.
Вы можете изменить внешний вид иконки корзины, ее положение на странице, установить перенаправление покупателей на нужный раздел сайта или добавить эффект анимации с помощью специальных параметров. Их нужно добавить в код интеграции корзины.
Вы можете комбинировать разные параметры в одном коде корзины, чтобы она больше подходила к дизайну сайта и вашим задачам.
В этой статье:
Положение и вид корзины
Вы можете менять положение корзины с помощью добавления параметра data-layout в код виджета корзины. Пример:
В нем:
VALUE — один из поддерживаемых вариантов параметра распложения коризны;
STORE_ID — ID вашего магазина.
Ниже перечислены все поддерживаемые варианты положения корзины. Вы можете увидеть, как они выглядят, и использовать их.
Значение | Положение |
SMALL_ICON | |
SMALL_ICON_COUNTER | |
COUNTER_ONLY | |
TITLE_COUNTER | |
MEDIUM_ICON_COUNTER | |
MEDIUM_ICON_TITLE_COUNTER | |
BIG_ICON_TITLE_SUBTOTAL | |
BIG_ICON_DETAILS_SUBTOTAL |
Настройка пустой корзины
Вы можете скрывать или показывать пустую иконку корзины. Это настраивается с помощью параметра data-show-empty-cart для виджета корзины"ec-cart-widget". Например, вот тут:
В примере:
VALUE — должен быть TRUE или FALSE;
STORE_ID — ID вашего магазина.
Изменение иконки корзины
Вы можете изменить стандартную иконку корзины с помощью значения в коде интеграции data-icon в виджете"ec-cart-widget". Пример:
В нем:
VALUE — один из поддерживаемых иконок корзины
STORE_ID — ID вашего магазина.
Все поддерживаемые виды иконки корзины есть в таблице ниже.
Значение | Иконка |
BAG | |
CART | |
BASKET |
Изменение формы корзины
Вы можете изменить форму границ иконки корзины. Для этого необходимо добавить параметр data-fixed-shape в код интеграции виджета корзины:
В коде:
VALUE может быть NONE (без рамки) / RECT (прямоугольная рамка) / PILL (закругленная рамка);
STORE_ID — ID вашего магазина.
Собственая иконка корзины
Если вы хотите разместить на сайте свою иконку корзины, это тоже можно сделать с помощью специального параметра в коде интеграции: data-custom-icon-url. В примере показано, как он выглядит
where:
VALUE — либо URL-адрес иконки корзины, либо SVG разметка;
STORE_ID — ID вашего магазина.
Изменение расположения корзины
Изменить расположение корзины на экране можно с помощью нескольких параметров, которые можно добавить в код интеграции виджета. Пример:
Где:
VALUE — один из поддерживаемых вариантов параметра размещения коризны;
STORE_ID — ID вашего магазина.
Все параметры перечислены в таблице ниже:
Параметр | Значение | Описание |
data-fixed | TRUE / FALSE | Фиксирует корзину в определенной части сайта. |
data-fixed-position | TOP_LEFT / TOP_RIGHT / BOTTOM_LEFT / BOTTOM_RIGHT | Фиксирует корзину на экране (справа или слева). Корзина будет сохранять свою позицию во время скролла |
data-horizontal-indent | Positive integer including zero | Определяет границу по горизонтали между виджетами магазина и краем экрана или iframe. |
data-vertical-indent | Positive integer including zero | Определяет границу по вертикали между виджетами магазина и краем экрана или контейнером iframe. |
Эффекты анимации у иконки корзины
Вы можете показывать или скрывать эффекты анимации при добавлении товара в корзину. Параметр для изменения в коде интеграции — data-show-buy-animation. Пример:
В нем:
VALUE —должен быть TRUE или FALSE;
STORE_ID — ID вашего магазина.