В предлагаемом цикле уроков мы будем создавать интернет-магазин на CMS WordPress с использованием плагина WooCommerce. При этом мы не будем использовать готовые темы, а будем создавать собственную тему для WooCommerce с нуля.
В первом уроке мы установим WordPress и WooCommerce, а также импортируем товары из файла CSV, который предлагается плагином WooCommerce.
В данном видео мы создадим папку собственной темы и задекларируем поддержку темой WooCommerce. Для чего необходимо декларирование поддержки WooCommerce в теме? Для переопределения шаблонов. Одним из вариантов создания темы WooCommerce является как раз переопределение шаблонов. Другой вариант - использование хуков. Мы будем использовать оба варианта при создании темы и разработки интернет-магазина на WooCommerce.
Из данного урока вы узнаете о двух ключевых вариантах создания темы WooCommerce, которые и позволяют нам создавать тему с нужным оформлением. Первый способ, попроще, заключается в переопределении шаблонов. Все, что необходимо сделать, это найти нужный шаблон в папке плагина, скопировать его в нужную папку создаваемой темы и внести правки. Второй способ связан с хуками. Шаблоны WooCommerce активно используют хуки для различного функционала (цикл вывода товаров, вывод карточки товара, вывод элементов карточки товара и т.д.). И изменить этот функционал можно, взаимодействуя с хуками, например, переопределяя функции, прикрепленные к хукам.
В данном уроке по WooCommerce мы продолжим создание собственной темы интернет-магазина и перенесем верстку главной страницы в шаблон главной страницы WordPress. Также мы правильно подключим стили и скрипты темы, используя файл functions.php. Кроме этого, мы используем фильтр для отключения стандартных стилей WooCommerce - для нас они лишние, поскольку у нас есть собственное оформление.
В этом уроке мы добавим в тему поддержку пользовательских меню, а также создадим и выведем меню в шапке сайта. Для того, чтобы меню имело нужный вид, мы переопределим класс Walker_Nav_Menu, который используется для формирования меню в WordPress.
В этом уроке мы создадим настройки темы, в которые вынесем телефон и ссылки соцсетей. Для работы с опциями темы будем использовать Customizer API в WordPress. Кастомайзер очень удобен с точки зрения юзабилити и позволяет при изменении значения опции сразу увидеть результат изменений на странице сайта.
В этом уроке мы реализуем вывод слайдера в теме. Для этого мы добавим собственный тип записи в WordPress, который и будет хранить слайды.
В этом уроке мы приступим к созданию карточки товара WooCommerce. Карточка товара представляет из себя универсальный шаблон, который используется для вывода блоков товаров на главной странице, на странице товара, на странице витрины и т.д.
В этом уроке мы завершим создание карточки товара WooCommerce. Карточка товара представляет из себя универсальный шаблон, который используется для вывода блоков товаров на главной странице, на странице товара, на странице витрины и т.д.
В этом уроке мы напишем собственный шорткод для получения и вывода последних товаров интернет-магазина.
В этом уроке мы реализуем функционал мини-корзины. При добавлении товара в корзину, которое происходит асинхронно, мини-корзина будет обновляться без перезагрузки страницы, изменяя свое количество и список товаров. Удаление товаров из мини-корзины будет происходить также без перезагрузки страницы.
В этом уроке мы реализуем функционал поиска по товарам. Для этой цели воспользуемся плагином, который позволит реализовать живой поиск, т.е. поиск с предложением вариантов при вводе поискового запроса.
В этом уроке мы приступим к реализации шаблона категории. Этот шаблон является универсальным и используется сразу для нескольких страниц магазина.
В этом уроке мы продолжим реализацию шаблона категории. В частности, мы выведем товары на страницу, а также визуализируем ajax-запрос добавления товара в корзину.
В этом уроке мы продолжим реализацию шаблона категории. В частности, мы реализуем вывод уведомлений при отключенном в настройках магазина AJAX, реализуем вывод списка сортировки товаров, а также выведем пагинацию или постраничную навигацию.
В этом уроке мы завершим реализацию шаблона категории. И здесь мы добавим фильтры к странице категорий и магазина. При реализации фильтров я покажу как стандартное решение, которое идет в WooCommerce из коробки, так и использование стороннего плагина.
В этом уроке мы выведем список категорий на главной странице, а также уберем подключение фильтров на странице поиска. Кроме этого, в уроке вы найдете ответы на некоторые вопросы, которые задавались в комментариях.
В этом уроке мы приступим к созданию страницы товара и реализуем вывод основного изображения и дополнительных изображений товара в виде галереи.
В этом уроке мы продолжим создание страницы товара и реализуем вывод информации о товаре: наименование, цена, добавление в корзину и т.д.
В этом уроке мы вернемся к выводу изображений товара и реализуем возможность просматривать их в модальном окне типа Lightbox.