В спешке? Перейти к техническому руководству или демоверсии.
Разработчики должны иметь возможность использовать любой стек независимо от того, строят они электронную коммерцию или нет.
☝️ Это было первоначальное обещание нашей первой корзины покупок для разработчиков.
Один мы сохранили в течение 5 лет.
Оказывается, стеки 2018 года больше ориентированы на внешний интерфейс, чем когда-либо, с React, возглавляющим пакет.
Имея это в виду, я подумал, что разработаю подробный материал по электронной коммерции React для разработчиков .
В этом посте я расскажу о том, как React и электронная коммерция могут идти рука об руку с ее многочисленными преимуществами и инструментами.
Затем я перейду в режим полного учебного пособия, демонстрируя мой магазин React, созданный вручную с помощью Gatsby.
Шаги 🛠️
1 Создание сайта Гэтсби
2 Создание и определение продуктов
3 Интеграция корзины покупок в Гэтсби
4 Использование компонентов React
5 Развертывание сайта в Netlify
Хорошо, давайте сделаем это!
Стоит ли использовать React для электронной коммерции?
Если вы здесь, возможно, вам не нужно знакомство с React.
Уже несколько лет он находится на переднем фронте веб-разработки. Он может похвастаться созвездием из звезд в шапке своего репозитория GitHub. Он используется техническими мастодонтами, такими как Airbnb, Netflix и Instagram.
Он был создан разработчиками Facebook в конце то концов! Сказать, что это модно - преуменьшить.
2012 год.
Реакт появился
Управлять рекламой в Facebook стало трудно, поэтому Facebook нужно было найти хорошее решение для этого. Джордан Уолк работал над прототипом и создал React.
Но модный не значит переоцененный. React доказал свою удивительность более чем достаточно. Благодаря компонентно-ориентированной разработке, Virtual DOM, синтаксису JSX и т. Д., Он изменил разработку внешнего интерфейса в лучшую сторону.
Но реальный вопрос здесь: «Это хорошо для электронной коммерции?»
Это может быть здорово, если вы готовы испачкать свои руки (программируя).
Как разработчики, самое интересное не в том, чтобы сдерживать монолитные системы, какую технологию использовать и как. Это в том, чтобы выбрать себе правильные инструменты для правильной работы. JS-фреймворки, статические сайты и JAMstack предоставили разработчикам возможность самостоятельно создавать потрясающий UX.
Кроме того, функции фреймворка, такого как React, также принесут пользу клиентам.
→ Использование компонентов для гибкости.
Компонентная разработка позволяет легко повторно использовать код в вашем приложении, а также писать небольшие функции. Или, в нашем случае, небольшие функции электронной коммерции. Это пригодится, когда вы начнете масштабировать и расширять интеграцию своей корзины. Я покажу вам конкретный пример в демонстрации ниже.
→ Виртуальный DOM для производительности.
Виртуальный DOM React обеспечивает более эффективный способ обновления представления в веб-приложении. Производительность огромна в электронной коммерции; каждые миллисекунды считаются. Скорость = лучше UX / SEO = $$$.
Не позволяйте сплетням о проблемах React SEO обмануть вас; Есть много способов сделать ваши приложения React SEO-дружественными.
→ Популярность и обширное сообщество для душевного спокойствия.
Если вы продавец, вам не составит труда найти разработчиков, которые бы поддерживали ваше приложение электронной коммерции React. Если вы разработчик, любая проблема, вероятно, уже задокументирована. Кроме того, в экосистеме появились десятки отличных инструментов разработки для оптимизации разработки React.
Допустим, вы решили, что React - правильный выбор для вашего интернет-магазина. Что дальше?
Посмотрите на инструменты электронной коммерции React 🛒
Пара решений позволит вам начать развитие электронной коммерции с React:
- Moltin - решение для электронной коммерции на основе API. Это позволяет вам использовать React для поддержки ваших приложений.
- Cezerin - платформа электронной коммерции на основе React & Node.js. Позволяет создавать PWA.
- React Commerce - платформа с открытым исходным кодом в режиме реального времени. Построен на Node.js, но хорошо работает с React.
Есть также несколько платформ веб-интерфейса, в которые можно интегрировать функции электронной коммерции, такие как Next.js , облегченная платформа для статических и серверных приложений.
Тот, который я выбрал для этого поста? Гэтсби. Я интегрирую его в нашу корзину для разработчиков, Snipcart. Результатом должно стать аккуратное приложение для электронной коммерции с поддержкой React!
Что такое Гэтсби?
Gatsby - это генератор статических веб-сайтов, созданный с использованием инновационных веб-технологий, таких как React и Webpack.
Он поддерживает компоненты Markdown, HTML и React из коробки. Также легко добавить поддержку дополнительных типов файлов, таких как, например, SCSS.
Правда в том, что с первой публикации этого поста Гэтсби стал не просто генератором статических сайтов. На самом деле, теперь это универсальное решение для создания прогрессивных веб-приложений в React.
Теперь он также поставляется с функцией, которая позволяет легко запрашивать API Gatsby с помощью GraphQL, и я настоятельно рекомендую это руководство, если вы когда-нибудь захотите использовать его с автономными CMS, базами данных или API.
Короче говоря, Гэтсби фантастичен и быстро находит путь к популярным SSG.
Но давайте не будем забегать вперед прямо сейчас. В этом посте я буду использовать его для генерации статического сайта и простой интеграции корзины покупок. Тем не менее, я попытаюсь добавить некоторые из более продвинутых функций Gatsby, таких как GraphQL, для дальнейшего развития функций электронной коммерции.
React e-commerce tutorial: создание магазина Gatsby
Минимальные требования:
- Аккаунт Snipcart (навсегда бесплатный в тестовом режиме)
Базовые знания JavaScript и React
- Включение вашего нового сайта Gatsby
Для начала нужно установить сам генератор:
npm install -g gatsby
Для этого примера я решил использовать gatsby-starter-blog. Он предлагает итерации статей на первой странице и одну страницу для всех элементов. Именно то, что мне нужно для моих демонстрационных продуктов.
Выбираем:
gatsby new snipcart-gatsby-integration https://github.com/gatsbyjs/gatsby-starter-blog
Как только это будет сделано, нажмите gatsby develop и все путём. У вас должен быть запущенный веб-сайт на localhost:8000 с функциями react-hot-loader .
Затем откройте проект в вашей любимой IDE. Если вы в настоящее время разрабатываете веб-сайт, который попадет производство, вам нужно открыть файл gatsby-config.js чтобы убедиться, что siteMetadata определен в соответствии с вашей информацией. Если нет, вы можете игнорировать это.
- Создание и определение продуктов
Давайте добавим несколько продуктов в папку content/blog/ .
Сначала удалите уже существующие папки и создайте одну новую папку для каждого продукта с index.md внутри:
/content/blog/bow-ties/index.md
---
title: Bow Ties
layout: post
date: 2018-07-21
id: 2
price: 7.00
image: "bow-ties"
path: "/bow-ties/"
description: "The bow-tie (not to be confused with the tae bo) is an aphrodisiac worn by male humans attempting to win one or more mates."
---
> The bow-tie (not to be confused with the tae bo) is an aphrodisiac worn by male humans attempting to win one or more mates. According to scientists (many of whom sport the style regularly), the bow-tie has been clinically proven to yield positive results. These findings were confirmed by the surge in popularity of the ties in the 1960's which led to a nation-wide public school banning. ([source](http://uncyclopedia.wikia.com/wiki/Bow_tie))
/content/blog/dry-martini/index.md
---
title: Dry Martini
layout: post
date: 2018-07-21
id: 3
price: 8.50
image: "dry-martini"
path: "/dry-martini/"
description: "The taste of excellence."
---
> "One Martini is all right. Two are too many, and three are not enough."
/content/blog/fireworks/index.md
---
title: Fireworks
layout: post
date: 2018-07-21
id: 1
price: 67.89
image: "fireworks"
path: "/fireworks/"
description: "Fireworks are a noble, traditional way to emphasize the greatness of an event."
---
> Fireworks are a noble, traditional way to emphasize the greatness of an event. They command the epic. They are poetry in a dark night sky. They look good, smell strong, and are dangerous to play with. A bit like secret agents.
- Интеграция корзины покупок в ваш статический сайт Gatsby
Откройте файл templates/blog-post.js . Вот где мы собираемся поместить специфические сценарии Snipcart.
Для этого мы будем использовать react-helmet который предоставляет компонент « Helmet : аккуратный маленький компонент для управления заголовком вашего документа.
Вам нужно будет установить пакет react-helmet :
npm install react-helmet
Затем в файле blog-post.js импортируйте компонент Helmet :
import Helmet from 'react-helmet';
Необходимые фрагменты кода можно найти в разделе « Ключи API » на панели администратора Snipcart.
В функции визуализации blog-post мы будем использовать компонент Helmet . Вставьте его прямо под компонентом Layout :
<Layout location={this.props.location} title={siteTitle}>
<Helmet htmlAttributes={{ lang: 'en' }}>
<title>${siteTitle}</title>
<link href="https://cdn.snipcart.com/themes/2.0/base/snipcart.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script id="snipcart" src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" data-api-key="YjdiNWIyOTUtZTIyMy00MWMwLTkwNDUtMzI1M2M2NTgxYjE0"></script>
</Helmet>
Теперь давайте немного настроим шаблоны и добавим несколько кнопок покупки Snipcart.
Снова откройте файл templates/blog-post.js . Это шаблон, который будет использоваться для каждой страницы продукта.
Ищите прямо внизу и найдите pageQuery const. Это запрос GraphQL. Гэтсби использует его, чтобы определить способ получения информации при создании вашего сайта.
Вы добавили несколько нестандартных frontmatter значений ранее, когда определяли новые продукты, и теперь вам нужно добавить эти поля в запрос, чтобы получить новую информацию.
Сделайте это, просто переопределив запрос следующим образом:
export const pageQuery = graphql`
query BlogPostBySlug($slug: String!) {
site {
siteMetadata {
title
author
}
}
markdownRemark(fields: { slug: { eq: $slug } }) {
id
excerpt
html
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
price
id
path
description
image
}
}
}
`
Теперь у вас есть доступ к информации о ваших новых продуктах, поэтому давайте использовать ее в своем шаблоне. В моем случае я добавил изображение и кнопку покупки и удалил компонент Bio, использованный в конце страницы.
Вот что я имею сразу после первого <p> :
<img src={post.frontmatter.image} alt={post.frontmatter.title}></img>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
<button
className='snipcart-add-item buyBtn'
data-item-id={post.frontmatter.id}
data-item-price={post.frontmatter.price}
data-item-image={post.frontmatter.image}
data-item-name={post.frontmatter.title}
data-item-description={post.frontmatter.description}
data-item-url={"http://snipcart-gatsby.netlify.com" + post.frontmatter.path}>
Buy
</button>
- Использование компонентов React
Теперь у вас есть домашняя страница, демонстрирующая все ваши продукты с отдельными страницами для каждого из них. Давайте продвинем интеграцию немного дальше и добавим несколько пользовательских полей в ваши продукты.
Давайте также создадим настраиваемый компонент реагирования для обработки этих настраиваемых полей из корзины, чтобы при добавлении товара в него уже был выбран правильный параметр настраиваемого поля.
Перво-наперво: добавление пользовательских полей в ваши продукты. Для этого добавьте новое поле для frontmatter ваших продуктов, а именно «customField». Мы также проведем рефакторинг нашего поля изображения для включения нескольких изображений.
Вы получите следующую структуру frontmatter:
---
title: Bow Ties
layout: post
date: 2018-07-21
id: 2
image:
- name: 'Blue Red'
src: 'blue-red'
- name: 'White Blue'
src: 'white-blue'
- name: 'White Gray'
src: 'white-gray'
price: 7.00
path: "/bow-ties/"
customField:
name: Color
values: ['Blue Red', 'White Blue', 'White Gray']
description: "The bow-tie (not to be confused with the tae bo) is an aphrodisiac worn by male humans attempting to win one or more mates."
---
> The bow-tie (not to be confused with the tae bo) is an aphrodisiac worn by male humans attempting to win one or more mates. According to scientists (many of whom sport the style regularly), the bow-tie has been clinically proven to yield positive results. These findings were confirmed by the surge in popularity of the ties in the 1960's which led to a nation-wide public school banning. ([source](http://uncyclopedia.wikia.com/wiki/Bow_tie))
Вам также придется изменить запрос GraphQL, чтобы включить наши новые поля customField & image .
Вот как это выглядит на данном этапе:
export const pageQuery = graphql`
query BlogPostBySlug($slug: String!) {
site {
siteMetadata {
title
author
}
}
markdownRemark(fields: { slug: { eq: $slug } }) {
id
excerpt
html
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
price
id
path
description
image {
name
src
}
customField {
name
values
}
}
}
}
`
Я был достаточноно взволнован анонсом React’s Hooks API и решил поиграть с ним в этом посте, хотя он пока был все еще в альфа-версии.
Вы можете написать компонент с традиционным классом, но Хуки «[…] позволят вам использовать состояния и другие функции React без написания класса».
Он идеально подходит для небольшого компонента, который вы собираетесь создать, - вы получаете мощь React, а шаблон не идет с классами.
Чтобы использовать альфа- npm install [email protected] , вам нужно запустить npm install [email protected] и npm install [email protected] .
Переместитесь в папку components и создайте файл BuyButton.js .
Внутри напишите:
import React, { useState } from 'react';
var BuyButton = React.memo(({post, images}) => {
const [selected, setSelected] = post.customField
? useState(post.customField.values[0])
: useState({});
var filteredImgs = images.filter(x => x.name === selected);
var choosenImgSrc = filteredImgs.length > 0
? filteredImgs[0].src
: images[0].src
return (
<div>
<img src={choosenImgSrc} width="400px" alt={post.title}></img>
{ post.customField && <h3>{post.customField.name}</h3> }
{ post.customField &&
<select
id={post.customField.name}
onChange={(e) => setSelected(e.target.value)}
value={selected}
style={{
borderRadius: "5px",
paddingRight: "20px",
paddingBlockStart: "13px",
paddingBlockEnd: "13px",
marginRight: "15px"
}}>
{post.customField.values.map((x) => (<option key={x}>{x}</option>))}
</select>
}
<button
data-item-custom1-name={post.customField ? post.customField.name : null}
data-item-custom1-value={selected}
style={{
backgroundColor: "#212121",
borderRadius: "5px",
color: "#F5F5F5",
fontWeight: "bold",
paddingBottom: "15px",
paddingTop: "15px",
paddingRight: "35px",
paddingLeft: "35px",
fontSize: "24"
}}
id="buyButton"
className='snipcart-add-item buyBtn'
data-item-id={post.id}
data-item-price={post.price}
data-item-image={choosenImgSrc}
data-item-name={post.title}
data-item-description={post.description}
data-item-url={"https://snipcart-react-gatsby.netlify.com/" + post.path}>
Buy for {post.price}$
</button>
</div>
)
})
export default BuyButton;
То, что вы только что сделали, это взяли кнопку покупки и поместили ее в новый компонент. Все с использованием React, но без определения какого-либо класса. Вот что такое Крючки.
React.memo здесь только для того, чтобы все работало с модулем разработки HotReload. Поскольку крючки все еще в альфа-версии, на данный момент это действует как небольшой патч. Благодаря крюкам логика довольно скромна - никаких накладных расходов, только поле состояния.
Это небольшое поле состояния создается с помощью утилиты useState, предоставляемой React. Оно возвращает текущее состояние (selected), а функция обновляет состояние (setSelected). Затем вы используете их, чтобы показать правильное состояние и обновить его, когда происходит изменение.
Атрибут пользовательского поля кнопки «Купить» определяется непосредственно selected значением. Вам больше ничего не нужно (например, jQuery). Как только состояние изменяется, оно запускает повторно рендеринг, как обычно, и кнопка покупки будет отображать новое состояние. По тому же примеру мы можем аккуратно обновить изображение, основываясь на выбранном значении настраиваемого поля.
Теперь давайте вернемся в файл templates/blog-post.js и реорганизуем его для использования нашего нового компонента.
Импортируйте новый компонент с помощью:
import BuyButton from '../components/BuyButton'
Затем вам нужно будет объявить переменную images чтобы запрашивать изображения в правильном формате. Вы можете объявить её как первую строку вашей функции рендеринга:
const images = post.frontmatter.image
.map(x => ({
name: x.name,
src: require(`./../../content/assets${post.frontmatter.path}${x.src}.jpg`)
}));
Напоследок, вам придется заменить всю предыдущую декларацию кнопки покупки простой:
<BuyButton post={post.frontmatter} images={images}></BuyButton>
- Развертывание нашего магазина с помощью Netlify
Мы развернули несколько проектов электронной коммерции статических сайтов, используя убойную платформу хостинга Netlify. В двух словах, Netlify - это качественный хостинг на основе CDN, упрощающий сборку, развертывание и размещение статических сайтов. Разработчики копаются там, и мы тоже!
Можете заценить их документацию по быстрому старту .
Я заканчиваю развертывание простыми командами:
npm install netlify-cli -g
netlify init
netlify update -n snipcart-gatsby
netlify deploy
Вот и всё! Ваш статический сайт электронной коммерции уже развернут! :)
Свидетель величия Гэтсби
Наслаждайтесь легендарным гостеприимством Великого Гэтсби и пусть вечеринка начинается!
Смотрите живое демо здесь.
Смотрите репозиторий GitHub здесь .
Заключительные мысли
Я потратил около двух часов на создание полнофункционального приложения для электронной коммерции React с Gatsby. Вот мои выводы по работе с этим фреймворком.
Материал, который мне понравился
- В общем, с Гэтсби весело работать. Стек интересен и хорошо использует некоторые из самых последних и замечательных веб-технологий.
- Использование инструмента командной строки достаточно просто.
- «Стартеры», доступные на GitHub, - прекрасное прикосновение к стартовым проектам.
- Его легко использовать, изучать и настраивать.
Материал, который мне понравился немного меньше
- Перехватчики React все еще в альфа-версии, и мне пришлось попробовать кучу разных вещей, чтобы заставить его работать с горячей заменой модуля.
- У меня всегда были довольно загадочные проблемы при попытке загрузить изображения с помощью require. В конце концов, это было связано с кешем Gatsby - я думаю - было бы неплохо перезапустить ваш dev-сервер, если вы столкнулись с такими проблемами.
Я надеюсь, что этот пост вдохновил вас немного поиграть с React и Gatsby и, возможно, даже начать современный статический проект. Вы могли бы также рассмотреть возможность использования некоторого независимого управления контентом с помощью CMS без головы.
перевод статьи https://snipcart.com/blog/react-ecommerce-gatsby-tutorial