Как Click Here Labs разблокировала компонуемую коммерцию с помощью Atlas

В настоящее время WP Engine поддерживает крупнейшее совместное сообщество агентств WordPress через нашу партнерскую программу для агентств.

На этом сеансе по запросу от DE{CODE} 2023 вы узнаете, как партнер агентства WP Engine Click Here Labs использовал новый проект Atlas BigCommerce Blueprint, чтобы переосмыслить интернет-магазин Combat Corner. Вы также получите демоверсию BigCommerce Blueprint, чтобы создать собственный сайт электронной коммерции Atlas всего за 10 минут!

Динамики:

• Джонатан Джетер, директор по техническому производству Click Here Labs
• Брайан Смит, главный менеджер по продуктам WP Engine

Слайды сессии:

Стенограмма:

БРАЙАН СМИТ: Всем привет. Меня зовут Брайан Смит, главный менеджер по продукту в WP Engine. Сегодня мы поговорим о том, как Click Here Labs разблокировала компонуемую коммерцию с помощью Atlas.

Сегодня ко мне присоединился Джонатан Джетер, директор по техническому производству в Click Here Labs. Он возглавляет команду там. Это агентство-партнер WP Engine, с которым мы очень тесно сотрудничали в течение последних нескольких месяцев, чтобы привлечь нашего первого безголового или компонуемого коммерческого клиента к Atlas.

Через минуту мы углубимся в этот пример, но прежде я хотел бы немного поговорить о состоянии рынка компонуемой разработки. Такие компонуемые и безголовые — здесь мы используем их взаимозаменяемо. Без головы часто подразумевает компонуемость.

И это не только потому, что эти сайты настолько эффективны, что спрос на них растет. Они легко настраиваются и могут быстро адаптироваться к меняющемуся технологическому ландшафту, а также к постоянно меняющейся бизнес-среде, в которой результаты вашего бизнеса могут часто меняться. Они обеспечивают динамический опыт со скоростью статики, о чем мы поговорим сегодня позже.

И вы также можете масштабировать их без переплатформы. В тематическом исследовании, которое мы представим сегодня, клиент Click Here Labs фактически смог остаться в BigCommerce, их бэкенде электронной коммерции, интегрировать WordPress в качестве своей CMS и перенести все это на безголовую витрину магазина. Но все эти новые технологии часто могут быть непомерно дорогими, поэтому мы потратили последние несколько лет на решение самых серьезных проблем разработки с помощью Atlas of building sites таким образом.

И Atlas, конечно же, больше, чем просто хост. Это больше, чем интерфейсный фреймворк. У него есть уровень API, плагин настраиваемых полей, локальное приложение для разработки — все, что вам нужно для начала работы. Но, возможно, самое главное, у него есть обучающее сообщество и поддержка.

Тем не менее, со всеми этими инструментами у вас под рукой, мы не будем винить вас за некоторую усталость от принятия решений. Может быть трудно даже начать, когда у вас под рукой так много вариантов, и вот тут-то и приходят на помощь чертежи.

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

Кроме того, это также поможет вам изучить платформу и наши лучшие практики. Так что это подготовит вас к следующему проекту, но до сих пор планы, которые у нас были, были ограничены более статичными вариантами использования сайта, такими как портфолио или сайты типа блога — ничто так не динамично, как безголовая витрина.

И именно поэтому мы создали план BigCommerce. Итак, этот план, который мы продемонстрируем вам здесь через минуту, поставляется с предварительно настроенным WPGraphQL, Atlas Content Modeler, фреймворком Faust JS, а также несколькими новыми вещами — плагином коммерческих блоков Atlas, который позволяет вам для переноса данных о продукте в редактор WordPress, а затем также коммерческий коннектор, который подключает вас к API BigCommerce, позволяя синхронизировать данные из BigCommerce в WordPress, синхронизировать их.

Вы можете построить из них модели контента, а также включить плагин этого блока. Итак, почему бы мне не показать вам, как это работает, и мы перейдем к демонстрации…

Итак, вот мы и на портале WP Engine на странице Атласа. Итак, когда вы создаете новое приложение Atlas, вы можете начать с чертежа, и здесь у вас будет несколько вариантов. Что мы собираемся сделать здесь, так это выбрать план BigCommerce справа.

И отсюда вы также можете предварительно просмотреть эту витрину или просмотреть код в GitHub. Мы выберем этот план и нажмем «Продолжить». Итак, следующий шаг — подключиться к вашей учетной записи GitHub.

А затем мы клонируем наш репозиторий в ваш. Итак, вы выбираете свою учетную запись GitHub, имя репозитория, а затем мы нажимаем «Создать приложение».

Итак, во время этого процесса происходит несколько вещей. Во-первых, мы предоставляем сайт WordPress. Мы создаем код Atlas для приложения Atlas. И тогда он будет развернут. И этот процесс обычно занимает около пяти минут, но здесь мы его ускорили.

