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

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

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

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

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

Пользователям облака Webasyst SSL-сертификат предоставляется бесплатно для доменного имени вида ***.webasyst.cloud или ***.host.webasyst.com. На таком стандартном домене можно создать полноценную онлайн-витрину во «Вконтакте» даже без покупки собственного доменного имени, например, .RU или .COM.
  1. Установите фреймворк Webasyst и Shop-Script согласно инструкции.
  2. С помощью «Инсталлера» установите тему дизайна «Вконтакте».
  3. Перейдите в раздел «Структура» приложения «Сайт» и добавьте новое правило маршрутизации для приложения «Магазин». В поле для ввода адреса укажите vk/*
  4. В полях «Тема оформления» и «Мобильная тема оформления» выберите тему дизайна «Вконтакте».
  5. Включите флажок «Скрытое поселение», чтобы в главном меню вашей основной витрины не появился пункт, связанный с этой дополнительной витриной для «Вконтакте».
  6. Настройте другие параметры в свойствах этой витрины, как вам нужно, и сохраните изменения.

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

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

Перейдите на страницу создания приложения «Вконтакте».

Введите название и описание своего интернет-магазина.

Выберите значения:

  • Платформа: Встраиваемое приложение
  • Тип: VK Mini Apps
  • Категория: Покупки

Щелкните по кнопке «Перейти к настройке приложения».

На странице управления приложением перейдите в раздел «Настройки».

Скопируйте значения «ID приложения» и «Защищённый ключ» — они потребуются для настройки темы дизайна Shop-Script.

Заполните поля:

Версия для vk.com → URL: вставьте HTTPS-адрес (URL) дополнительной витрины для «Вконтакте». В нашем примере это https://mydomain.ru/vk/. Замените mydomain.ru на своё доменное имя. Этот адрес должен работать по протоколу HTTPS.

Для того чтобы ваше приложение было одобрено администрацией «Вконтакте», для вашего доменного имени должен быть установлен полноценный SSL-сертификат. По адресу, введенному в поле «Адрес IFrame», должна открываться дополнительная витрина вашего интернет-магазина.

Если вы создали витрину для «Вконтакте» на стандартном домене вида ***.webasyst.cloud и получили ошибку «Адрес iframe ведёт на небезопасный сайт», обратитесь в службу поддержки «Вконтакте» включить поддержку технологии SNI для вашего аккаунта.

Если вам не удастся добиться такого изменения, то напишите в службу поддержки Webasyst с просьбой добавить для вашего аккаунта служебный домен вида ***.host.webasyst.com. После этого ошибка добавления приложения во «Вконтакте» должна исчезнуть — это временное решение для обхода технического ограничения со стороны соцсети.

Версия для m.vk.com → URL: Скопируйте сюда значение из блока «Версия для vk.com».

Сохраните изменения.

Откройте раздел редактирования настроек темы дизайна в панели управления Shop-Script и вставьте скопированные значения «ID приложения» и «Защищённый ключ».

Вернитесь на страницу настроек приложения «Вконтакте» и откройте раздел «Модерация».

Перейдите по ссылке «Отправить заявку на размещение в каталоге» и завершите процесс модерации приложения, следуя подсказкам интерфейса.

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

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

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

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

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

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

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

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

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

52 комментария

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

    Я вот тоже пытался сделать магазин вк, но толкового ничего не вышло, пока я не наткнулся на этот курс http://infosklad.org/threads/magazin-vkontakte.7380/ рекомендую толковый курс

  • +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
      Radion Galimov Radion Galimov 18 июля 2016 17:37 #

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

      • +1

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

        • +1
          Radion Galimov Radion Galimov 22 июля 2016 18:36 #

          Воспользовался вашим советом, выявил проблему следующего содержания - "Этот сайт использует сертификат 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, можно к нему этот модуль подключить, как дополнительную витрину, чтоб они работали в одной связке? (Т. е. добавлять товары, управлять заказами через бекэнд, но при этом в ВК также выгружаются новые товары, обновляются остатки, и пользователи могут там заказать и через обычный ИМ)

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

          • +1
            denis gulin denis gulin 27 октября 2017 17:59 #

            Сделал все по инструкции, отправил на проверку вконтакте, послали сюда.

            Администрация отклонила Вашу заявку со следующими замечаниями:

            Используйте приложения сообществ https://vk.com/blog/community-apps

            без этого не могу рекламировать. что делать?

          • +1

            ВК больше не даёт добро на приложения iframe в составе группы ВК. Оставьте ваше приложение не отправляя его на модерацию. Оно будет всем видно и доступно. Модерация ни на что не влияет, кроме включения приложения в каталог ВК.

          • +1
            Storm Storm 5 декабря 2017 22:52 #

            Добрый день.

            Какой сертификат SSL для vk.com подойдет вот отсюда https://multihost.ru/ssl-sertifikatyi.html ?

            Начальный подойдет ?

          • +1
            Татьяна Татьяна 10 декабря 2017 14:42 #

            Добрый день. При заполнении формы в Настройках приложения в Контакте не получается ввести адрес IFrame.

            Ввожу адрес https://diva-shop.webasyst.cloud/vk/

            Появляется сообщение об ошибке: Адрес iframe ведёт на небезопасный сайт

            Данные не сохраняются...

            Как быть?

            • +1
              Михаил Ушенин Михаил Ушенин Webasyst 11 декабря 2017 11:16 #

              Возможно, причина ошибки в том, что "Вконтакте" не умеет работать с расширением SNI, которое используется для доменов вида ***webasyst.cloud.

              Попробуйте вместо домена ***.webasyst.cloud настроить ВК-витрину на домене ***.host.webasyst.com.

              • +1
                Татьяна Татьяна 16 декабря 2017 15:51 #

                Михаил, эта часть домена недоступна для редактирования в личном кабинете в разделе Структура сайта

              • +1
                LeMs LeMs 7 февраля 2018 11:05 #

                После создания магазина не работает прокрутка. Как с этим бороться?

              • +1

                Добрый вечер, все сделала как в инструкции, не работает,в витрине приложения пишут:

                Not Found

                The requested resource was not found on this server.

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

                При нажатии на кнопку "Открыть витрину", путь почему-то на витрину shop2, хотя ее тоже не открывает.

                Спасибо!

              • +1
                Alexvk Alexvk 31 января 2019 16:54 #

                Добрый день!

                Установил данную тему, но не получается ее запустить.

                Подскажите пожалуйста куда "копать"?

              • +1
                fieldvis fieldvis 18 февраля 2020 01:55 #

                Кто скажет. Эта схема с витриной магазина в VK еще работает? Как подключать?

                • +1
                  Михаил Ушенин Михаил Ушенин Webasyst 18 февраля 2020 09:25 #

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

                  • +1
                    fieldvis fieldvis 18 февраля 2020 10:30 #

                    Вопрос больше в том, что у вас в демо работает. А в реальности делая по инструкции нет функционала в самом VK

                    • +1

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

                    • +1

                      Нет, не работает. ВК прикрыл возможность создания iframe-приложений. Так что статейку можно в архив. Используйте сервис Товары от ВК и соответствующие плагины.

                    • +1
                      Nick Nick 16 мая 2020 10:43 #

                      Установил все по инструкции, магазин не прошел проверку в вк, пришло сообщение:

                      К сожалению, Ваше приложение не запускается на мобильных устройствах. Скорее всего это происходит потому что не вызывается событие VKWebAppInit (Подробнее: https://vk.com/dev/vk_bridge_events?f=Инициализация V..).
                      Для работы с API ВКонтакте используется React JS, если ранее Вы не были знакомы с данной библиотекой, рекомендуем Вам начать с данного руководства: https://ru.reactjs.org/tutorial/tutorial.html
                      Команда поддержки ВКонтакте

                      Подскажите как исправить? сам ничего не понял и того что написано в ссылках :)

                      • +1

                        Попробуйте не заполнять настройку «Версия для m.vk.com → URL» — она предназначена для пользователей мобильных устройств. Возможно, ограничение «Вконтакте» относится только к мобильным устройствам.

                      • +1
                        Антон Загайнов Антон Загайнов 11 августа 2020 13:25 #

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

                        Как изменить категории товаров?

                        • +1
                          Михаил Ушенин Михаил Ушенин Webasyst 11 августа 2020 18:33 #

                          Набор и названия категорий товаров можно изменить в разделе управления магазина «Товары».

                          • +1
                            Антон Загайнов Антон Загайнов 12 августа 2020 10:15 #

                            Спасибо за быстрый ответ.

                            В разделе управления магазина «Товары» все нормально.


                            Мне нужно, что бы вместо отображаемых категорий товаров были "Автомагнитолы", "Усилители", "Сабвуферы" и "Акустика".

                            Во время настройки темы "Вконтакте" я указал отображаемые категории.

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

                            • +1
                              Антон Загайнов Антон Загайнов 12 августа 2020 14:13 #

                              Разобрался. В настройках необходимых категорий товаров нужно было настроить видимость для витрины vk.

                              Спасибо.

                            • +1
                              fieldvis fieldvis 29 декабря 2020 13:27 #

                              Что-то с фильтром в этой теме. Хоть из кода выпиливай. Огромная портянка вниз

                            • +1
                              fieldvis fieldvis 29 декабря 2020 13:29 #

                              Так же не понятно что с отступом между фото и описанием в карточке товара

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

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