Я работаю с Vue Storefront последние несколько месяцев, и это был отличный опыт. Это одно из немногих решений с открытым исходным кодом, доступных для реализации PWA с использованием Magento 2 (и многих других платформ электронной коммерции) в серверной части, поэтому оно предлагает современные готовые решения для множества общих требований для веб-приложений (автономная поддержка , отложенная загрузка, небольшой размер пакета, рендеринг на стороне сервера и т. д.).
Чтобы получить общее представление о том, как работает Vue Storefront, я подумал, что было бы неплохо задокументировать, как реализовать канал Instragram в вашем магазине. Это относительно простые задачи, но они включают в себя множество основных концепций Vue Storefront, поэтому они могут быть полезным случаем «учиться на практике».
Прежде чем мы начнем
Важно понимать, что Vue Storefront - это совокупность нескольких работающих вместе «частей», а не одного большого объекта. Наиболее значимыми из них будут:
- Vue-storefront: обрабатывает интерфейс магазина, он работает на (как вы уже догадались) VueJS и многих других пакетах, которые определяют, как должны отображаться данные.
- Vue-storefront-api: поскольку Vue Storefront на 100% не зависит от платформы, этот сервис необходим, чтобы действовать как промежуточный уровень между интерфейсом и сервером. В большинстве случаев мы будем использовать его для подключения к Magento, но он может взаимодействовать с любым количеством провайдеров, например: WordPress, MailChimp или, в данном случае, Instagram.
Если вам интересно узнать больше об архитектуре Vue Storefront, я рекомендую посмотреть официальный технический скринкаст, поскольку он лучше объясняет все инструменты, лежащие в его основе, которые я когда-либо мог в этой статье.
Настройка конечной точки API
Чтобы получить фид Instagram пользователя, нам нужно использовать токен доступа для запроса Graph API Facebook. Не идеально раскрывать такую информацию во внешнем интерфейсе, так как это может привести к уязвимостям безопасности, поэтому мы должны делать это на стороне сервера.
К счастью, мы можем легко расширить vue-storefront-api с помощью настраиваемых конечных точек, которые возвращают нужные нам данные. 🎉
Начнем с создания следующего index.js файла в src/api/extensions/instagram-api/:
По сути, это расширяет экспресс-маршрутизатор Vue Storefront с помощью новой /feed конечной точки, которая будет делать запрос к Facebook Graph API с нашим идентификатором страницы и токеном доступа. Если есть какая-либо ошибка, он вернет 500 код состояния с ответом об ошибке, в противном случае он вернет канал Instagram пользователя в виде массива JSON.
Он также принимает необязательный параметр «limit», чтобы указать максимальное количество возвращаемых элементов.
Как видите, мы не указали жестко идентификатор страницы или токен доступа, поскольку они будут зависеть от проекта и должны храниться в файле config/local.json.
Откройте файл local.json и добавьте ключ instagram в список extensions со следующей информацией:
"instagram": {
"pageId": "FB PAGE ID",
"accessToken": "FB PAGE ACCESS TOKEN"
}
Чтобы получить идентификатор своей страницы, следуйте этим инструкциям: facebook.com/help/community/question/?id=378910098941520
Чтобы получить токен доступа с неограниченным сроком действия, следуйте этому SO-ответу: stackoverflow.com/a/35481577/455319
Теперь, чтобы включить наше расширение, добавьте «instagram-api» в список registeredExtensions в вашем local.json файле конфигурации.
Если все прошло хорошо, вы должны увидеть список последних публикаций в Instagram при посещении нашей пользовательской конечной точки vue-storefront-api /api/ext/instagram-api/feed:
Настройка веб-компонента
Теперь, когда у нас есть способ безопасно получить наш канал Instagram, мы можем начать думать о том, как его отобразить. Начиная с версии 1.6 Vue Storefront поощряет использование модулей для расширения своей функциональности, так что это может быть хорошим вариантом использования.
Создадим в папке src/modules/instagram-feed следующие файлы:
index.ts
Это точка входа для нашего модуля, в основном это шаблонный код, который устанавливает все данные, необходимые нашему модулю. В нашем случае он просто регистрирует новый модуль с именем instagram-feed и регистрирует хранилище Vuex.
store / index.ts
store / mutation-types.ts
Это создает действия, геттеры и мутации для Vuex store Vue Storefront. Самая важная часть - это действие get, которое отправляет запрос к API, который мы создали ранее, для получения последних сообщений Instagram, поскольку эта конечная точка может быть переменной, рекомендуется также сохранить ее в файле config/local.json, поэтому обязательно создайте также новый параметр:
"instagram": {
"endpoint": "http://your-vue-storefront-api-url.com/api/ext/instagram-api/feed"
}
компоненты / InstagramFeed.js
Наконец, наш пользовательский компонент, который можно использовать в качестве миксина, получает последние сообщения Instagram из хранилища Vuex при монтировании и предоставляет свойство feed, которое можно использовать в шаблоне. Это также позволяет нам изменять лимит подачи с помощью специальной limit опоры.
Теперь, чтобы зарегистрировать наш настраиваемый модуль, мы включаем его в src/modules/index.ts файл:
// Import module at the top
import { InstagramFeed } from '../modules/instagram-feed'
// Add to "registerModules" array
export const registerModules: VueStorefrontModule[] = [
...
InstagramFeed
]
Отображение ленты в интерфейсе
Чтобы завершить это, все, что нам нужно сделать, это создать разметку, чтобы фактически отображать канал на нашем веб-сайте.
Чтобы сэкономить время, давайте повторно воспользуемся кодом, который отображает раздел «Вдохновляйтесь» в теме по умолчанию. Создайте InstagramFeed.vue файл в src/themes/default/components/theme/blocks/InstagramFeed/InstagramFeed.vue:
Он выглядит почти так же, как файл TileLinks.vue по умолчанию, все, что мы здесь делаем, это используем наш миксин InstagramFeed и перебираем вычисляемое свойство feed для рендеринга доступного мультимедиа.
Давайте отобразим наш пользовательский компонент на главной странице нашего магазина, откроем Home.vue в src/themes/default/pages/Home.vue и добавим разметку для только что созданного элемента:
<template>
...
<section class="container pb60 px15">
<div class="row center-xs">
<header class="col-md-12 pt40">
<h2 class="align-center cl-accent">
{{ $t('Instagram') }}
</h2>
</header>
</div>
<instagram-feed limit="8" />
</section>
...
</template>
<script>
...
import InstagramFeed from 'theme/components/theme/blocks/InstagramFeed/InstagramFeed'
export default {
components: {
...
InstagramFeed
}
}
</script>
Если все в порядке, мы сможем увидеть нашу ленту Instagram на главной странице:
Самое замечательное в этом то, что, поскольку мы повторно используем TileLink разметку компонента, мы получаем ленивую загрузку и переходы CSS бесплатно.
Подведение итогов
Нам удалось использовать значительную часть технологий, которые являются частью Vue Storefront, однако есть еще несколько вещей, которые можно улучшить, например:
- Реализация TypeScript
- Кэширование фида
- Хранение медиафайлов в Elastic Search
- И многое другое…
Но в качестве быстрого введения этот модуль должен продемонстрировать некоторые функции, которые делают Vue Storefront отличным инструментом для создания магазинов электронной коммерции. 👋🏽
Код модуля доступен в GitHub, не стесняйтесь присылать любые вопросы и запросы на вытягивание:
