Глобальная пандемия ускорила вездесущность электронной коммерции в нашей жизни.
Это повлияло на то, как мы стали покупать товары и услуги, которыми пользуемся, со скоростью, которую было бы трудно представить еще не так давно.
От покупки товаров в наших любимых компаниях до получения рецепта на лекарство. Интернету нужны инструменты, обеспечивающие динамичный опыт, когда потребители смогут легко найти то, что они ищут, и совершить покупку.
В этом посте я расскажу, как один из этих инструментов, React, может помочь разработчикам создавать высококачественные решения для такого опыта в электронной коммерции.
Я не просто скажу вам, что React может предоставить динамический UX; Я также покажу вам, как создать магазин Next.js в пошаговом руководстве:
- Создание нового приложения с помощью Next.js
- Добавление продуктов в приложение React
- Интеграция корзины покупок в наше веб-приложение
- Определение продуктов в Snipcart
- Настройка сводки корзины и предварительного просмотра корзины
Мы все хотим создавать проекты электронной коммерции, которые выделяются. Давайте посмотрим, как React может помочь.
Создание динамичного опыта электронной коммерции
Суть процесса совершения покупок заключается в возможности предоставления динамической информации клиентам вашего сайта. Это включает в себя как информацию о продукте, который вы пытаетесь продать, так и то, как это относится к реальному покупателю.
Динамические элементы продуктов в электронной коммерции
Когда вы имеете дело с продуктами, особенно с физическими товарами, у вас может быть ограниченное количество продуктов для продажи. Это означает, что ваш покупательский опыт должен иметь возможность поддерживать актуальный подсчет того, сколько товаров осталось «в наличии».
В сочетании со сложностями, связанными с одновременной оплатой товара сразу несколькими людьми, вы должны иметь возможность отслеживать количество товаров в режиме реального времени. В противном случае вы можете столкнуться с ситуацией, когда вы перепродаете один и тот же продукт.
Ценообразование также может быть в значительной степени динамическим фактором. Проще говоря, когда цена товара всегда будет фиксированной суммой, но в некоторых случаях вы хотите изменить эту цену или предоставить рекламную акцию для продвижения своих продуктов.
Страница продукта должна отражать стоимость, которую вы в конечном итоге взимаете с клиента. В то же время фиксированная цена может быть незаметной, тогда вы можете быстро потерять доверие клиента, если он увидит низкую цену, уже в конце с полной корзиной, до того как набрал рассчитываемое им количество товара.
Предоставление клиентам персонализированного опыта электронной коммерции
Существуют различные уровни персонализации, которые мы можем предоставить клиентам, посещающим наш веб-сайт. Показ персонализированных рекомендаций по продуктам — отличный способ помочь посетителям открыть для себя продукты, о существовании которых они, возможно, не знали.
Но на базовом уровне ядром любого процесса совершения покупок, который не ограничивается потоком оформления заказа одного продукта, является добавление товаров в корзину и предоставление покупателям возможности управлять этой корзиной.
Корзина может включать в себя количество продуктов, которые кто-то хочет приобрести, какие продукты они хотят приобрести, общую стоимость всех этих товаров и стоимость доставки в зависимости от указанного адреса.
Эти детали, наряду с информацией о продукте, обеспечивают очень динамичный опыт, чтобы помочь вашим клиентам в процессе оформления заказа.
Подходит ли React для электронной коммерции?
React — отличный фреймворк JavaScript для создания веб-приложения для электронной коммерции. Он имеет большое и активное сообщество, основан на компонентах, поддерживает рендеринг на стороне сервера, использует виртуальный DOM , и это лишь малая часть фич. Эти функции делают React.js идеальным выбором для быстрого, масштабируемого и удобного веб-сайта электронной коммерции.
Сайт электронной коммерции в мире React
Технологические стеки в мире электронной коммерции традиционно стоят на серверах. Учитывая высокодинамичный характер, разработчикам необходимо убедиться, что персонализированная информация точно предоставляется клиенту при каждой загрузке страницы.
Динамический опыт в React
В мире React типичные решения включают обслуживание статического приложения в браузере и его скрепление с помощью запросов на стороне клиента для обеспечения динамического взаимодействия.
Незаметно для посетителя приложение на долю секунды будет неперсонализированным или даже пустым. После загрузки JavaScript и последующих запросов к серверу страница будет обновлена с любой необходимой динамической информацией.
Подобно традиционному «серверному» решению, рендеринг на стороне сервера (SSR) также является опцией React, но вы теряете преимущества обслуживания статического приложения прямо из хранилища во главе с CDN.
Создание быстрых, масштабируемых веб-сайтов электронной коммерции
Предоставление отказоустойчивого веб-приложения должно быть важной частью любого решения, но еще более важно в электронной коммерции.
Ясно как день, что если ваше веб-приложение доступно и функционирует, и к нему прикреплена реальная валюта, и если вдруг кто-то не может просмотреть ваши предложения продуктов или купить эти продукты, то это реальные деньги, потерянные из-за простоя.
Это то, что породило Jamstack, который предлагает динамические функции наряду с преимуществами статического приложения.
Преимущества электронной коммерции на Jamstack
Мы можем передать этот байт браузеру статически из CDN, что дает нам огромные преимущества, такие как быстрая загрузка страниц, бесконечная масштабируемость и низкие счета за хостинг.
Пример того, как CDN распределяет запросы
Каждая секунда — каждая миллисекунда — имеет значение при обслуживании приложения электронной коммерции. Коэффициент конверсии тесно связан с количеством времени, которое требуется для загрузки страницы в чьем-то браузере.
Также важно иметь возможность масштабировать свой магазин в массы. Вы не хотите, чтобы страница вашего продукта была закрыта, когда ваша новая коллекция становится вирусной, а это потерянные деньги и потерянный клиент, который может не вернуться из-за их плохого опыта покупок.
SEO имеет решающее значение для веб-сайта электронной коммерции. Узнайте о React SEO для электронной коммерции с помощью этого руководства.
Использование React в электронной коммерции
И здесь в игру вступает React. React — это мощная библиотека, которая дает нам возможность создавать динамические интерфейсы в браузере.
Мы можем предоставить браузеру полностью статическую страницу, а затем загрузить динамические части с теми же запросами на стороне клиента, чтобы предоставить данные о продукте в режиме реального времени и персонализированный опыт покупок .
Загрузка и обновление динамического контента в браузере
Это становится еще проще с такими фреймворками, как Next.js и Gatsby . Оба инструмента позволяют разработчикам статически компилировать все приложение, предоставляя большую часть контента страницы с этим первым запросом, а затем добавляя все, что должно быть критически точным.
Например, большинство деталей продукта, вероятно, не изменятся. Конечно, мы можем обновить копию и исправить ошибки, но это не критично для совершения покупок в реальном времени.
Мы можем статически скомпилировать эти данные, для использования с помощью таких инструменты, как системы управления контентом (CMS), которые хранят эту информацию. Затем мы переносим эту информацию в фреймворк, например Next.js, для отображения. Если эти детали изменятся, мы можем инициировать новую сборку, которая выйдет и получит последнюю информацию для отображения на нашей странице.
Для отображения динамических сведений, таких как актуальная цена продукта или точный расчет налога, мы можем делать запросы на стороне клиента к API, которые гарантируют, что мы всегда показываем правильное значение. При этом мы используем лучшее из обоих миров, обеспечивая быстрый опыт с динамическими деталями в реальном времени.
Создание веб-сайта электронной коммерции React с помощью Next.js и Snipcart
Теперь, когда мы понимаем преимущества создания магазинов электронной коммерции с помощью React, давайте рассмотрим, как мы можем их создать.
Мы собираемся использовать Next.js для быстрого запуска нового приложения React, в котором мы сможем управлять нашими продуктами и отображать их.
Я также упоминал Гэтсби ранее, помните? Что ж, команда Snipcart недавно разработала рецепт электронной коммерции для этой альтернативной среды React. Вы можете прочитать об этом здесь .
Затем мы добавим Snipcart, который обеспечит нашу корзину для покупок, что позволит нам предоставить людям возможность покупать наши продукты.
Перед Началом
Прежде чем начать, мы предполагаем, что вы уже создали бесплатную учетную запись Snipcart. Если у вас нет учетной записи, вы можете зарегистрироваться здесь https://app.snipcart.com/register . Это навсегда бесплатно в тестовом режиме. Forever free test mode
admin’s p.s. В России есть альтернатива: EASYNETSHOP
Вам также потребуется базовое понимание JavaScript и React. Хотя большая часть того, что вы будете делать, включает в себя простой HTML, мы будем работать в приложении React с использованием Next.js.
Шаг 0: Создание нового приложения React с помощью Next.js
Мы будем использовать Next.js для создания нашего приложения React. Для этого мы можем использовать npm для быстрого создания нового приложения с шаблоном Next.js по умолчанию.
Сначала перейдите в каталог в своем терминале, в котором вы хотите создать новое приложение, и запустите:
npx create-next-app next-snipcart-store
При желании вы можете заменить next-snipcart-store своим именем каталога, в котором вы хотите создать этот проект.
Это создаст новый проект Next.js и установит зависимости. После завершения вы можете перейти в этот каталог и запустить команду разработки, чтобы запустить сервер.
cd next-snipcart-store
npm run dev
И как только он будет завершен, вы можете открыть проект по адресу http://localhost:3000 .
Шаг 1: Добавление продуктов в наше новое приложение React
Чтобы начать добавлять наши продукты в приложение, нам сначала нужен список продуктов.
Давайте создадим новый файл в корне нашего проекта для хранения информации о продукте, которую мы можем использовать во всем приложении.
Создайте новый файл с именем products.json и внутри этого файла просто добавьте пустой массив:
[]
При настройке наших продуктов нам понадобятся несколько основных атрибутов:
- Заголовок: удобное для человека название продукта
- ID: уникальный идентификатор для этого продукта
- Описание: краткая заметка о том, что представляет собой продукт
- Цена: стоимость товара
Мы можем создать наш первый продукт, добавив новый объект внутри нашего пустого массива со следующим:
{
"title": "Snipcart Logo Sticker",
"id": "sticker_logo",
"description": "Show off your Snipcart support with a logo sticker!",
"price": "2.00"
}
Вот фрагмент кода того, как должен выглядеть наш файл на данный момент:
Чтобы использовать этот файл, мы можем перейти к файлу нашей домашней страницы и импортировать его.
В редакторе кода откройте pages/index.js файл и добавьте следующий оператор импорта вверху файла:
import products from '../products.json';
Теперь, когда наши продукты импортированы, мы можем использовать их для отображения на странице.
Внутри <div className={styles.grid}>, Next.js есть несколько ссылок по умолчанию о Next.js. Мы собираемся удалить их и заменить их нашими собственными ссылками.
Замените сетку на следующую:
<div className={styles.grid}>
{products.map(product => {
return (
<div key={product.id} className={styles.card}>
<h3>{ product.title }</h3>
<p>{ product.description }</p>
<p>${ product.price }</p>
<p>
<button>Add to Cart</button>
</p>
</div>
);
})}
</div>
Здесь мы перебираем массив products, который мы импортировали. Мы создаем новый <div> для каждого продукта, который включает в себя className, который заимствует стили Next.js по умолчанию для карточки.
Внутри нашего <div>, мы включаем подробную информацию о нашем продукте, такую как название и цена, а также добавляем HTML-кнопку , которую мы можем использовать, чтобы добавить товар в нашу корзину.
Если мы сохраним файл и откроем наш браузер, мы увидим наш первый продукт.
Добавим второй продукт.
Мы можем добавить еще один объект в наш массив проектов для нашего второго продукта:
{
"title": "Snipcart Logo Sticker Pack",
"id": "sticker_logo_pack",
"description": "Get a pack of 3 Snipcart logo stickers.",
"price": "4.00"
}
И если мы сохраним и перезагрузим нашу страницу, мы увидим наш второй продукт.
Наконец, обычно, когда мы хотим продать продукт, мы хотим показать изображение этого продукта, чтобы наши клиенты могли увидеть, как он выглядит.
Давайте добавим в наш проект два файла изображений. В общем каталоге создайте папку с именем «images» и добавьте туда свои файлы изображений, по одному для каждого продукта.
Я включил два изображения, одно для одной наклейки и одно для набора наклеек.
Внутри нашего products.json файла теперь мы хотим добавить эти файлы изображений, чтобы мы могли получить их в нашем приложении.
В разделе «Наклейка с логотипом Snipcart» добавьте следующее свойство:
"image": "/images/sticker-single.jpg"
И в разделе «Набор наклеек с логотипом Snipcart» добавьте:
"image": "/images/sticker-3pack.jpg"
Затем, вернувшись внутрь pages/index.jsнад названием продукта, добавьте:
<img src={product.image} alt={`Preview of ${product.title}`} />
И если мы сохраним и перезагрузим страницу, мы увидим, что у нас есть наши изображения, но они огромные!
Чтобы исправить размеры изображений, вы можете открыть файл styles/global.css и добавить следующее правило:
img {
max-width: 100%;
}
И теперь у нас есть страница с двумя нашими продуктами!
Шаг 2: Добавление корзины покупок Snipcart в наше приложение React
Первая часть интеграции Snipcart включает в себя импорт нескольких файлов из публичного CDN Snipcart.
Внутри pages/index.js шаблон Next.js по умолчанию поставляется с <Head> компонентом, который позволяет нам добавлять дополнительные теги и скрипты на <head> нашу страницу.
Внутри компонента добавьте следующее:
<link rel="preconnect" href="https://app.snipcart.com" />
<link rel="preconnect" href="https://cdn.snipcart.com" />
<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.2.2/default/snipcart.css" />
Это скажет браузеру начать соединение с двумя поддоменами Snipcart, что поможет повысить производительность. Мы также включаем файл CSS, который содержит стили Snipcart для корзины покупок.
Затем в нижней части файла, сразу после <footer>, добавьте следующее:
<script async src="https://cdn.snipcart.com/themes/v3.2.2/default/snipcart.js" />
<div hidden id="snipcart" data-api-key="[YOUR-API-KEY]" />
Здесь мы включаем скрипт Snipcart, который обеспечит все функции нашей корзины покупок. Мы также включаем скрытый, <div> где нам нужно указать наш ключ API из нашей учетной записи.
Чтобы найти ключ API, в своей учетной записи Snipcart перейдите к настройкам своей учетной записи, найдите страницу «Ключи API» и скопируйте общедоступный тестовый ключ API в разделе «Учетные данные».
Скопируйте это значение и замените [YOUR-API-KEY] в приведенном выше фрагменте своим ключом:
<div hidden id="snipcart" data-api-key="123456789012345678901234567890" />
На этом этапе, если мы сохраним и перезагрузим страницу, мы не заметим никакой разницы.
Шаг 3: Настройка продуктов для добавления в корзину покупок Snipcart
Чтобы люди могли добавлять наши продукты в свою удобную корзину, нам нужно добавить несколько атрибутов к нашим кнопкам продуктов.
Давайте обновим нашу кнопку «Добавить в корзину» следующим образом:
<button className="snipcart-add-item"
data-item-id={product.id}
data-item-image={product.image}
data-item-name={product.title}
data-item-price={product.price}
>
Add to Cart
</button>
С помощью этих атрибутов Snipcart может динамически просматривать наши продукты и узнавать подробности о каждом из них. Кроме того, поскольку мы добавляем селектор класса, Snipcart теперь может преобразовывать наши кнопки в рабочие кнопки, что позволяет нам фактически добавлять наши товары в корзину.
Как мы видим, Snipcart точно знает, какой товар мы добавили в нашу корзину, просматривая атрибуты нашей кнопки!
Шаг 4: Добавление ссылки в корзину Snipcart с обновленной суммой корзины
Подобно тому, как мы настраиваем наши продукты, чтобы легко добавлять их в нашу корзину покупок Snipcart, мы можем создать ссылку, которая позволит нашим клиентам перейти на страницу этой корзины. Мы также можем показать актуальную общую стоимость, чтобы наши клиенты всегда знали, сколько они хотят потратить.
Для этого мы воспользуемся существующим описанием на странице внутри файла <p className={styles.description}>.
Давайте обновим наш компонент Nav следующим образом:
import Link from "next/link";
import { useEffect, useState } from "react";
import { FaShoppingCart } from "react-icons/fa";
import Container from "../Container";
import styles from "./Nav.module.css";
const Nav = ({ children }) => {
const [total, setTotal] = useState(0);
useEffect(() => {
if (window.Snipcart) {
setTotal(Snipcart.store.getState().cart.total);
}
});
return (
<nav className={styles.nav}>
<Container className={styles.navContainer}>
<p className={styles.title}>
<Link href="/">
<a>Snipcart Store</a>
</Link>
</p>
<p className={styles.description}>
<a
className="snipcart-checkout snipcart-summary"
href="#"
style={{ textDecoration: "none" }}
>
<FaShoppingCart />
<strong className="sr-only">Cart</strong>
<span className="snipcart-total-price">
{new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
}).format(total)}
</span>
</a>
</p>
</Container>
</nav>
);
};
export default Nav;
Во-первых, мы добавляем новую ссылку, включая селекторы классов, которая сообщит Snipcart, что мы хотим использовать нашу ссылку в качестве контейнера для нашей сводки корзины. Мы также сообщаем ему, что хотим, чтобы эта ссылка открывала нашу корзину покупок.
Внутри мы добавляем иконку «Корзины».
Затем мы включаем отдельный <span> класс с его собственными селекторами классов, которые позволят Snipcart первоначально обновлять это значение текущим общим количеством корзины нашего клиента.
Если вы заметили, мы устанавливаем значение по умолчанию 0 для нашей суммы и форматируем ее, используя собственный NumberFormat метод браузера. Это позволит нашей странице отображать значение до загрузки JavaScript, чтобы по возможности избежать смещения макета.
Мы также программно обновляем итог каждый раз, когда компонент перерисовывается (используя useEffect метод), получая значение непосредственно из [хранилища SDK](https://docs.snipcart.com/v3/sdk/store) . Это гарантирует, что мы всегда будем получать обновленное значение при изменении маршрута приложения.
Наконец, пока мы здесь, давайте обновим заголовок страницы внутри <h1> тега, чтобы он отражал наш магазин.
Я собираюсь обновить его до «Snipcart Store»:
<h1 className={styles.title}>
Snipcart Store
</h1>
Если мы обновим страницу, мы увидим наш обновленный заголовок. Но если мы добавим один из продуктов в корзину и закроем корзину, мы увидим обновленную общую стоимость нашей корзины. Мы даже можем щелкнуть ссылку «Корзина», которая откроет нашу корзину!
Следующие шаги
Хостинг и развертывание вашего магазина
Существует множество вариантов размещения и развертывания вашего приложения Next.js. Vercel , команда, которая поддерживает Next.js, поставляется с множеством функций «из коробки», которые позволяют легко размещать и развертывать приложение Next.js.
Если вы планируете использовать другой статический поставщик, например Netlify, вам нужно настроить сценарий сборки проекта для экспорта скомпилированного приложения в виде статических файлов . Для этого вы можете обновить свой скрипт сборки внутри package.json:
"build": "next build && next export",
Теперь при каждом запуске сборки, в out каталоге будут доступны статические файлы.
Настройка и управление вашими продуктами
Если вы следовали этому примеру, возможно, вы использовали образцы продуктов из демонстрации. На этом этапе вы можете обновить продукты внутри products.json, чтобы включить продукты, которые на самом деле предлагает ваш магазин. Вы можете получить информацию о продукте из постороннего источника, такого как кастомный Content Manager, для более продвинутого решения!
Настройка вашего магазина
В этом пошаговом руководстве мы использовали практически все стили, уже встроенные в шаблон Next.js по умолчанию. Это может не совсем соответствовать вашему бренду или тому, как вы представляете себе свой магазин.
С Next.js мы можем использовать большинство CSS-решений, включая стандартный CSS, для настройки нашей страницы так, как мы хотим, будь то просто обновление кнопок, чтобы они выглядели немного лучше, или полный ребрендинг магазина.
Запуск вашего веб-сайта электронной коммерции React в продакшн.
Мы использовали тестовый ключ API, чтобы убедиться, что наша корзина работает должным образом в наших настройках. Это позволяет нам фактически обрабатывать транзакции, как в реальном мире.
Во-первых, вам нужно убедиться, что в вашей учетной записи Snipcart настроены платежи, чтобы ваш магазин работал.
Когда вы будете готовы к работе, вы можете перевести свою учетную запись в режим Live, что позволит вам начать продавать свою продукцию по всему миру!
Живая демонстрация и репозиторий GitHub
Заключительные мысли
Электронная коммерция — сложная область, требующая очень динамичного контента, который будет масштабироваться для клиентов наших магазинов.
С помощью React и Next.js мы можем предоставить статическое приложение, которое сможет выдержать большой приток трафика, когда продукт станет вирусным, и в то же время сможет предоставить людям интерактивный опыт покупки наших продуктов.
Используя Snipcart, мы можем с уверенностью предоставить опыт покупок, адаптированный к нашему предложению продуктов, персонализированный для каждого клиента. Snipcart позволяет нам обрабатывать весь процесс оформления заказа в браузере, позволяя людям быстро и безопасно совершать платежи.
Используя эти инструменты, мы можем перенести динамический опыт, необходимый в мире электронной коммерции, в статическую сеть.
перевод (С) https://snipcart.com/blog/react-ecommerce-tutorial