Как создать интернет-магазин во «Вконтакте» с помощью Shop-Script

Shop-Script позволяет создать витрину интернет-магазина в социальной сети в качестве IFrame-приложения. Каталог товаров и процесс оформления заказа отображаются непосредственно во «Вконтакте», все страницы при этом выглядят в таком же стиле, что и стандартные страницы «Вконтакте» — для того чтобы посетители воспринимали вашу онлайн-витрину как часть социальной сети:

Shop-Script во Вконтакте

1. Cоздание витрины для интернет-магазина во «Вконтакте»

Важно: для подключения интернет-магазина в виде приложения «Вконтакте» необходимо приобрести SSL-сертификат для доменного имени, на котором установлен Shop-Script.

Пользователям облака Webasyst SSL-сертификат предоставляется бесплатно для доменного имени вида ***.webasyst.cloud — на таком стандартном домене вы сможете создать полноценную онлайн-витрину во «Вконтакте» даже без покупки собственного доменного имени .RU или .COM.
  1. Установите фреймворк Webasyst и Shop-Script согласно инструкции.
  2. С помощью «Инсталлера» установите тему дизайна «Вконтакте».

  3. Перейдите в раздел «Структура» приложения «Сайт» и добавьте новое правило маршрутизации для приложения «Магазин». В поле для ввода адреса укажите vk/*



    Допускается указание любого другого адреса дополнительной витрины для «Вконтакте». При создании витрины с другим адресом вам помогут дополнительные рекомендации.
  4. В поле «Тема оформления» выберите из списка тему дизайна «Вконтакте».
  5. В поле «Публичность» включите флажок «Скрытое поселение», для того чтобы в главном меню вашей основной витрины не появился пункт, связанный с этой дополнительной витриной для «Вконтакте».
  6. Настройте другие параметры в свойствах этой витрины, как вам нужно, и сохраните изменения.

Откройте в браузере URL вновь созданной витрины, чтобы убедиться в том, что все сделано правильно. Например, если Shop-Script установлен по адресу вида mydomain.ru/, а поселение для дополнительной витрины добавлено с маской vk/*, то витрина для «Вконтакте», оформленная в стиле социальной сети, должна быть доступна по адресу mydomain.ru/vk/.


2. Создание приложения «Вконтакте»

  1. Перейдите в раздел сайта «Вконтакте» для разработчиков, откройте раздел «Мои приложения» и щелкните по кнопке «Создать приложение».

  2. Введите название и описание своего интернет-магазина, выберите платформу «Встраиваемое приложение», тип «Приложение», категорию «Магазины» и щелкните по кнопке «Перейти к загрузке приложения».

  3. После подтверждения перейдите в раздел «Настройки». Заполните следующие поля:
    • Тип приложения: IFrame
    • Адрес IFrame: сюда нужно скопировать HTTPS-адрес (URL) дополнительной витрины для «Вконтакте». В нашем примере это http://mydomain.ru/vk/.
      Для того чтобы ваше приложение было одобрено администрацией «Вконтакте», для вашего доменного имени должен быть установлен полноценный SSL-сертификат, и по адресу, введенному в поле «Адрес IFrame», должна открываться дополнительная витрина вашего интернет-магазина.
  4. Остальные настройки установите по своему усмотрению. Приложение будет работать без требования установки приложения: пользователь запускает приложение и сразу может оформить заказ. Если вы хотите, чтобы от каждого пользователя «Вконтакте» требовалась явная установка приложения, включите параметр «Установка приложения».
  5. Сохраните изменения.
  6. Скопируйте значения «ID приложения» и «Защищенный ключ» — они потребуются для настройки темы дизайна Shop-Script.
  7. Откройте раздел редактирования настроек темы дизайна в бекенде Shop-Script и вставьте скопированные значения «ID приложения» и «Защищенный ключ».



3. Готово!

Вы создали свой магазин во «Вконтакте» с помощью Shop-Script — теперь в нем можно принимать заказы от посетителей социальной сети.

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

Подключение других приложений Вебасиста

Темы дизайна, адаптированные для «Вконтакте», доступны и для других приложений: «Сайт», «Блог», «Фото». Благодаря этому существует возможность добавить на витрину вашего магазина для «Вконтакте» дополнительные вкладки: «О компании», «Наш блог», «Фотоальбом» и т. п., так же работающие на базе фреймворка Вебасист, как и витрина Shop-Script.

Для того чтобы разместить такие дополнительные страницы внутри вашего приложения, необходимо в разделе «Маршрутизация» Вебасист-приложения «Сайт» создать отдельные скрытые поселения для соответствующих приложений («Сайта», «Блога», «Фото») и выбрать в свойствах этих приложений тему дизайна «VK» так же, как ранее вы создали скрытое поселение для Shop-Script.

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

{$vk_tabs = [
    [
        'url' => '/vk/',
        'name' => 'Магазин'
    ]
    ,
    [
    'url' => '/vk/site/',
        'name' => 'О нас'
    ]
    ,
    [
        'url' => '/vk/blog/',
        'name' => 'Наш блог'
    ]
]}

В качестве значения элементов url нужно указывать маску соответствующего поселения, созданного в приложении «Сайт» (без символа * в конце). Для элементов name нужно указать произвольный заголовок, который будет отображаться на вкладке.

Вот так выглядит витрина приложения для «Вконтакте» со вкладками, добавленными в данном примере:

26 комментариев

  • 0
    Владислав Владислав 13 октября 2013 19:27 #
    Если указать в настройках https адрес, то полная беда получается.
    Во первых перестает работать слайдер и прокругка ветрины. Всё замерает в этой фиксированном окне. В общем не удобно. А если еще и сам пользователь Вконтакте сидит через https - вообще беда - сайт вообще не открывается...
  • 0
    Alex / struny.com.ua Alex / struny.com.ua 14 октября 2013 18:09 #
    я так понял без SSL-сертификата можно не делать?
  • +1
    Николай Пилотов Николай Пилотов 13 декабря 2015 04:35 #

    Ошибка в приложении ВКонтакте.

    Невозможно сделать заказ со страницы Вконтакте. В корзине при оформлении заказа, на 2-ом шаге, при выборе доставки недоступна кнопка "Далее", что не дает завершить оформление заказа.

    настройки сделаны по инструкции, шаблон темы "ВКонтакте" в бекэнде обновлен и стоит последней версии.

    В чем может быть проблема?

  • +1
    evfemizm evfemizm 22 декабря 2015 07:43 #

    А как решить вопрос с приёмом платежей по картам в ВКонтакте? Если витрина только в соцсетях и работает.

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

    Или единственный вариант создавать все-таки витрину на полноценном домене и под её "прикрытием" подключаться?

  • +1
    Виталий Виталий 25 января 2016 17:17 #

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

  • +1
    Сергей Иванов Сергей Иванов 8 марта 2016 16:02 #

    Добрый день!

    Какой адрес вносить в это окно для Вконтакте? Какой формат?

    Для Фейсбука в инструкции указали и ссылка работает.

    • +1
      Yuri Severny Yuri Severny 14 июля 2016 01:00 #

      Прежде необходимо пройти регистрацию в перечисленных социальных сетях. В Контакте перейдите на вкладку "Моя страница" и скопируйте адрес из строки браузера, например: https://new.vk.com/****** - на этой странице должен быть установлен в качестве приложения ваш Магазин, или указать ссылку на группу, смотря что вы указали во время установки приложения.
      В Твиттере формат имени пользователя: @*******
      Для канала YouTube необходимо зарегистрировать почтовый ящик на gmail.com
      Пользуясь логином и паролем почтового ящика пройти регистрацию на YouTube.

    • +1
      mercury-rus mercury-rus 16 марта 2016 06:30 #

      Коллеги! Доброго времени!
      Вопрос: На одном приложении Shop-Script 6 работает несколько витрин (для разных городов), возможна ли установка нескольких витрин интернет-магазина в vk в качестве IFrame-приложения для каждой витрины индивидуально? (Каждая витрина в Shop-Script 6 различный ассортимент и системы скидок/бонусов)
      Заранее спасибо!

    • +1

      Доброго времени суток всем! Такая проблема, все сделали по инструкции, но при открытии приложения в контакте, открывается пустая страница, что делать? В чем может быть проблема?

      • +1

        Посмотрите, какие сообщения появляются в консоли ошибок браузера.

        • +1

          Воспользовался вашим советом, выявил проблему следующего содержания - "Этот сайт использует сертификат SHA-1; рекомендуется использовать сертификаты с алгоритмами подписи, использующими более сильные хеш-функции, чем SHA-1" Данная проблема не могла возникнуть из за использование нами сертификата SSL на базе SHA-256 with RSA and SHA-1 root не стоит ли для устранения данной проблемы перевыпустить сертификат на SSL SHA-256 with RSA and SHA-256 root ?

          Вот еще ода ошибка, но что она означает я не совсем понимаю
          Load denied by X-Frame-Options: https://trend-market.kz/vkontakte/?api_url=https:/... does not permit cross-origin framing.

          Очень буду признателен за советы в решение данной проблемы!

          • +1

            Попробуйте в начале файла .htaccess в директории установки фреймворка добавить вот такие строки:

            Header add Access-Control-Allow-Origin "*"
            Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
          • +1

            Как вариант - в отсутствии SSL сертификата. Если вы войдете в ВК по незащищенному соединению, то приложение будет нормально отображаться.

          • +1
            IdeaMustBe IdeaMustBe 9 ноября 2016 19:47 #

            Любой ssl сертификат подойдет для приложений VK и FB?

            Например, этот ?

            GlobalSign DomainSSL

            Подтверждение бизнес-уровняНет


            Поддержка IDNНет



          • +1
            Roman - Roman - 10 февраля 2017 16:24 #

            Подскажите, как сделать так, чтобы в магазине ВКонтакте также отображалось ещё и меню вида:

            Сейчас ВКонтакте выводится только каталог товаров.

          • +1
            Сергей Абрамов Сергей Абрамов 9 марта 2017 23:21 #

            Подскажите пожалуйста 1. как сделать так чтобы было как в демо магазине при нажатии заказа еще и упаковки подарочные можно было купить добавляя к товару небольшую цену. и 2. Как настроить время переключения слайдов и вообще переключаются ли они автоматически (потому что у меня они тупо застыли и их нужно переключать вручную)

          • +1
            Канди Канди 28 апреля 2017 15:17 #

            Подскажите, если есть уже полноценный ИМ на shop-script, можно к нему этот модуль подключить, как дополнительную витрину, чтоб они работали в одной связке? (Т. е. добавлять товары, управлять заказами через бекэнд, но при этом в ВК также выгружаются новые товары, обновляются остатки, и пользователи могут там заказать и через обычный ИМ)

            Или я неверно поняла действия этого приложения?

            Добавить комментарий

            Чтобы добавить комментарий, зарегистрируйтесь или войдите