После создания сайта WordPress мы можем подключиться к коннектору BigCommerce, который вы увидите здесь на экране. Экран конфигурации — мы введем учетные данные, а затем сможем запустить синхронизацию этого продукта.

И я подключил это к учетной записи песочницы Atlas, а также к учетной записи песочницы BigCommerce. И я могу импортировать продукты, которые у меня есть в этой учетной записи BigCommerce. Я только что получил около 13 демонстрационных продуктов.

Я хотел отметить здесь, что после этой начальной синхронизации вам фактически не нужно запускать ее снова, чтобы получать обновления. Плагин поддерживает веб-хуки, а также ночную работу cron. А затем, как только эти продукты будут импортированы, он также синхронизирует изображения.

А потом мы пойдем и посмотрим на продукты. Итак, наши продукты загружены. Вы можете увидеть их здесь, на странице «Продукты». Это демонстрационные продукты с сайта BigCommerce.

Мы перейдем на страницу «Подробности» одного из них, и все, что я здесь показываю, — это все поля данных, которые мы внесли — заголовок, изображения, описания. Это все есть.

Итак, теперь он есть в WordPress. Он синхронизирован для вас. Вы вносите изменения на сайте BigCommerce, он сразу же обновляется.

Теперь я хочу показать вам модели контента, которые мы создали с помощью Atlas Content Modeler. Это всего лишь пример. И я думаю, имейте это в виду с этими. Это действительно отправная точка для вас, чтобы показать вам, как мы это сделали.

Эти модели контента приводят в действие нашу страницу сведений о продукте на витрине безголового магазина, которую мы рассмотрим через минуту. Просто пример гибкости моделирования контента с помощью Atlas Content Modeler. Хорошо, теперь я покажу вам плагин Commerce Blocks, о котором мы говорили ранее.

Мы перейдем на главную страницу в редакторе блоков в WordPress. И здесь вы видите этот раздел «Купить наш последний продукт». Это торговые блоки.

Итак, что вы можете сделать, так это выбрать тип блока, последние продукты, популярные продукты, количество показов, которые вы хотите показать. Мы показываем четыре там. Все это идет со стороны BigCommerce. Вот еще один пример ниже на странице — товары со скидкой, просто как альтернатива тому, как вы можете их использовать.

До сих пор мы видели модели контента и плагин блоков. Вот все, что установлено на сайте WordPress. Это все те плагины, о которых мы упоминали ранее.

ХОРОШО. Вот мы и на витрине. Это наша безголовая витрина, которую вы можете увидеть в URL-адресе. Вы можете увидеть наши товарные блоки на странице.

А это простая витрина. Это действительно должно быть отправной точкой. По этой причине мы постарались сделать его максимально простым. Далее я перехожу на страницу магазина.

Здесь вы можете увидеть всю нашу продукцию. Так что эта страница на самом деле является моделью контента, страницей сведений о продукте. Вы можете видеть, что у нас внизу есть место для отзывов. Следующим нашим шагом будет добавление этого товара в корзину.

И вы увидите, что тележка на самом деле тоже безголовая. Так что все это находится на интерфейсе Atlas. Теперь для оформления заказа мы делаем перенаправление на BigCommerce. Для целей этого плана мы посчитали, что это наиболее разумно, но все остальное находится на безголовой передней части Atlas.

Вот мы и вернулись к магазину. Вот страница «О нас» — просто пример того, что вы можете сделать с размещением этих разных разделов страницы. Так что вы можете взять его, использовать его, учиться у него. Это действительно цель здесь, чтобы вы начали быстро.

Хорошо, вот и все, и на этом я передам это Джонатану, чтобы он более подробно рассказал о том, как Click Here Labs взяли этот план и расширили его для реального варианта использования клиента. Тебе слово, Джонатан.

ДЖОНАТАН ДЖИТЕР: Спасибо, Брайан. Прежде чем мы поговорим о расширении плана, я сначала хотел немного обсудить планирование решения. Прежде чем мы начнем очень гибкое компонуемое коммерческое решение, мы хотим убедиться, что мы правильно спланировали его, чтобы убедиться, что мы используем соответствующие части.

И мы всегда начинаем с документации API и функциональных требований. Итак, в этом случае для BigCommerce мы просмотрели их документацию по API, чтобы убедиться, что все функции, которые нужны клиенту в их магазине, доступны через API. А что не было, нам нужно было спланировать, как мы собираемся удовлетворить эти потребности, удовлетворить эти требования.

Итак, в рамках этого плана вам нужно определить, где будет выполняться каждое требование, верно? Это через нативную BigCommerce? Это через Вордпресс? Это через интерфейсное приложение, которое вы создаете, или через сторонние приложения?

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

А затем мы должны были взглянуть, например, на то, что Брайан говорил о корзине, говорил о разделе аккаунта. Он говорил о разных вещах. Какие из этих частей мы собирались делать в разных системах? Так, например, в этом случае мы решили для корзины, для оформления заказа, для учетной записи клиента сделать это в родном приложении.

