Эта статья является гостевой серией великого 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 - Развертывание приложений
В прошлой части мы успешно подключили наше приложение Gridsome, чтобы получать продукты из нашего бэкэнда Strapi и отображать их для пользователей. В этой части мы создадим отдельные представления продукта с шаблонами Gridsome, чтобы клиенты могли открывать каждый продукт, просматривать более подробную информацию о нем, а также иметь возможность размещать заказы.
Создание отображения отдельного продукта с помощью шаблонов Gridsome
На данный момент у нас есть страница со списком продуктов, на которой мы можем просмотреть все продукты. Но нажатие на любой из продуктов приведет к странице 404, как мы видим ниже:
Далее давайте дадим возможность пользователям просматривать страницы продуктов с помощью шаблонов Gridsome. Gridsome использует шаблоны для создания отдельных страниц для нодов в коллекции. Посмотрим, как это работает. В src/templates папке проекта создайте новый файл с именем Product.vue и настройте его так:
<!-- src/templates/Product.vue -->
<template>
<Layout>
<template>
<v-card elevation="0" class="mx-auto center mt-5 mb-3" max-width="900">
<v-img
class="white--text align-end"
height="200px"
width="300px"
:src="`http://localhost:1337${this.$page.product.image}`"
>
</v-img>
<v-card-title>{{ this.$page.product.title }}</v-card-title>
<v-card-text class="text--primary">
<div>{{ this.$page.product.description }}</div>
</v-card-text>
<v-card-subtitle class="pb-0">
<h3>Instructions</h3>
{{ this.$page.product.instructions }}
</v-card-subtitle>
<v-card-actions>
<v-btn
rounded
outlined
color="orange"
text
>
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>
</v-card>
</template>
</Layout>
</template>
<page-query>
query Products($id: ID!) {
product(id: $id) {
id
title
image
description
price,
instructions,
rating
}
}
</page-query>
<script>
export default {};
</script>
В приведенном выше фрагменте мы создали новый шаблон продукта с одним представлением. В шаблоне мы используем компоненты пользовательского интерфейса Vuetify (card, buttons и т. Д.), чтобы организовать отображения деталей продукта. Наконец, чтобы гарантировать, что мы направляем соответствующий продукт на его эквивалентную страницу сведений, мы пишем, page query, запрос, который будет возвращать сведения об отдельных продуктах с учетом ID идентификатора, который мы передаем в него.
Чтобы обеспечить такое поведение, нам необходимо обновить gridsome.config.js файл в корневом каталоге проекта:
// gridsome.config.js
module.exports = {
siteName: "Gridsome",
plugins: [],
templates: {
Product: "/products/:id",
},
};
Вот как настроить шаблоны и маршруты Gridsome. Вы можете узнать больше об этом и других возможных вариантах конфигурации здесь.
Благодаря этому мы сможем без проблем переходить на отдельные страницы продуктов. Вернемся к браузеру:
Теперь, когда у нас есть шаблон и настройка одностраничных маршрутов, давайте для полноты добавим в заголовок элементы навигации «Магазин» и «Поддержка».
Навигация
В Gridsome каждый новый файл, созданный в pages каталоге, автоматически сопоставляется с новым маршрутом. Это означает, что для отображения разных страниц маршрута /shop и маршрута /support все, что нам нужно сделать, это создать эти страницы и заполнить их выбранным содержимым. В моем случае я буду отображать все те же продукты, что и на главной странице /shop, и отображать контактную форму на странице /support. Создайте новый pages/shop.vue файл и обновите его приведенным ниже фрагментом:
<!-- src/pages/shop.vue -->
<template>
<Layout>
<Products />
</Layout>
</template>
<page-query>
query{
products: allProduct{
edges{
node{
id,
title,
description,
rating,
image,
price
}
}
}
}
</page-query>
<script>
import Products from "../components/Products";
export default {
components: {
Products,
},
};
</script>
По сути, то, что мы делаем, - это снова рендерим компонент Products на этой странице, так что, когда пользователи переходят к нему, они видят тот же самый список продуктов. Вы можете организовать свое приложение по-разному, но этого должно быть достаточно для данной серии статей.
Проделаем то же самое с маршрутом /support , создадим новый pages/support.vue файл. В этом файле мы собираемся отобразить форму, в которой пользователи могут вводить свои вопросы и отправлять их администраторам сайта. Поскольку у меня есть привычка имплементировать валидации в моих формах, я буду использовать их vee-validate для обработки валидаций в форме. Установите его с помощью следующей команды:
npm i vee-validate
Затем откройте support.vue файл и обновите его приведенным ниже фрагментом:
<!-- src/pages/support.vue -->
<template>
<Layout>
<validation-observer ref="observer">
<form class="center mb-4 mt-3">
<h3>Contact us</h3>
<validation-provider
v-slot="{ errors }"
name="Name"
rules="required|max:10"
>
<v-text-field
v-model="name"
:counter="10"
:error-messages="errors"
label="Name"
required
></v-text-field>
</validation-provider>
<validation-provider
v-slot="{ errors }"
name="email"
rules="required|email"
>
<v-text-field
v-model="email"
:error-messages="errors"
label="E-mail"
required
></v-text-field>
</validation-provider>
<validation-provider v-slot="{ errors }" name="select" rules="required">
<v-select
v-model="select"
:items="items"
:error-messages="errors"
label="Query type"
data-vv-name="select"
required
></v-select>
</validation-provider>
<v-textarea
outlined
name="input-7-4"
label="What problem do you have"
value="Tell us more about the problem"
></v-textarea>
<v-textarea
outlined
name="input-7-4"
label="What's your business like"
value="Tell us more about your business"
></v-textarea>
<v-btn class="mr-4" @click="submit"> Send </v-btn>
<v-btn @click="clear"> Clear </v-btn>
</form>
</validation-observer>
<div class="separator"></div>
</Layout>
</template>
<script>
import { required, email, max } from "vee-validate/dist/rules";
import {
extend,
ValidationObserver,
ValidationProvider,
setInteractionMode,
} from "vee-validate";
setInteractionMode("eager");
extend("required", {
...required,
message: "{_field_} can not be empty",
});
extend("max", {
...max,
message: "{_field_} may not be greater than {length} characters",
});
extend("email", {
...email,
message: "Email must be valid",
});
export default {
components: {
ValidationProvider,
ValidationObserver,
},
data: () => ({
name: "",
email: "",
select: null,
errors: null,
items: ["Orders", "Delivery", "Tech support", "Refund"],
checkbox: null,
}),
methods: {
submit() {
this.$refs.observer.validate();
},
clear() {
this.name = "";
this.email = "";
this.select = null;
this.checkbox = null;
this.$refs.observer.reset();
},
},
};
</script>
<style>
</style>
Мы создали форму с полями для имени клиента, электронной почты и типа запроса. Мы также добавили текстовую область, чтобы пользователь мог предоставить более подробную информацию о своих проблемах. Конечно, это все примеры, и их следует заменить любым контентом, который вы сочтете более подходящим для вашего варианта использования. Если вы новичок vee-validate, это фреймворк на основе Vue.js, который упрощает проверку входных данных формы и отображение ошибок. подробнее об имплементировании валидации здесь.
На этом этапе, если мы протестируем навигацию в браузере, мы должны показать, что все новые страницы, которые мы создали, отображаются в соответствующих маршрутах.
Вывод
В этой части мы смогли создать отдельное отображение продукта с помощью шаблонов Gridsome. Мы также смогли настроить /shop и /support навигацию с соответствующими страницами, отображаемыми в браузере. Мы также использовали vee-validate для обработки проверки ввода формы на странице поддержки. В следующей части мы собираемся добавить функции корзины и оформления заказа в наше приложение Gridsome, чтобы пользователи действительно могли заказывать блюда из нашего ресторана. Увидимся там!