Интернет-магазин от Moto CMS

Мы получили большое количество запросов от пользователей на создание модулей для интернет-магазина. Компания MotoCMS всегда идет навстречу пожеланиям своих клиентов и разработала решение для создания функционального интернет-магазина на Вашем сайте.

Наше решение для интернет-магазина включает в себя 7 виджетов:

1. Category Menu Widget (Список категорий);
2. Products List Widget (Список товаров);
3. Product Details Widget (Информация о товаре);
4. Shopping Cart Widget (Корзина);
5. Shopping Cart List Widget (Список товаров в корзине);
6. Banner Rotator (Баннер);
7. Add To Cart Button (Кнопка «Добавить в корзину»).

Рассмотрим подробнее каждый виджет.

1. Category Menu (Список категории)

Виджет Category Menu своего рода модуль каталога, который будет связывать все элементы интернет-магазина. Как вы видите на скриншоте, в настройках модуля можно изменить расположение списка категорий (горизонтальное или вертикальное), отредактировать стиль кнопок списка категорий (Category) и подкатегорий (Subcategory).

Чтобы перейти к редактированию содержимого Category Menu, дважды кликните на изображение виджета или нажмите кнопку «Редактировать виджет» на панели справа. Вы можете создать новые категории, переименовать существующие и перейти на любой выбранный уровень для редактирования контента.

Кнопка «Добавить» позволяет добавить товар или создать субкатегорию, кнопка «Добавить элементы» позволяет добавить сразу несколько товаров.
В папке «Category 0» создаем два продукта для примера.

Для продукта «Apple» загружаем три изображения, которые будут выведены на экран в «Product Details light-box». Здесь Вы можете добавить видео, вместо большого изображения товара, которое будет отображаться в Product Details Widget (Информация о товаре).
(Добавить → Large Preview → выбрать видео из Медиатеки или загрузить с YouTube.com).

У каждого продукта есть набор свойств, которые Вы можете отредактировать:

• Product Code (Код продукта);

Внимание! Код должен быть индивидуальным для каждого товара.

• Regular Price (Обычная стоимость);
• Sale Price (Стоимость со скидкой);
• Brand Name (Торговая марка);
• Model (Модель);
• Product Thumbnail (Миниатюрное изображение продукта);
• Short Description (Краткое описание);
• Full Description (Полное описание).

2. Products List (Список товаров)

Виджет Products List предназначен для показа продукции из Списка категорий (Category Menu). Размещать его необходимо на той же странице, на которой расположен виджет Category Menu. Обязательно соедините и меджу собой при помощи «e-Commerce Connection ID» (на скриншоте ID указан «store», но Вы можете использовать любые буквы или цифры, главное, чтобы ID был одинаковым для виджетов: Category Menu, Product List и Product Details widgets).

Product List Widget имеет разнообразные свойства и параметры, которые Вы можете отредактировать:

• Navigation Style (Стиль навигационных кнопок);
• Sort Style (Стиль списка сортировки товаров);
• Product Style (Стиль представления товара);
• Product Image Style (Стиль изображения товара);
• Buy Button Style (Стиль кнопки «Купить»).

Как Вы могли заметить, стоимость товара отображается в долларах США ($), если Вы хотите, чтобы отображалась другая валюта, необходимо изменить ее в настройках.
Настройки – Настройки веб-сайта – Currency label.

3. Product Details (Информация о товаре)

Данный виджет предназначен для размещения в Вашем магазине подробной информации о товаре. При нажатии на изображение товара в списке, будет открываться всплывающее окно, в котором и будет расположено описание товара.
Виджет Product Details также необходимо соединить с виджетом Category menu при помощи «e-Commerce Connection ID» для корректной работы.

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

4. Shopping Cart (Корзина)

Этот виджет отображает количество товаров, отправленных в корзину и приводит пользователя к списку товаров в корзине (Shopping Cart List Widget). Страница, где размещен виджет Shopping Cart List должна быть обязательно указана в настройках виджета Shopping Cart.

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

5. Shopping Cart List (Список товаров в корзине)

Этот виджет отображает список товаров, которые добавлены в корзину. Для размещения виджета создаем новую страницу или всплывающее окно. Страница, где размещен виджет Shopping Cart List должна быть обязательно указана в настройках виджета Shopping Cart.

На скриншоте ниже указаны настройки платежной системы. Можно выбрать один из предложенных способов оплаты (PayPal, Google Checkout, Robox) или выбрать вариант с получением заказа на почту.

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

6. Banner Rotator (Баннер)

Banner Rotator поможет Вам привлечь внимание покупателей к определенным товарам, например, во время акций со скидками. Баннер с функцией смены изображений, позволит разместить информацию о нескольких товарах, что выгодно скажется на продажах Вашего магазина.
В настройках баннера Вы можете установить необходимый временной отрезок для слайд-шоу, выбрать цвет фона и его прозрачность, скруглить углы баннера, подобрать шрифты для текста, выбрать месторасположение изображения товара и многое другое.
Чтобы заполнить баннер необходимой информацией нажимаем «Редактировать виджет».

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

После того, как Вы внесли необходимую информацию, нажимаем «Добавить».
Создаем необходимое количество элементов.

7. Add To Cart Button (Кнопка «Добавить в корзину»)

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

Также Вы можете изменить внешний вид кнопки в соответствии с дизайном Вашего сайта.

Предлагаем Вашему вниманию небольшое видео по созданию интернет-магазина (на английском языке).

Данные модули будут встроены во все новые шаблоны, появляющиеся в категории «Интернет-магазины» на нашем сайте.

Интернет-магазин можно установить в любой наш шаблон. Купить их можно в процессе покупки шаблона, установите галочку напротив специального предложения. Стоимость набора виджетов составит 99$.

Если у Вас уже есть шаблон MotoCMS, то Вы можете приобрести интернет-магазин, обратившись в службу тех.поддержки или перейти по ссылке. Стоимость набора виджетов составит 150$.

Оставляйте свои пожелания, мнения и вопросы в комментариях к посту. Также мы рады общению на нашем форуме.

Следуйте за нами: @MotoCMS_ru