Затем контент сайта — мы хотели убедиться, что его можно правильно классифицировать, чтобы клиент мог чувствовать себя комфортно, добавляя этот контент через стандартный интерфейс WordPress. Мы также агрегировали некоторые данные внутри WordPress, чтобы представить их во внешнем интерфейсе по-другому. Это были бы вещи, которые, возможно, не были доступны в самой BigCommerce, и тогда нам пришлось бы учитывать сторонние приложения.

Куда поступали или уходили данные для их CRM, для отслеживания, для подобных вещей, и, наконец, вам нужно спланировать — какие компоненты вы собираетесь встроить в этот интерфейс и где они собираются работать. данные откуда?

Таким образом, максимальная гибкость означает, что вам нужно принять множество решений и помнить, что вы в основном создаете приложение для электронной коммерции со всеми инструментами, доступными в Atlas, и в данном случае в BigCommerce, чтобы иметь возможность создать этот магазин. Поэтому я просто хотел подчеркнуть, что очень важно составить этот план, чтобы понять, во что вы ввязываетесь.

И проведите эти обсуждения с клиентом и скажите, что это то, что мы строим. Это то, что останется в нативном приложении. Это то, что будет на переднем плане.

Те части, которые защищены паролем, например, «Моя учетная запись», «История платежей» и тому подобное, — опять же, это вещи, которые не будут индексироваться. Так что менее важно, чтобы они были во внешнем приложении. Итак, как только вы это выясните, и мы настроим план, теперь вы готовы к работе.

Теперь мы говорим о расширении плана, верно? Так что в этом участвует? Здесь мы увидим, что клиентское приложение запущено. И теперь вам нужно построить все те дополнительные элементы, которые сделают магазин уникальным, который заставит его делать то, что нужно вашему клиенту.

Так, например, в BigCommerce есть некоторые нативные функции, доступные в API, такие как сопутствующие товары, группы клиентов и тому подобное. И поэтому клиент по-прежнему использует нативную версию BigCommerce для управления сопутствующими товарами, для управления различными группами клиентов, для управления выходом товаров в продажу, кодами скидок и тому подобными вещами.

Мы берем эти данные и представляем их во внешнем интерфейсе. У нас также были сторонние приложения, которые были установлены в BigCommerce, верно? Есть настройщик продукта.

А потом данные из разных мест — их нужно было учитывать. И эти компоненты затем могут быть созданы, например, на странице сведений о продукте, верно? Если есть продукт, который можно настроить, значит, вы можете изменить цвет.

Вы можете добавить логотипы. Вы можете делать такие вещи, верно? Этот настройщик позволяет это сделать. Так что это разные части, которые были построены на сторонних функциях.

И, наконец, есть функциональность, встроенная непосредственно во внешний интерфейс. Например, матрица сравнения продуктов — мы все видели это в разных местах. Сравните три разных продукта, посмотрите, какие разные атрибуты, как они сравниваются, возможность объединять продукты в продажу, скидка на набор. А еще есть вещи, которые, например, доступны в нативной версии BigCommerce, но по какой-то причине API не выполняет эту функциональность.

Таким образом, загрузчик файлов — это пример того, что нам пришлось создать во внешнем интерфейсе, используя различные функции в серверной части. Таким образом, это все, что вы создаете, чтобы расширить этот план, и некоторые из них будут включены в расширенный план или план премиум-класса, о котором, я думаю, Брайан собирается рассказать здесь довольно скоро.

БРАЙАН СМИТ: Спасибо, Джонатан. Теперь я быстро расскажу о дорожной карте Atlas. Мы разбили это на столбцы «Сейчас», «Далее» и «Позже».

В столбце «Сейчас» вы увидите жирным шрифтом наши инициативы Atlas, касающиеся электронной коммерции. Вон там, слева, план BigCommerce — он доступен для всех, кто может попробовать прямо сейчас. Мы также работаем над API витрины.

Это уровень данных, который будет объединять контент из WordPress, BigCommerce или любых других сторонних источников, которые вас интересуют. Итак, вот способ интегрировать их все. Мы работаем над бета-версией прямо сейчас, так что следите за новостями, чтобы узнать подробности.

Далее мы будем работать над планом Shopify. Это аналогичная интеграция с BigCommerce, но в данном случае это будет Shopify. А затем, когда мы отойдем от этого, мы сосредоточимся на персонализации и локализации без головы. Мы знаем, что эти вещи действительно важны для динамичных витрин. И это то, что мы хотим обеспечить тесной интеграцией с торговой платформой Atlas.

Поэтому, если вы готовы начать работу с планом BigCommerce, вы можете открыть бесплатную учетную запись песочницы Atlas сегодня, чтобы попробовать ее. Если у вас уже есть учетная запись Atlas, план, конечно же, доступен и вам. Иди попробуй сегодня.

Попробуйте это в своем следующем проекте. Поделитесь с нами вашими мыслями. Всем спасибо. Мы очень ценим ваше время сегодня. Хорошего дня.