Gatsby JS и Shopify: екоммерс сайты Gatsby
Стек электронной коммерции Gatsby! Используйте Gatsby JS и Shopify lite для создания магазинов электронной коммерции Gatsby (с динамической корзиной и оплатой!)
Авторы: Tom Phillips
Субтитры: Русский (авторские), Английский
Язык: Английский
Чему вы научитесь
- Узнайте Gatsby
- Узнайте, как использовать Shopify
- Запрос данных Shopify из Gatsby с использованием GraphQL
- Создайте полнофункциональный сайт электронной коммерции с помощью Gatsby и GraphQL
- Используйте компоненты в стиле React для стилизации нашего сайта
- Создание адаптивного макета электронной коммерции, ориентированного на мобильные устройства
- Создайте динамическую корзину и динамическую проверку запасов для наших продуктов
Вы хотите улучшить свои навыки React JS и повысить свою ценность как интерфейсного разработчика?
- «Gatsby позволяет создавать невероятно быстрые сайты с вашими данными , независимо от их источника. Освободите свои сайты от устаревших CMS и летите в будущее».
В этом курсе мы создадим сайт электронной коммерции HYBRID, динамический + статический Gatsby, используя Shopify для управления данными о наших продуктах и заказами!
Повысьте свой набор навыков React, изучив Gatsby.js с помощью Shopify Backend! Gatsby JS использует React JS и GraphQL для создания и построения статических страниц из заданного набора данных. В этом курсе будет рассмотрено настройка Shopify для управления нашими продуктами и заказами клиентов при использовании GatsbyJS для создания молниеносного серверного веб-сайта React из данных Shopify.
В этом курсе мы создадим полностью функционирующий веб-сайт электронной коммерции, рассмотрим начальную настройку и разработку Gatsby JS и Shopify локально, создадим компоненты React в Gatsby на основе данных о продуктах и коллекциях Shopify и будем запрашивать данные Shopify с GraphQL для автоматического генерировать наши статические страницы.
Мы также будем создавать динамическую корзину и проверку запасов, чтобы убедиться, что товары доступны в режиме реального времени.
Мы рассмотрим, как мы можем запрашивать данные Shopify с GraphQL с помощью инструмента браузера GraphiQL. Когда мы освоимся и освоим разработку с GatsbyJS и Shopify, мы перейдем к настройке и развертыванию действующего веб-сайта с помощью Netlify, который перестраивает наши статические веб-страницы каждый раз, когда мы обновляем контент в нашем бэкэнде Shopify.
Рекомендуется иметь элементарные знания React. Мы рассмотрим все остальное, от Gatsby.js, Shopify, GraphQL и styled-components!
Обгоняйте соперников с Гэтсби!
Gatsby.js создает максимально быстрый веб-сайт. Вместо того, чтобы ждать создания страниц по запросу, Gatsby предварительно создает страницы и помещает их в глобальное облако серверов (для этого мы будем использовать Netlify), готовые к немедленной доставке вашим пользователям, где бы они ни находились.
Некоторые преимущества использования Gatsby включают в себя:
- Не нужно ждать ответов API
- Не нужно ждать рендеринга компонентов на основе запрошенных данных
- Никаких загрузочных блесен!
- Не нужно ждать, пока сервер скомпилирует страницу для обслуживания браузера - эти страницы уже предварительно скомпилированы с помощью Gatsby и готовы к немедленному использованию для ваших пользователей!
Материалы курса
• 62 лекций • Общая продолжительность 6 ч 9 мин
- Важно: прежде чем вы начнете этот курс
00:37 - Предпросмотр04:02
- Предпросмотр05:29
- Предпросмотр03:03
- Пошаговое руководство по стартовым файлам проекта Gatsby
07:21 - Настройка Shopify и импорт примеров товаров
09:21 - Отключить реальные платежи Shopify + включить фиктивные платежи
01:56 - Коллекции в Shopify
02:32 - Настройте ключи API в Shopify и подключитесь к Gatsby
06:12 - Запрос данных Shopify с помощью GraphiQL
03:02
- Запросить данные Shopify из Gatsby и создать страницы из данных о продукте
08:07 - Начать создание шаблона продукта
06:02 - Запрос определенного продукта с помощью запросов страницы
07:07 - Введение в стилизованные компоненты
11:05
- Знакомство с изображениями в Гэтсби
05:14 - Создание компонента ImageGallery
06:28 - Создание и рендеринг компонентов ImageThumbnail
06:11 - Реализация функции активных миниатюр
05:16
- Введение в CartContext и динамический вызов API-интерфейса shopify
09:06 - Отображение вариантов продукта
04:50 - Отображение цены варианта
05:37 - Реализация маршрутизации для вариантов (часть 1)
07:45 - Реализация маршрутизации для вариантов (часть 2)
04:20 - Измените миниатюру изображения при выборе варианта
02:26 - Скрыть варианты, если только 1 вариант
01:04
- Создание компонента ProductQuantityAdder (часть 1)
09:50 - Создание компонента ProductQuantityAdder (часть 2)
01:52 - Добавьте логику в ProductQuantityAdder
02:43 - Создание компонента заголовка
05:25 - Реализовать функцию добавления в корзину
07:10 - Отображение количества товаров и общей цены в заголовке
03:19
- Ссылка на страницу корзины
05:16 - Создание страницы и отображение товаров в корзине
06:05 - Стилизация товаров в тележке
07:45 - Добавление кнопок регулятора количества
07:55 - Добавление кнопки удаления
04:08
- Добавление данных коллекций
05:08 - Запрос коллекций с домашней страницы
06:10 - Отрисовка сетки коллекций
04:53 - Стилизация плитки коллекций
06:06 - Укладка распродажной плитки
06:35 - Отображение рекомендуемых продуктов
05:09 - Стилизация сетки рекомендуемых товаров
06:53 - Отделка изделия плиткой
08:54
- Создание страницы со всеми продуктами и отрисовка фильтров
05:27 - Стилизация фильтров и создание компонента Checkbox
09:30 - Создание функционала флажка фильтра категорий
07:03 - Реализовать выбор / отменить выбор нескольких фильтров категорий
07:39 - Продукты для рендеринга
10:57
- Создание поискового компонента
04:54 - Реализация поискового фильтра через URL
07:43 - Добавьте логику поискового фильтра для продуктов
06:30
- Реализация кассы
08:44 - Добавьте кнопки "купить сейчас" на плитки коллекции домашней страницы
04:49 - Добавить ссылку на логотип домашней страницы
06:17 - SEO
04:38
- Развернуть в netlify
04:04 - Автоматическая перестройка при изменении содержания Shopify
02:51 - Расширение auto rebuild - введение в faunadb
06:31 - Функции Netlify
05:37 - Завершение автоматического восстановления
19:58
- БОНУС!
00:22
- Реагируйте на разработчиков, которые хотят повысить свою ценность и навыки
- Реагируйте на разработчиков, которые хотят опередить игру и узнать больше, чем средний разработчик
- Разработчики, которые хотят создавать и создавать сайты быстрой электронной коммерции.
https://www.udemy.com/course/gatsby-ecommerce-shopify/