В Third and Grove мы не можем не сочетать лучшие технологии в попытке создать современные веб-интерфейсы. К счастью для нас, BigCommerce также любит раздвигать границы. До сих пор мы сотрудничали с BigCommerce в таких проектах, как эталонная архитектура ACF Drupal и плагин исходного кода Gatsby, который поддерживает предварительную версию Gatsby, которая меняет правила игры.
Наша последняя проблема возникла в результате разговоров, приведших к JAMStack Conference SF. Мы выдвинули идеи о том, что нужно сделать, чтобы устранить болевые точки при создании сайта ecomm. Особенно болезненные моменты, мешающие людям использовать JAMStack. Серверный рендеринг делает сайт очень быстрым, и мы знаем, что это важно, потому что за каждую секунду задержки загрузки вы теряете 7% конверсий. управляемый опыт.
Я с гордостью сообщаю, что вот ответ, на который мы пришли: Gatsby + BigCommerce + Netlify CMS Starter, над которой я работал последние несколько месяцев, готова к производству!
Прямо из коробки у нас действительно отличный пользовательский интерфейс и невероятно высокая производительность, которую может обеспечить только сайт Gatsby! Вы найдете свежие и точные данные, а также постоянную корзину с доступом к данным в любом компоненте приложения. Давайте рассмотрим, как этот стартовый пакет решает основные проблемы, опираясь на передовой опыт.
Цены, которым можно доверять
Худшее впечатление для покупателя - это видеть на моих глазах изменения цен, наличия и других данных о товарах. Ничто не заставляет меня терять веру быстрее в магазине, чем видеть продукт с одной ценой, указанной на странице сведений о продукте, а затем, когда я добавляю его в корзину, появляется другая цена.
В интерфейсной разработке есть довольно известный термин, называемый «вспышка нестилизованного контента» (FOUC). Это происходит, когда статическая страница загружает свои стили / шрифты / скрипты, влияя на общий стиль страницы после первого рендеринга. Результатом этого является то, что пользователь видит текст без стиля в мгновение ока, а затем все меняется, когда загружаются другие элементы. Обычно это считается нежелательным, и разработчики делают некоторые вещи, чтобы избежать такого поведения.
В электронной коммерции есть потенциально более опасные вспышки контента. Я называю это «вспышкой неточных значений» (FOIV). Это опыт, который я описал ранее. Он может принимать разные формы, но в приложениях SSR есть определенные шаги, которые нужно предпринять, чтобы этого избежать. Один из подходов, который хорошо зарекомендовал себя в BigCommerce Starter, - не отображать цены во время сборки. Все эти данные загружаются на клиенте. Хотя это могло быть тяжело. В зависимости от того, как это реализовано, это может запускать кучу запросов для каждого элемента, когда пользователь перемещается по магазину.
Использование реализации глобального состояния стало критически важным. Цена каждого продукта отображается компонентом React под названием Цены на продукт, который просматривает цену в глобальном магазине. Глобальное хранилище реализовано с помощью React Context API, но это может легко произойти в Redux или любом другом решении глобального состояния. Наш Компонент Price Provider делает один звонок через облачную функцию BigCommerce, чтобы узнать цену и доступность для всего магазина. Это позволяет избежать некоторых возможных проблем с выбором цен на основе того, что просматривает пользователь.
Отсутствие статической визуализации цены и других данных позволяет клиенту решать некоторые другие проблемы. Локализация и персонализация данных о продукте, которые пропускаются в процессе статической визуализации, открывает целый мир возможностей. BigCommerce будет поддерживать именно этот процесс через API-интерфейсы V3 Pricing и GraphQL Storefront. Таким образом, ваш магазин сможет удовлетворить гораздо более широкий спектр потребностей клиентов без каких-либо изменений во внешнем интерфейсе или необходимости создания нескольких версий сайта.
Безопасная корзина по умолчанию
Еще одна проблема, которую нам нужно было решить, - это поведение тележки. API корзины BigCommerce многое решает прямо из коробки. Но нам нужен был безопасный способ подключения к этому API. Netlify упрощает создание лямбда-выражений, скрывающих ключи API. Именно этого и позволяет BigCommerce Netlify Lambda.
Отбросив детали безопасности, мы смогли адаптировать логику компонента корзины BigCommerce в Поставщик контекста корзины. Таким образом, все данные корзины остаются синхронизированными в приложении. Корзина также решает проблему сохранения сеанса через файлы cookie API корзины. Их можно опустить, если вы хотите использовать другой метод сохранения корзины.
С чего начать
Загляните в репозиторий и, наверное, было бы полезно узнать больше о Гэтсби. Вы должны сразу встать и уйти! Вы даже можете развернуть клон Netlify в один клик! Надеюсь, вам понравится, и если у вас есть какие-либо вопросы или проблемы, держите нас в курсе!
