Как встроить магазин CS-Cart на страницу Facebook

Примечание

Описанный в статье модуль работает только с CS-Cart/Multi-Vendor 4.8.2 и более новыми версиями. Вашему магазину понадобится действующий SSL-сертификат; после установки сертификата откройте страницу Настройки → Настройки безопасности и выберите у настройки Безопасное соединение для витрины вариант Включить для всего сайта.

Магазин на CS-Cart или Multi-Vendor можно встроить на страницу Facebook. Для этого понадобится создать собственное приложение на Facebook и установить в магазин модуль, который свяжет магазин с приложением. После того, как вы настроите приложение и модуль, магазин появится на указанной странице в Facebook и сможет принимать заказы.

Примечание

У нас есть демо-магазин на Facebook. Мы там ничего не продаём, но зато видно, как работает встраивание магазина.

Шаг 1. Устанавливаем модуль Facebook Store

1.1. Модуль Facebook store бесплатен, но не поставляется вместе с CS-Cart, а доступен на GitHub. Вот прямая ссылка на архив с модулем. Можете либо скачать модуль себе на устройство, либо просто скопировать ссылку.

1.2. Установите модуль, как описано в инструкции; при установке можете либо загрузить модуль на сервер со своего компьютера, либо просто ввести ссылку из пункта 1.1.

1.3. Модуль Facebook store появится в списке установленных. Найдите модуль и нажмите на его название, чтобы открыть настройки.

  • App ID нужно ввести самостоятельно; это идентификатор приложения, он берётся из вашего приложения на Facebook. Приложение мы будем создавать в шаге 2.
  • Page ID заполнится автоматически после того, как вы всё настроите. Это идентификатор страницы, на которую будет добавлена вкладка с магазином.
  • Widget layout ID можно выбрать уже сейчас. Это макет, который будет использоваться для вашего магазина в Facebook.
  • Secure Page Tab URL и Facebook Web Games URL (https) нужно будет вставить в соответствующие поля в настройках вашего приложения на Facebook.

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

Шаг 2. Настраиваем приложение на Facebook

2.1. Создайте своё приложение на Facebook. Назвать его можно как угодно.

2.2. Сразу после создания вы попадёте на страницу приложения. ID приложения будет в самом верху страницы; скопируйте его и вставьте в настройки модуля Facebook store в поле App ID.

2.3. В приложении на Facebook перейдите в раздел Настройки > Основные:

  • В поле Пространство имён введите название, которое будет отображаться в ссылке на приложение; покупатели эту ссылку не увидят. Например, мы ввели embedding-test.
  • В поле Домены приложений введите домен вашего магазина.

2.4. В самом низу формы нажмите кнопку Добавить платформу и выберите Вкладка страницы. После этого в приложение добавится ещё одна секция с настройками:

  • Из настроек модуля скопируйте значение Secure Page Tab URL и вставьте его в поле Безопасный URL-адрес вкладки Страницы на стороне Facebook.
  • Введите желаемое название вкладки страницы в соответствующее поле. Это название увидят покупатели на вашей странице в Facebook.

2.5. Ещё раз нажмите Добавить платформу и выберите Веб-игры на Facebook. После этого в приложение добавится ещё одна секция с настройками:

  • Из настроек модуля скопируйте значение Facebook Web Games URL (https) и вставьте его в поле URL веб-игр на Facebook (https) на стороне Facebook.
  • Остальные настройки для этой платформы можно выключить.

2.6. Сохраните изменения в настройках модуля и в приложении, а затем в отдельной вкладке браузера перейдите по ссылке из поля URL Страницы веб-игр Facebook из настроек приложения на Facebook.

2.7. На открывшейся странице нажмите кнопку Select page, если у вас уже есть страница в Facebook, куда нужно добавить вкладку.

Подсказка

Если страницу вы пока не создали, то сначала создайте её по ссылке.

2.8. Выберите нужную страницу из выпадающего списка и нажмите кнопку Добавить страницу в закладке. После этого магазин появится на вашей странице в Facebook, а в настройках модуля Facebook Store в CS-Cart автоматически заполнится поле Page ID.

Шаг 3. Настраиваем внешний вид на Facebook

Порядок вкладок на странице Facebook можно изменить. Делается это перетаскиванием на стороне Facebook в настройках страницы (меню Настройки > Редактировать страницу).

Внешний вид магазина на Facebook можно также менять из панели администратора CS-Cart:

  • Страница Дизайн → Темы позволяет менять визуальное оформление магазина: цвета, шрифты и пр.

  • Страница Дизайн → Макеты позволяет менять блоки на витрине.

    Примечание

    Если для магазина на Facebook используется макет по умолчанию, то изменения в этом макете повлияют и на основной магазин.

У темы Responsive есть встроенный стиль Facebook. Он создан для того, чтобы магазин вписывался в дизайн социальной сети.