Gatsby JS и Shopify: екоммерс сайты Gatsby [Udemy] [Том Филлипс]

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

Для кого этот курс:

• Реагируйте на разработчиков, которые хотят повысить свою ценность и навыки
• Реагируйте на разработчиков, которые хотят опередить игру и узнать больше, чем средний разработчик
• Разработчики, которые хотят создавать и создавать сайты быстрой электронной коммерции.

Скрытая ссылка