Інтернет-магазин у «Вконтакте» - Webasyst

1. 1. Створення вітрини для інтернет-магазину у «Вконтакте»
2. 2. Створення програми «Вконтакте»
3. 3. Готово!
4. Підключення інших додатків Вебасіста

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

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

для підключення інтернет-магазину у вигляді додатку «Вконтакте» необхідно придбати 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 /.

2. Створення програми «Вконтакте»

1. перейдіть в розділ сайту «Вконтакте» для розробників , Відкрийте розділ «Мої додатки» і натисніть на кнопку «Створити додаток».
   
2. Введіть назву та опис свого інтернет-магазину, виберіть платформу «Вбудоване додаток», тип «Додаток спільноти» і натисніть на кнопку «Перейти до завантаження програми».
   
3. Після підтвердження перейдіть в розділ «Налаштування». Заповніть наступні поля:
   • Адреса IFrame: сюди потрібно скопіювати HTTPS-адресу (URL) додаткової вітрини для «Вконтакте». У нашому прикладі це http://mydomain.ru/vk/ . Для того щоб ваше додаток було схвалено адміністрацією «Вконтакте», для вашого доменного імені повинен бути встановлений повноцінний SSL-сертифікат, і за адресою, введеному в полі «Адреса IFrame», повинна відкриватися додаткова вітрина вашого інтернет-магазину.
     Якщо ви створили вітрину для «Вконтакте» на стандартному домені виду ***. Webasyst.cloud і отримали помилку «Адреса iframe веде на небезпечний сайт», зверніться в службу підтримки «Вконтакте» включити підтримку технології SNI для вашого облікового запису. Якщо вам не вдасться домогтися такої зміни, то напишіть в службу підтримки Webasyst з проханням додати для вашого облікового запису службовий домен виду ***. host.webasyst.com. Після цього помилка додавання додатки у «Вконтакте» повинна зникнути - це тимчасове рішення для обходу технічного обмеження з боку соцмережі.
     
   • Мобільна версія: Скопіюйте сюди значення поля Адреса IFrame, якщо потрібно додати мобільну версію вітрини магазину.
   
   
4. Інші налаштування встановіть на свій розсуд.
5. Скопіюйте значення «ID додатки» і «Захищений ключ» - вони будуть потрібні для настройки теми дизайну Shop-Script.
6. Відкрийте розділ редагування налаштувань теми дизайну в бекенде 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 потрібно вказати довільний заголовок, який буде відображатися на вкладці.

Ось так виглядає вітрина додатки для «Вконтакте» з вкладками, доданими в даному прикладі: