При разработке пользовательских тем и поведения Stencil, BigCommerce Storefront APIs являются отличным инструментом для улучшения взаимодействия с клиентским кодом. API витрины позволяет разработчикам управлять тележкой покупателя, которая извлекает данные о товарах с помощью JavaScript. На странице отображения продукта этот API дает вам возможность дополнять продукты в непостоянной среде и упрощает процесс внесения сложных изменений.

Начиная

Если вы еще не знакомы с API BigCommerce, я рекомендую для начала просмотреть нашу документацию по пользовательским шаблонам и сопоставлению пользовательских шаблонов с модулями JavaScript. В нашем Центре разработки также есть руководство по Работа с API витрины для тестирования этих конечных точек.

Здесь, в Блоге разработчиков BigCommerce, мы ранее публиковали примеры того, как использовать API витрины для расширенных вариантов использования. В статье Брайана Дэвенпорта Создайте форму массового заказа с использованием BigCommerce Storefront API и React он демонстрирует основанный на React подход к созданию сложных тележек. Если вы еще не пробовали применить свои навыки React к шаблону Stencil, статья Патрика Пуэнте Создание пользовательских шаблонов BigCommerce React с помощью Stencil - еще один отличный ресурс, который стоит проверить. Патрик закладывает основу для создания модифицированной среды разработчика, поддерживающей компоненты React, и реализации настраиваемого шаблона для передачи свойств.

Создание пользовательской страницы отображения продукта

В этом руководстве мы используем выборку для доступа к API корзины витрины и добавления нескольких товаров в корзину с помощью ванильного JavaScript. Для этого мы используем Storefront API, потому что мы вносим изменения во внешний интерфейс с общедоступной информацией о продукте, поэтому внутренняя работа не требуется. Наша цель - создать псевдоблок или мульти-продукт, объединив настраиваемые шаблоны платформы Stencil и API корзины витрины. Мы также будем использовать GraphQL Storefront API для отображения включенных продуктов на странице отображения продуктов (PDP).

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

Пользовательские шаблоны и компоненты

Настраиваемые поля обычно используются продавцами для обогащения сведений о продукте и должны быть зарезервированы для общедоступной информации о продукте. Метаполя могут использоваться для произвольной информации, которую вы можете скрыть. Хотя в настоящее время нет общедоступного API Storefront, доступного для доступа к Metafields для приложения, которое мы создаем сегодня, использование Metafields является рекомендуемой долгосрочной стратегией для таких полей. Я буду использовать настраиваемые поля в качестве краткосрочного решения, пока мое приложение не будет обновлено с помощью Metafields.

Имена настраиваемых полей, которые я решил использовать, были is_bundle и foo, где шаблон проверяет, является ли значение is_bundle равным true, а foo будет присвоен идентификатор продукта. Foo используется только в коде, поэтому он не отображается для клиентов, но я рекомендую обновить его для вашей реализации, чтобы он имел смысл. Наши пользовательские компоненты будут удобно размещены в / templates / components / custom directory, который необходимо будет создать, если у вас его еще нет. Я рекомендую использовать настраиваемую папку, чтобы легко отслеживать, какие компоненты были добавлены в тему.

Для начала давайте создадим настраиваемый шаблон страницы продукта, который будет назначен товарам, которые будут добавлять несколько товаров в корзину. Вы можете узнать больше о создании пользовательских шаблонов в BigCommerce DevCenter здесь. Ниже я создал файл multi-layout.html с модифицированной версией product.html:

Большая часть исходного шаблона была удалена и теперь ссылается на новый компонент {{›components / custom / multi-view}}, который мы добавим следующим. Чтобы сделать настраиваемый PDP расширяемым, я создал новый компонент продукта, который можно было добавить в другие реализации.

В multi-view.html вы сначала увидите две inject Handlebars Helpers и пустой массив под названием arr 🏴‍☠️. Имейте это в виду на будущее, поскольку мы еще не готовы загружать какие-либо продукты.

Это основано на product-view.html, и я обрезал повторяющийся код с помощью […]«, чтобы сосредоточиться на изменениях. В первых двух строках предпринимаются шаги по реализации нашего модуля JavaScript, который импортирует GraphQL и отображает данные о продуктах, и мы скоро вернемся к этому. Если вы перейдете ближе к низу, вы увидите, что другой пользовательский компонент вызывается через «партиал Handlebars: {{›components / custom / multi-button}}. Давайте теперь посмотрим на multi-button.html, чтобы увидеть, как выполняется API корзины витрины, прежде чем продолжить работу с несколькими режимами просмотра.

