Shop-Script позволяет создать витрину интернет-магазина в социальной сети в качестве IFrame-приложения. Каталог товаров и процесс оформления заказа отображаются внутри «Вконтакте», все страницы при этом выглядят в таком же стиле, что и стандартные страницы соцсети. Так пользователи будут воспринимать вашу онлайн-витрину как часть социальной сети.
Создание витрины для интернет-магазина во «Вконтакте»
Важно: для подключения интернет-магазина в виде приложения «Вконтакте» нужно приобрести SSL-сертификат для доменного имени, на котором установлен Shop-Script.
Пользователям облака Webasyst SSL-сертификат предоставляется бесплатно для доменного имени вида ***.webasyst.cloud или ***.host.webasyst.com. На таком стандартном домене можно создать полноценную онлайн-витрину во «Вконтакте» даже без покупки собственного доменного имени, например, .RU или .COM.
- Установите фреймворк Webasyst и Shop-Script согласно инструкции.
- С помощью «Инсталлера» установите тему дизайна «Вконтакте».
- Перейдите в раздел «Структура» приложения «Сайт» и добавьте новое правило маршрутизации для приложения «Магазин». В поле для ввода адреса укажите vk/*
- В полях «Тема оформления» и «Мобильная тема оформления» выберите тему дизайна «Вконтакте».
- Включите флажок «Скрытое поселение», чтобы в главном меню вашей основной витрины не появился пункт, связанный с этой дополнительной витриной для «Вконтакте».
- Настройте другие параметры в свойствах этой витрины, как вам нужно, и сохраните изменения.
Откройте в браузере 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 нужно указать произвольный заголовок, который будет отображаться на вкладке.
Вот так выглядит витрина приложения для «Вконтакте» со вкладками, добавленными в данном примере:
33 комментария
Во первых перестает работать слайдер и прокругка ветрины. Всё замерает в этой фиксированном окне. В общем не удобно. А если еще и сам пользователь Вконтакте сидит через https - вообще беда - сайт вообще не открывается...
Ошибка в приложении ВКонтакте.
Невозможно сделать заказ со страницы Вконтакте. В корзине при оформлении заказа, на 2-ом шаге, при выборе доставки недоступна кнопка "Далее", что не дает завершить оформление заказа.
настройки сделаны по инструкции, шаблон темы "ВКонтакте" в бекэнде обновлен и стоит последней версии.
В чем может быть проблема?
Вроде бы эту проблему решали в последнем обновлении, но если осталась, то временное решение описано вот здесь.
Добрый день!
Какой адрес вносить в это окно для Вконтакте? Какой формат?
Для Фейсбука в инструкции указали и ссылка работает.
Прежде необходимо пройти регистрацию в перечисленных социальных сетях. В Контакте перейдите на вкладку "Моя страница" и скопируйте адрес из строки браузера, например: https://new.vk.com/****** - на этой странице должен быть установлен в качестве приложения ваш Магазин, или указать ссылку на группу, смотря что вы указали во время установки приложения.
В Твиттере формат имени пользователя: @*******
Для канала YouTube необходимо зарегистрировать почтовый ящик на gmail.com
Пользуясь логином и паролем почтового ящика пройти регистрацию на YouTube.
Коллеги! Доброго времени!
Вопрос: На одном приложении Shop-Script 6 работает несколько витрин (для разных городов), возможна ли установка нескольких витрин интернет-магазина в vk в качестве IFrame-приложения для каждой витрины индивидуально? (Каждая витрина в Shop-Script 6 различный ассортимент и системы скидок/бонусов)
Заранее спасибо!
Да, возможно. Создайте необходимое количество витрин с темой для ВК и настройте их соответствующим образом (ассортименты, скидки и т.п.).
Доброго времени суток всем! Такая проблема, все сделали по инструкции, но при открытии приложения в контакте, открывается пустая страница, что делать? В чем может быть проблема?
Посмотрите, какие сообщения появляются в консоли ошибок браузера.
Воспользовался вашим советом, выявил проблему следующего содержания - "Этот сайт использует сертификат 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.
Очень буду признателен за советы в решение данной проблемы!
Попробуйте в начале файла .htaccess в директории установки фреймворка добавить вот такие строки:
Как вариант - в отсутствии SSL сертификата. Если вы войдете в ВК по незащищенному соединению, то приложение будет нормально отображаться.
Любой ssl сертификат подойдет для приложений VK и FB?
Например, этот ?
GlobalSign DomainSSL
Подозреваю, что да. Однако вам лучше стоит уточнить это в службах поддержки этих сервисов.
Подскажите, как сделать так, чтобы в магазине ВКонтакте также отображалось ещё и меню вида:
Сейчас ВКонтакте выводится только каталог товаров.
Для этого нужно редактировать исходный код темы дизайна для "Вконтакте". За помощью в редактировании вы можете обратиться к партнёрам Webasyst.
ВК больше не даёт добро на приложения iframe в составе группы ВК. Оставьте ваше приложение не отправляя его на модерацию. Оно будет всем видно и доступно. Модерация ни на что не влияет, кроме включения приложения в каталог ВК.
Добрый день.
Какой сертификат SSL для vk.com подойдет вот отсюда https://multihost.ru/ssl-sertifikatyi.html ?
Начальный подойдет ?
Это вопрос лучше адресовать службе поддержки VK.
Добрый день. При заполнении формы в Настройках приложения в Контакте не получается ввести адрес IFrame.
Ввожу адрес https://diva-shop.webasyst.cloud/vk/
Появляется сообщение об ошибке: Адрес iframe ведёт на небезопасный сайт
Данные не сохраняются...
Как быть?
Возможно, причина ошибки в том, что "Вконтакте" не умеет работать с расширением SNI, которое используется для доменов вида ***webasyst.cloud.
Попробуйте вместо домена ***.webasyst.cloud настроить ВК-витрину на домене ***.host.webasyst.com.
Михаил, эта часть домена недоступна для редактирования в личном кабинете в разделе Структура сайта
Если в вашем аккаунте нет домена на *.host.webasyst.com, напишите в службу поддержки, чтобы вам его добавили. Скорее всего, после этого проблема устранится автоматически.
Кто скажет. Эта схема с витриной магазина в VK еще работает? Как подключать?
Какие сложности у вас возникли при подключении магазина по информации этой статьи?
Вопрос больше в том, что у вас в демо работает. А в реальности делая по инструкции нет функционала в самом VK
Все ранее созданные iframe-приложения продолжают функционировать так же как обычно. Новое же iFrame приложение нет возможности создать. Как следствие, нет возможности организовать магазин по схеме описанной в этой статье.
Нет, не работает. ВК прикрыл возможность создания iframe-приложений. Так что статейку можно в архив. Используйте сервис Товары от ВК и соответствующие плагины.
Установил все по инструкции, магазин не прошел проверку в вк, пришло сообщение:
К сожалению, Ваше приложение не запускается на мобильных устройствах. Скорее всего это происходит потому что не вызывается событие VKWebAppInit (Подробнее: https://vk.com/dev/vk_bridge_events?f=Инициализация V..).
Для работы с API ВКонтакте используется React JS, если ранее Вы не были знакомы с данной библиотекой, рекомендуем Вам начать с данного руководства: https://ru.reactjs.org/tutorial/tutorial.html
Команда поддержки ВКонтакте
Подскажите как исправить? сам ничего не понял и того что написано в ссылках :)
Попробуйте не заполнять настройку «Версия для m.vk.com → URL» — она предназначена для пользователей мобильных устройств. Возможно, ограничение «Вконтакте» относится только к мобильным устройствам.