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
Для кого этот курс:
- Реагируйте на разработчиков, которые хотят повысить свою ценность и навыки
- Реагируйте на разработчиков, которые хотят опередить игру и узнать больше, чем средний разработчик
- Разработчики, которые хотят создавать и создавать сайты быстрой электронной коммерции.
Последнее редактирование модератором:
- Статус
- В этой теме нельзя размещать новые ответы.