Эта статья является гостевой серией великого Ekene Eze . Он возглавляет команду опытных разработчиков в Flutterwave и написал это сообщение в блоге через программу Write for the Community.
В этой серии статей вы познакомитесь с процессами настройки вашего собственного приложения для заказа еды и, как следствие, любого приложения для электронной коммерции с использованием современных инструментов разработки, таких как Strapi, Gridsome и Snipcart.
Содержание: 1. Часть 1 - Создание приложения Strapi и создание продуктов 2. Часть 2 - Настройка проекта Gridsome 3. Часть 3 - Использование продуктов с помощью Gridsome и GraphQL 4. Часть 4 - Создание отдельных представлений продукта с помощью шаблонов Gridsome 5. Часть 5 - Реализация корзины и оформления заказа с помощью Snipcart 6. Часть 6 - Развертывание приложений
В прошлой части мы смогли создать отдельные страницы просмотра продукта, где клиенты могут получить дополнительную информацию о каждом продукте. Мы также настроили навигацию для страницы магазина и поддержки соответственно. В этой части мы подключим наше приложение для заказа еды к Snipcart, чтобы клиенты могли размещать заказы на наши блюда.
Реализация корзины и оформления заказа с помощью Snipcart
Как я уже упоминал в начале этой серии, Snipcart - это простое решение для электронной коммерции, которое позволяет разработчикам добавлять полностью настраиваемые возможности оформления заказа на любой веб-сайт.
В этой части серии статей мы будем использовать Snipcart, чтобы добавить функции оформления заказа в наше существующее приложение Gridsome. Для этого сначала необходимо создать бесплатную учетную запись Snipcart.
Прим. Snipcart это в Канаде, а в России подобным функционалом занимается Easynetshop.
Установить Snipcart
Далее установим Snipcart. Создайте файл index.html в папке src и обновите его фрагментом кода ниже:
<!-- src/index.html -->
<!DOCTYPE html>
<html ${htmlAttrs}>
<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.0.23/default/snipcart.css"
/>
</head>
<body ${bodyAttrs}>
${app} ${scripts}
<div
id="snipcart"
data-api-key="MDg5MmMwOWQtOTIxZi00ZTE4LWE3MmUtNDlkZjcyZmQ2OThjNjM3Mzg2NDU1MDUyODI0NjM2"
hidden
></div>
<script
async
src="https://cdn.snipcart.com/themes/v3.0.23/default/snipcart.js"
></script>
</body>
</html>
Что мы здесь сделали, так это добавили необходимые Snipcart ресурсы JavaScript и CSS в наше приложение Gridsome. Их добавление автоматически установит и сделает Snipcart доступным в проекте.
- Обратите внимание, однако, что вам нужно будет перезапустить приложение Gridsome, чтобы получить Snipcart начал функционировать.
Добавить Snipcart глобально
Затем нам нужно сделать Snipcart глобально доступным в нашем приложении. Для этого команда Snipcart рекомендует использовать скрытый элемент в центральном месте, чтобы, когда мы определяем Snipcart там, он был глобально доступен на всех страницах нашего веб-сайта. Это место в этом проекте - Default.vue файл. Поскольку этот макет охватывает все части нашего приложения, просто откройте файл и добавьте в него этот элемент div :
<!-- src/layouts/Defualt.vue -->
<div
hidden
id="snipcart"
data-api-key="YOUR_SNIPCART_API_KEY_HERE"
></div>
Вы можете получить свой ключ API Snipcart на своей панели управления. Теперь, когда у нас установлен Snipcart, давайте продолжим и модифицируем наше приложение, чтобы внести в него нужные нам изменения поведения.
Реализовать добавить в корзину
Во-первых, при нажатии кнопки «Добавить в корзину» мы хотим немедленно добавить этот конкретный продукт в корзину и в равной степени отобразить корзину, чтобы пользователь мог оформить заказ, если захочет. Для этого нам нужно обновить кнопку в нашем src/components/Products.vue файле:
<!-- src/components/products.vue -->
<v-card-actions>
<v-btn
rounded
outlined
color="orange"
text
class="snipcart-add-item"
:data-item-id="edge.node.id"
:data-item-description="edge.node.description"
:data-item-image="`http://localhost:1337${edge.node.image}`"
:data-item-price="edge.node.price"
:data-item-name="edge.node.title"
>
Add to cart
</v-btn>
</v-card-actions>
Все, что мы здесь сделали, это добавили класс snipcart-add-item к кнопке и также передали ему атрибуты data-. Добавление класса snipcart-add-item к любому элементу HTML сообщает Snipcart определенным образом реагировать на щелчок по этому элементу. В этом случае добавьте содержимое данных этого элемента в корзину. Мы предоставляем значения атрибутов данных непосредственно из нашего слоя данных.
Поскольку эта кнопка доступна на страницах отдельных продуктов, нам необходимо внести те же обновления в шаблон продукта:
<!-- src/templates/product.vue -->
<v-card-actions>
<v-btn
rounded
outlined
color="orange"
text
class="snipcart-add-item"
:data-item-id="this.$page.product.id"
:data-item-description="this.$page.product.description"
:data-item-image="
`http://localhost:1337${this.$page.product.image}`
"
:data-item-price="this.$page.product.price"
:data-item-name="this.$page.product.title"
>
Add to cart
</v-btn>
<v-spacer></v-spacer>
<v-rating
:value="this.$page.product.rating"
color="amber"
dense
half-increments
readonly
size="14"
></v-rating>
<span>
<v-card-title>${{ this.$page.product.price }}</v-card-title>
</span>
</v-card-actions>
При нажатии этой кнопки со страницы с перечнем продуктов или со страницы сведений о продукте продукт будет добавлен в корзину с помощью Snipcart, и корзина для покупок будет отображаться для просмотра.
Показать корзину и цены
Вы можете спросить, как мы показываем логотип корзины или цены на товары, которые добавляются в корзину, чтобы покупатели могли делать покупки с ограниченным бюджетом. Посмотрим, как это сделать.
Внутри Default.vue file обновите фрагмент, чтобы учесть логотип корзины и поле цены. Следовательно, добавьте этот фрагмент сразу после поля поиска:
<!-- src/layout/Default.vue -->
<v-btn class=" snipcart-checkout" icon>
<v-icon>mdi-cart</v-icon>
<span class="snipcart-total-items"></span>
<span class="snipcart-total-price"></span>
</v-btn>
Здесь мы обернули значок корзины в элемент кнопки с классом snipcart-checkout. Это просто личное предпочтение, чтобы пользователи могли щелкнуть значок корзины, чтобы открыть корзину. После значка корзины мы подготовили еще два поля для отображения количества товаров в корзине и общей стоимости товаров в корзине соответственно. Это всего лишь классы шаблонов, давайте перейдем к разделу скриптов файла и добавим в него логику:
<!-- src/layout/Default.vue -->
<script>
export default {
data() {
return {
totalPrice: 0,
};
},
methods: {
getTotalPrice() {
return Snipcart.store.getState().cart.total;
},
},
mounted() {
this.totalPrice = this.getTotalPrice();
},
};
</script>
Приведенный выше фрагмент кода просто вычисляет общую цену всех товаров в корзине и отображает ее в поле с классом snipcart-total-price. Вы можете повторить тот же процесс, чтобы рассчитать общее количество товаров в корзине, но мы продолжим и сохраним эти изменения. Если вы снова посмотрите в браузере на наличие последних изменений, вы заметите, что и значок корзины, и цена отображаются так, как ожидалось:
Вывод
В этом разделе мы успешно интегрировали Snipcart в наш проект Gridsome и позволили клиентам размещать заказы на наши обеды. Мы начали с добавления в наш проект необходимых для Snipcart файлов JavaScript и CSS. Мы сделали его глобально доступным в макете проекта и, наконец, реализовали функцию добавления в корзину. В следующей части мы рассмотрим, как развернуть эти приложения и позволить пользователям использовать их из любого места. Увидимся там!