Реализация API витрины с помощью Fetch

Основная часть логики добавления нескольких товаров в корзину обрабатывается с помощью связанного JavaScript-кода многокнопочного компонента. Функция, которую я назвал addMultiToCart, объявлена ​​в файле модуля JavaScript custom.js, который также загружает вышеупомянутые данные о продукте GraphQL. Следуя методу, описанному в BigCommerce DevCenter здесь, assets / js / theme / custom.js отображается как модуль по нескольким причинам.

Реализация этих API с помощью fetch может показаться простой, но мы также пренебрегаем любыми браузерами, у которых отсутствует совместимость (я смотрю на вас, IE!). Это можно исправить, загрузив модуль наподобие polyfill или node-fetch, который позаботится об этом за вас, который может быть установлен и импортирован как обычная зависимость npm. Здесь я выбираю node-fetch.

В файле multi-button.html вы найдете ручки, которые определяют, должна ли наша настраиваемая кнопка отображаться для текущего продукта с помощью настраиваемого поля is_bundle. Это можно использовать аналогично на странице продукта по умолчанию, как я кратко упоминал ранее. Кнопке назначается другой идентификатор (#multiButton), чтобы этот скрипт не влиял на типичные кнопки добавления в корзину, а также настраиваемое значение (Combo to Cart) для отображения.

Наша функция «addMultiToCart» имеет два аргумента: требуемые идентификаторы продуктов и необязательный идентификатор корзины, но для ввода использует многокнопочный компонент с идентификатором «multiButton». Вот как это выглядит при использовании ванильного JavaScript в custom.js:

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

Отображение данных о товарах с помощью GraphQL Storefront API

Теперь, когда мы увидели, как товары добавляются в корзину, вернемся к началу multi-view.html. У нас есть следующее:

Сначала выполняется итерация для каждого custom_field в контексте данного продукта, проверяя, является ли имя поля foo. Если это так, используйте Handlebars Helper {{inject}} со значением для контекста текущей страницы. Помните тот пустой массив с именем arr, на который я указывал ранее (напоминание)? Мы собираемся протолкнуть значение из контекста страницы в этот массив, поскольку теперь мы можем получить доступ к значению через JavaScript. Более подробную информацию об использовании помощников для инъекций можно найти в документации для разработчиков здесь.

Теперь, когда значения foo / идентификаторы продуктов собраны в массиве, мы можем использовать GraphQL Storefront API для получения информации о каждом продукте. В этом примере я использовал часть кода, которым поделился Натан Букер в нашей документации для разработчиков, а исходный код можно найти на GitHub.

Сценарий выбирает идентификатор, который я назначил элементу, # multi-desc, и добавляет данные HTML, возвращенные GQL SF API, к внутреннему HTML этого элемента. Это была дополнительная функция для создания резкого визуального контраста между этим и другими продуктами. Он также представляет концепцию будущих итераций, в которых полностью настроенные страницы продуктов могут отображаться таким образом, который имеет смысл для соответствующего продукта-заполнителя.

Чтобы эти продукты отображались более естественно, я добавил CSS через assets / scss / multi-layout.scss, а чтобы узнать больше о добавлении CSS в вашу тему, просмотрите нашу документацию для разработчиков здесь.

Заключение

Разработчики, которые хотят полностью настроить отображение страницы продукта, могут использовать это в качестве конкретного примера, но я призываю читателей опираться на эти знания. Моя реализация API корзины витрины обходит типичный quick-view.html, который используется в теме Cornerstone после добавления элемента в корзину, что потребует дополнительной настройки.

API-интерфейсы BigCommerce Storefront предлагают разработчикам функции, недоступные в платформе Stencil, для дальнейшей персонализации взаимодействия с клиентами. Чтобы создать специальный шаблон Stencil, объедините API корзины витрины с другим инструментом, таким как API витрины магазина GraphQL, как мы видели в нашем сегодняшнем примере.

Вы в последнее время использовали один из наших API-интерфейсов Storefront с темой Stencil? Дайте нам знать в Твиттере @BigCommerceDevs или оставьте комментарий ниже!