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

Иван Алексеев 23 Декабря, 2011 1,253

Мы получили большое количество запросов от пользователей на создание модулей для интернет-магазина. Компания 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 (Кнопка «Добавить в корзину»).

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

Виджет 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) или выбрать вариант с получением заказа на почту.

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Иван Алексеев
В компании MotoCMS Иван работает со дня ее основания. Признается, что успел создать не один сайт на MotoCMS ради досконального изучения админки и изложения всех хитростей работы с ней в блоге. Иван невероятно позитивен, предан своему делу, отзывчив. С удовольствием поболтает с вами о новых фичах, тулзах, пингах и других непонятных определениях на страницах блога.
  • Фред

    Супер, Молодцы! ближайшие время мы его приобретем.

    • Иван

      Спасибо, Фред.

  • Антон

    Ура. Это супер новость, как раз в своем проект дошел до магазина. И тут такая новость, прям радости нет предела))) Молодцы)

    • Антон

      Блин, рано радуюсь. Можно ли купить эти модули отдельно?

      • Иван

        Добрый день, Антон. Данные модули можно использовать только на сайтах, созданных с помощью MotoCMS.

        • Антон

          Так сайт и так на Moto CMS. Я брал 30 дневную версию и написал свой шаблон. На днях собираюсь оплатить лицензию на CMS. И вот вопрос собственно в том возможно ли как то вместе с CMS приобрести эти модули, без вашего шаблона.

          • Иван

            Антон, я не верно Вас понял. Приобрести интернет-магазин отдельно от шаблона можно. Оставьте заявку в Службе тех.поддержки (http://support.cms-guide.com/home), они предоставят всю необходимую информацию.

          • Антон

            Спасибо)) Тех поддержка уже помогла)) все замечательно)

          • Никита

            Здравствуйте!
            можно ли как то эти модули подключить если я испытываю возможности в течении 30 дней, а потом уже оплатить их вместе с шаблоном?

          • Иван

            Добрый день, Никита. Вы можете зарегистрировать на 30 дней демо-версию шаблона с встроенным интернет-магазином.
            Вот три шаблона на выбор: http://templates.motocms.ru/flash-cms-templates-type/37219.html, http://templates.motocms.ru/flash-cms-templates-type/38071.html, http://templates.motocms.ru/flash-cms-templates-type/38072.html.

  • Тимур

    Спасибо за такой развернутый мануал. Как говорится – “Могёте”

    • Иван

      Спасибо, Тимур. Надеюсь, данная статья будет для Вас полезной.

  • Vladimir_

    Доброе время суток !
    Такой вопрос – возможно ли добавить средства оплаты в корзину с товарами ?
    допустим подключить оплату через визумастеркард..?

    • Иван

      Добрый день, Владимир. В виджете Shopping Cart List укажите платежную систему PayPal. Оплачивать покупки через PayPal можно используя карту Visa или другую международную платежную карту.

      • Vladimir_

        смысл моего вопроса в том чтобы клиент не покидал страницы веб сайта – а осуществлял покупку прямо на нем..

        • Иван

          Нет, Владимир, к сожалению, это невозможно.

  • Vladimir_

    А если то что было подсчитано в корзине после нажатия кнопки оплатить уходит на html страницу с данными о покупке и с заполнением формы на оплату выбранного продукта во флеш магазине – так можно ?
    и еще вопрос интересует – можно ли поисковик по сайту сделать к примеру с доп.полями как поиск по определенным критериям ?

    • Иван

      Владимир, переход из Shoping Cart List можно сделать на форму заказа (контакт форму), которую Вы получите на свою почту. Поиск с дополнительными полями сделать нельзя.

  • Александр

    Добрый день!
    Буду покупать лицензии на интернет-магазины MotoCMS, как только появится возможность импорта большого количества товаров, с помощью CSV-файлов.

    • Иван

      Добрый день, Александр. Когда такая возможность появится, мы Вам сообщим.

      • Александр

        Спасибо. А есть примерные сроки ожидания?

        • Иван

          К сожалению, на данный момент сроки не известны.

  • Евгений

    Поиск по каталогу не работает, только по обычным страницам=/

    • Иван

      Добрый день, Евгений. Да. На данный момент поиск работает так.

  • Игорь

    Купил платный шаблон магазина. Хочу немного отредактировать CatalogWidget. Скажите это возможно? Где взять исходники этого виджета? Где взять инструкцию по редактированию и внедрению уже отредактированного виджета?
    Спасибо.

    • Иван

      Добрый день, Игорь. Обратитесь, пожалуйста, в службу технической поддержки: http://support.cms-guide.com/home (создать заявку). Наши специалисты окажут Вам помощь и предоставят необходимую информацию.

  • Evgeniy

    А сколько товаров максимум в одной категории может быть?

    • Иван

      Добрый день, Евгений. Ограничений на количество товаров в категории нет. Но учитывайте нагрузку на сервер при внесении большого количества контента на ваш сайт.

  • http://aerodis.ru Артур

    Здравствуйте!

    Хотели бы установить на сайте интернет-магазин. Платежные системы только те, что указаны в статье? Дело в том, что сайт и компания ориентирована на пользователей из России и эти платежные системы у нас не популярны. Как быть с этим, если мы хотим чтобы была возможность оплаты и ЯндексДеньгами, и WebMoney, и банковскими картами, и возможность выписать счет для безналичной оплаты?

    • Иван

      Добрый день, Артур. На данный момент системы только те, которые указаны в статье. Используя Robox клиент сможет оплатить и Яндекс.Деньгами и Вебмани и картой.

  • Асель

    ДД! как сделать чтобы форма заказа отправлялась на емэйл? она переходит только на контактную форму пустую. как настроить? спасибо!

    • Иван

      Добрый день, Асель. После добавления заказа в корзину, покупатель попадает на контакт форму в которую вносит необходимые данные. После отправления информации владелец магазина получает на свой эл.адрес заказ из корзины вместе с информацией из контактной формы.
      Если вам необходима помощь или возникают вопросы, обращайтесь в службу технической поддержки MotoCMS: http://support.cms-guide.com/anonymous_requests/new.

  • Роман

    если я до этого купил шаблон сайта за 139 долларов , а потом захочу купить виджет интернет магазина- во сколько это обойдется? или если я покупаю понравившийся шаблон сайта(без виджета магазина) и хочу что бы там присутствовал виджет магазина – сколько это будет стоить? заранее спасибо

  • http://greenfootglobal.ru Дмитрий

    Скажу вам так moto cms удобная штука только в ней надо досканально разобраться в частности с некоторыми компонентами! легче тому кто знает английский, пол года создавал сайт и пол года задавал вопросы по исправлению и консультациям! всё работает как надо но везде есть свои ньюансы! обновлений не наблюдаю а их я думаю должно уже набраться по разным доработкам виджетов и панели управлений! напрягает только карта (если надо добавить новую метку это значит надо код копировать и вставлять куда надо снова и снова) консультироваться лучше всего через чат вживую, если какие то вопросы остаются они их решают и пишут вам на почту! всё оперативно и правильно в 80%