Значок корзины для сайта

+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 вашего магазина.