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, изучив с помощью 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. Мы рассмотрим все остальное, от , Shopify, GraphQL и styled-components!
Обгоняйте соперников с Гэтсби!
создает максимально быстрый веб-сайт. Вместо того, чтобы ждать создания страниц по запросу, 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
Для кого этот курс:
Реагируйте на разработчиков, которые хотят повысить свою ценность и навыки
Реагируйте на разработчиков, которые хотят опередить игру и узнать больше, чем средний разработчик
Разработчики, которые хотят создавать и создавать сайты быстрой электронной коммерции.
Стек электронной коммерции Gatsby! Используйте Gatsby JS и Shopify lite для создания магазинов электронной коммерции Gatsby (с динамической корзиной и оплатой!)
Авторы: Tom Phillips
Субтитры: Русский (авторские), Английский
Язык: Английский
Чему вы научитесь
Узнайте Gatsby
Узнайте, как использовать Shopify
Запрос данных Shopify из Gatsby с использованием GraphQL
Создайте полнофункциональный сайт электронной коммерции с помощью Gatsby и GraphQL
Используйте компоненты в стиле React для стилизации нашего сайта
Создание адаптивного макета электронной коммерции, ориентированного на мобильные устройства
Создайте динамическую корзину и динамическую проверку запасов для наших продуктов
Описание
Вы хотите улучшить свои навыки React JS и повысить свою ценность как интерфейсного разработчика?
- «Gatsby позволяет создавать невероятно быстрые сайты с вашими данными , независимо от их источника. Освободите свои сайты от устаревших CMS и летите в будущее».
В этом курсе мы создадим сайт электронной коммерции HYBRID, динамический + статический Gatsby, используя Shopify для управления данными о наших продуктах и заказами!
Повысьте свой набор навыков React, изучив с помощью 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. Мы рассмотрим все остальное, от , Shopify, GraphQL и styled-components!
Обгоняйте соперников с Гэтсби!
создает максимально быстрый веб-сайт. Вместо того, чтобы ждать создания страниц по запросу, 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
Для кого этот курс:
Реагируйте на разработчиков, которые хотят повысить свою ценность и навыки
Реагируйте на разработчиков, которые хотят опередить игру и узнать больше, чем средний разработчик
Разработчики, которые хотят создавать и создавать сайты быстрой электронной коммерции.