CSS и JS-скрипт корзины интернет-магазина

CSS и JS-скрипт корзины интернет-магазина

Для удобства подключения и использования — мы собрали весь необходимый функционал в готовый javascript файл, который можно получить в личном кабинете сервиса “Простой магазин”. Также личный кабинет помогает настроить индивидуальные параметры: поля для ввода покупателем, адрес почты для отправки писем с заказом и т.д.

Демо-версия без регистрации

Пример кода установки :

Пример кнопки добавления товара по ID из каталога:

Рабочая версия требует регистрации

В личном кабинете вы сможете указать email на который будут отправляться заказы, цены, поля для ввода покупателем и др.

Такой javascript автоматически генерирует и выводит на экран все необходимые элементы:

• Иконку корзины, которая по-умолчанию расположена на странице в верхней правой части экрана и для неё задано “плавающее” положение (при прокрутке страницы она остается на месте). Значок кроме изображения также содержит счетчик товаров в заказе.
• Всплывающие окна оформления заказа и уведомления об успешном добавлении товара и оформления покупки.

А также выполняет обмен данными с сервером, на котором хранятся данные о товарах, заказах и персональные настройки интернет-магазина. Без серверной части реализация корзины невозможна.

Скрипт добавления товара в корзину

Для реализации функционала добавления товара используется автоматическое отслеживание событий “клик” на кнопку, содержащую класс .btn-ens-action . Например,

из данного элемента берется параметр data-rel и добавляется товар с таким ID из раздела “Торговые предложения” личного кабинета.

Существует несколько альтернативных способов добавления товара, которые могут быть использованы при ограничениях со стороны CMS:

• Добавление товара по ссылке. Для этого кнопку добавления товара необходимо сделать ссылкой и указать адрес #ensadd:
• Добавление товара через функцию. Для реализации такого метода требуется вызвать функцию easynetshop_buy()
• Добавление товара, который не зарегистрирован в каталоге. Это может быть полезным, если у вас на сайте уже есть огромный каталог товаров или требуется добавлять товар с изменяемыми параметрами (ценой, названием, описанием, картинкой) и таких вариантов товара может быть много. Подробнее о добавлении произвольно товара читать здесь

Оформление корзины интернет-магазина, CSS

В коде подключения содержится файл с готовыми стилями оформления элементов корзины. Сами элементы, генерируемые скриптами соответствуют стандартам HTML5 и верстка на основе bootstrap.

В соответствии с принципами каскадных таблиц стилей вы можете частично или полностью переопределить любой из параметров, указанных в css-файле. Для этого требуется после установки стандартных стилей добавить новое описание для выбранного элемента. Например, чтобы изменить цвет кнопки необходимо указать новые стили для классов которые изменились:

Кроме этого, для редактирования стилей можно скачать готовый файл, изменить в нем параметры оформления и загрузить на свой сервер, указав путь к нему для подключения.

Изменение контента формы заказа

Кроме стилей можно менять и текст, надписи, заголовки в шапке выпадающих окон корзины, надписи на кнопках и др. Подробную информацию по настройке соотвествтующих элементов можно найти по ссылкам:

Корзина на JS

Готовый javaScript корзины на сайт «Простой магазин», предназначенный для работы на абсолютно любой системе управления контентом (CMS), представляет собой асинхронный JS-функционал, позволяющий реагировать на действия посетителей сайта, отправляя на сервера «Простого магазина» информацию об активности. Получив и обработав ответ от сервера, скрипт выводит информацию для пользователей в удобном виде. Все взаимодействие по оформлению товара (добавление его в заказ, редактирование количества товаров, отправка заказа) происходит через скрипт. JS-код выполняет роль шлюза между сайтом, на котором размещена корзина, и сервером «Простого магазина», который обрабатывает информацию и выполняет действия по доставке совершенного заказа.

JavaScript и CSS легко интегрируется на любой действующий сайт (кроме сайтов, созданных на технологии Flash). Он выдаются каждому пользователю персонально при регистрации в личном кабинете.

Поскольку данный скрипт не отвечает за работу основного контента, рекомендуем его подключать асинхронно после загрузки более важных участков JS-кода. Это позволит оптимизировать работу браузера по отображению страницы, и если у пользователя медленный интернет, то значок корзины появится чуть позже всего остального контента.

# Метрики

Метрики — это данные, которые вы можете видеть в отчёте. В блоке Настройка метрик нажмите Настроить. Метрики объединены в наборы: «Основные метрики», «Посетители», «Показы», «Конверсия в корзину», «Добавление в корзину», «Товары по статусам», «Продажи», «Расходы» — выберите подходящий или создайте свой.

# Основные метрики

Основные метрики показывают, как продаются ваши товары. В блок входят метрики:

• «Заказано товаров». Общее количество заказанных и оплаченных товаров. Количество возвращённых и отменённых товаров включено.
• «Посетители, всего». Количество посетителей, которые просмотрели товар на любой странице сайта.
• «Посетители с просмотром карточки товара». Количество посетителей, которые просмотрели карточку товара в блоках «Главное предложение» и «Другие предложения».
• «Конверсия в корзину из карточки товара». Отношение количества добавлений товара в корзину к количеству посетителей, которые просмотрели карточку товара в блоках «Главное предложение» и «Другие предложения».
• «Заказано на сумму». Стоимость товаров, заказанных за период.
• «Отменено товаров». Общее количество отменённых товаров независимо от причины. Учитываются отмены покупателем и продавцом. Данные группируются по дате отмены.
• «Возвращено товаров». Общее количество возвращённых товаров. Данные группируются по дате возврата.
• «Позиция в поиске и каталоге». Средняя позиция товара в результатах поиска и каталога. Учитываем позицию после фильтрации и сортировки, не учитываем — если товар не был показан посетителю. Чем больше значение, тем дальше в результатах поиска показывается товар. Если значение равно «0», товар не показывался в этот период.

# Посетители

В наборе метрик можно просмотреть информацию о посетителях, которые просмотрели карточку товара. Набор содержит метрики:

• «Посетители, всего». Посетители, просмотревшие товар на любой странице сайта.
• «Посетители с просмотром карточки товара». Посетители, просмотревшие товар на карточке товара в блоках «Главное предложение» и «Другие предложения».
• «Посетители с просмотром в поиске или каталоге». Посетители, просмотревшие товар в результатах поиска или на странице каталога.

Что такое главное предложение?

1. Покупатель вводит фразу для поиска товара на сайте Ozon. Отображается список всех подходящих товаров. Для каждого товара отображается карточка с ценой главного предложения. Под кнопкой В корзину указано количество предложений товара на сайте.
2. Покупатель находит нужный товар в списке.
3. Покупатель нажимает на карточку товара в списке — открывается главное предложение. Другие предложения указаны внизу открывшейся страницы.

# Показы

Сколько раз ваши предложения увидели покупатели. Вы можете посмотреть показы на разных страницах, например, на карточке товара или в поиске и каталоге, а также увидеть статистику по блоку «Спонсорские товары».

Как пользоваться

Как правило, много показов у товаров, которые популярны и легко находятся в поиске. А вот основные причины низких показов:

• мало характеристик. Они учитываются в результатах поиска и фильтрах по параметрам, поэтому чем больше характеристик (основных и дополнительных) вы укажете, тем больше людей найдут товар.
• продукция узкоспециализированная или предназначена для небольшой аудитории. В этом случае проанализировать эффективность размещения помогут метрики из групп «Конверсия» и «Продажи».

# Конверсия и добавление в корзину

Метрики «Конверсия в корзину» показывают долю добавлений товаров в корзину по отношению ко всем показам товара. Например, если товар добавили в корзину 5 раз, а просмотрели — 10, то конверсия 5 / 10 = 50%.

Метрики «Добавление в корзину» — сколько раз ваш товар добавили в корзину с разных страниц сайта.

Как пользоваться

По добавлению товара в корзину можно оценить, насколько покупатели задумываются о покупке. Возможные причины низких значений:

• Покупатели находят похожие товары с более низкой ценой на Ozon или на других сервисах.
• Покупатели находят более дешёвые предложения этого товара от других партнёров.
• Товар плохо описан, покупателю не хватает информации для принятия решения.
• У товара мало фотографий, они недостаточно подробные или плохого качества.

# Товары по статусам

Метрики в наборе показывают данные по товарам с различными статусами: заказано, отменено, доставлено или возвращено. Вы можете отслеживать количество товаров, которые покупатели возвращают или отменяют, и улучшать эти показатели.

# Продажи

По метрикам из набора можно оценить:

• сколько заказов с товарами оформили покупатели,
• сколько раз купили товар,
• суммарную стоимость проданных товаров.

# Расходы

В набор входит метрика «Расходы на рекламу, всего». Метрика показывает сумму до вычета бонусов, которую вы потратили на рекламу товаров. Остальные виды рекламы не учитываются.

Подключение статистики сайта

Статистика сайта нужна для отслеживания количества посетителей, которые заходят на сайт.

Перейдите в панель управления сайтами, нажав по логотипу «uKit»:

Перейдите к инструменту «Статистика»:

Вы можете подключить инструменты аналитики Яндекс.Метрика и Google Analytics.

Нажмите кнопку «Подключить» и статистика будет подключена.

После успешного добавления счетчика на сайт, появится такое сообщение

Данных пока нет, но как только пользователи начнут заходить на сайт, вы это увидите:

Теперь, перейдите на вкладку «Google Analytics» и нажимаем кнопку «Подключить»:

Необходимо подтвердить права на управление счетчиками в вашем аккаунте Google Analytics:

После успешного подключения сайта к Google Analytics, появится такое сообщение

Необходимо создать аккаунт, нажмите на соответствующую кнопку:

Вы будете направлены на сайт Google Analytics. Заполните информацию об аккаунте и нажмите «Создать».

Закройте окно, возвращайтесь в панель управления вашего сайта в uKit и нажмите на кнопку «Я создал аккаунт»:

Счетчик Google Analytics теперь добавлен на наш сайт.

Вы завершили первоначальную настройку и запустили свой первый сайт. Теперь вы можете продолжить работу в конструкторе, а в случае, если у вас остались какие-либо вопросы, мы рекомендуем ознакомиться с ответами на часто задаваемые вопросы или написать нам в службу поддержки.