Анализ сайта
Твиты
Афоризмы
Цитаты
Новости
Анализировать

Простая витрина товаров на WordPress

Когда для сайта нужно сделать некоторое подобие товаров, для которых в будущем не нужна будет корзина, сортировка по параметрам и прочие атрибуты полноценного онлайн магазина - можно прибегнуть к плагину ACF, создать категорию товаров и назначить дополнительные "товарные" поля ко всем постам этой категории. Единственный недостаток - это получающаяся мешанина постов (статейные посты, новостные, товарные посты). Для наведения порядка самым очевидным решением будет добавить новый тип записи и вынести такие посты в отдельный пункт меню. В вордпресс есть специальный класс который создаёт пользовательские таксономии (об этом очень подробно расписал товарищ Kama), но проще воспользоваться плагином - Custom Post Type UI.

 

Вообще витрина товаров это просто пример того, что можно сделать на плагине Custom Post Type UI + ACF. Главная функция плагина распределять данные и наводить порядок, сами разработчики в примерах создают на основе этого плагина коллекцию фильмов, но вы можете практически какие угодно данные вложить в функционал этого плагина. По моему опыту самые востребованные вещи на WP + Custom Post Type UI это:

  • Витрины или даже онлайн магазины;
  • Аренда квартир или офисов;
  • Прокат оборудования.

Выделенные в отдельное меню товары можно также распределять по категориям, для этого понадобится создать таксономию, в которую поместить новый тип товаров созданных ранее в меню "Add New Post Type". Но начнём по порядку, для начала стоит хотя бы бегло ознакомиться с доступными настройками и опциями плагина Custom Post Type.

 

Основные настройки плагина Custom Post Type UI

Создание произвольного типа записи

Обязательными для заполнения являются три пункта

Post Type Slug

Идентификатор вашего нового типа поста.

Plural Label

Имя, во множественном числе, которое будет отображаться в системе (например в меню) при взаимодействии с этим типом поста.

Singular Label

Тоже что и выше только в единственном числе.

 

Список настроек интерфейса в созданных типах поста

Настройки заменяют надписи в меню, на странице списка постов и при редактировании поста.

Название Описание По умолчанию
Post Type Description Добавьте описание  
Menu Name Имя для пункта меню Значение из поля
All Items Подпункт меню, открывает список постов  
Add New Заменяет надпись "Добавить новую" в подпункте меню и на странице редактирования Добавить новую
Add New Item Заменяет надпись "Добавить запись" на странице добавления поста Добавить запись
Edit Item  Заменяет надпись "Редактировать запись" на странице редактирование поста Редактировать запись
New Item   Добавить
View Item Изменить название ссылки ведущей на просмотр поста при его редактировании Просмотреть запись
Search Item Меняет надпись на кнопки поиска Поиск записей
Not Found Надпись которая появляется в случае если не найдены записи Записей не найдено.
Not Found in Trash Надпись которая появляется в случае если не найдены записи в корзине Записей в корзине не найдено.
Parent  Заменяет надпись   
Featured Image  Заменяет стандартные надписи в блоке добавления изображения, а также во всплывающем окне добавления изображения Изображение записи
Set Featured Image  Установить изображение записи
Remove Featured Image  Удалить изображение записи
Use Featured Image  Использовать изображение записи
Archives    Архив
Insert into item  Заменяет текст в кнопке "Вставить в запись" при вставки картинки в медиаменеджере Вставить в запись
Uploaded to this Item  Заменяет текст в кнопке "Загрузить"  Загрузить
Filter Items List  Заменяет  текст в кнопке фильтр в списке постов  Фильтр
Items List Navigation   ?  ?
Items List   Заменяет текст "Список постов"  Все записи
Attributes   Заменяет текст в блоке Атрибуты при редактировании поста  Атрибуты

 

Список настроек Custom Post Type UI

 

Menu Position

Стандартное значение: 5.

Описание: Указывает каким по счету пунктом будет идти меню кастомных постов. Указывается от 5, т.к. первыми идут стандартные пункты меню.

 

Menu Icon

Стандартное значение: пусто (но тем не менее по умолчанию выводиться иконка канцелярской кнопки).

Описание: Для того чтобы добавить иконку вы можете вставить либо её непосредственный урл, либо класс Dashicons. Выбрав из списка Dashicons, нужную иконку кликнете по ней, она отобразится слева сверху с полным названием класса. Скопировав класс и вставив его в поле "Menu Icon" иконка появится рядом с вашим кастомным пунктом в меню.

 

Вывод кастомных постов в шаблоне

Для примера создадим тип поста Product. После установки плагина , в меню добавится пункт CPT UI, в котором можно создавать новые типы постов и категории. Итак создаём свой тип поста Product, идем в CPT UI -> Add New Post Type и заполняем основные поля:

 

Обратите внимание на поле "Supports" в настройках (в расшифровки выше есть описание назначения полей), стоит добавить "excerpt" для включения поддержки коротких описаний для этого кастомного типа поста.

 

Теперь добавим возможность раскладывать по категориям такие посты. Переходим в CPT UI -> Add/Edit Taxonomies заполняем основные поля и выбираем только что созданный тип поста в поле "Attach to Post Type":

 

Для добавления постов переходим в появившемся меню с названием вашего типа постов. Если вы не изменяли настройки интерфейса при создании типа поста, то создание постов в новой таксономии не будет отличаться от обычных действий. Создадим несколько категорий и товаров, а потом свяжем их друг с другом:

 

Для того чтобы увидеть посты с новой таксономией (помимо добавления самих постов) нужно вывести ссылки на сайте. Это можно сделать через меню добавив в него кастомные категории. Перейдя в меню, проверьте чтобы в настройка экрана был включен вывод кастомной категории:

 

Добавив вывод постов категорий в меню, можно будет перейти в кастомную категорию на сайте:

 

Дополнительные свойства для товаров с помощью плагина Advanced Custom Fields

Получившийся "магазин" на последнем скриншоте несколько не дотягивает даже до витрины товаров. Как минимум у товара должно быть несколько свойств, которые по хорошему нужно вывести непосредственно в категории где отображен список товаров. Дальнейшие действия будут связаны с созданием небольшого кода для кастомной таксономии и несколько стилей для чуть более гармоничного отображения, так что если вы не хотите писать цену в поле с описанием товара, то придётся немного покодить.

Для начала создадим несколько доп полей в плагине Advanced Custom Fields, пусть это будет две цены - Стандартная и Акционная. 

 

Привязываем эти поля к нашему кастомному типу поста "product" в поле Rules. После чего переходим в сам товар и заполняем/дозаполняем его.

 

Редактирование шаблона c Custom Post Type UI и Advanced Custom Fields

Для того чтобы отредактировать файлы шаблона для начало надо создать дочернюю тему (если вы не используете свой шаблон). В теме необходимо создать два файла:

  • "taxonomy.php" - файл отвечает за вывод списка товаров;
  • "content-product.php" - файл отвечает за вывод внутренностей товарного блока, должен лежать в папке "template-parts"
  • "single-product.php" - файл отвечает за вывод конкретного поста (продукта);
  • "functions.php" - функции в этом файле будут добавлены в родительский файл "functions.php", нам в дочерней теме он понадобиться для парочки модификаций.

 

Для того чтобы показать как редактировать шаблон я буду редактировать стандартную WordPress тему - "twentysixteen", соответственно дочерняя тема должна называться "twentysixteen-child". Для тех кто не хочет читать дальше можно просто посмотреть получившийся код на моём github.

 

Style.css дочерней темы является главным, WP даже не грузит родительский style.css, поэтому в нашем случае мы его просто импортируем. Добавим в CSS вывод в три колонки, небольшую стилизацию информации в товарном блоке, а также стили для будущей всплывающей формы.

 

Для вывода списка товаров создадим и отредактируем файл "taxonomy.php":

 

Для отображения внутренностей товарного блока, в соответствии со структурой родительского шаблона создадим в папке "template-parts" файл "content-product.php":

Здесь удален вывод короткого описания поста формирующегося на основе его содержания, вместо этого под картинкой товара выведено краткое описание заполняемое в поле "Отрывок". 

В блоке "entry-price" - были вызваны поля добавленные с помощью ACF, сформирована либо просто цена, либо если есть скидочная цена - обычная цена перечеркивается и отображается рядом со скидочной ценой.

Добавлена кнопка - див с классом "btn-order". Из особенностей, в её в атрибут oncklick вставлена js функция "cfbuyitnow", она нужна будет для запуска всплывающей формы.

 

Динамическая всплывающая форма (попап/модальное окно) на основе Contact Form 7

Для того чтобы пользователи могли нам сообщать какой товар они собираются купить, а также свои контактные данные нам нужна форма для заполнения таких данных. Но к тому же нам необходимо чтобы в этой форме содержалась и передавалось  дополнительная информация, например - ссылка на товар. Для этого будем использовать плагин Contact Form 7, добавив в него немного динамики. Попутно стоит установить плагин Flamingo для того чтобы отправленные формы сохранялись в админке вордпреса. 

Установив плагин CF7, создадим в нем отдельную форму с названием "Buy it now". Во вкладку FORM вставим html с парочкой блоков разметки для вставки названия товара, скрытый инпут для передачи ссылки на товар, крестик для закрытие формы, а также исправим размер текстового поля и название кнопки "Отправить":

 

Для того чтобы протащить ссылку на товар, которая будет добавляться в input с названием "product-url" отредактируем во вкладке Mail тело письма в поле "Message Body": 

 

Теперь нам нужно вывести форму на страницу, будем выводить её в footer c помощью хука "wp_footer". Так как в CSS мы создали фиксированное всплывающее окно (класс "cf-buyitnow"),  с отключенным по умолчанию отображением (display:none) , нужно добавить яваскрипт, который будет отображать форму после нажатия кнопки "Купить" и скрывать после нажатия по крестику (класс "cf-close"). Всплытие формы организовано с помощью ранее встреченной функции"cfbuyitnow" на кнопке Купить  в файле "content-product.php".

 

Таким образом после нажатия кнопки Купить, в форму добавиться урл покупаемого товара в скрытый input, а в заголовке добавиться имя товара который посетитель собирается заказать.

 

Custom Post Type UI или WooCommerce

Если говорить об обычной витрине товаров, действия пользователя в которой, завершается отправкой заявки на товар, то Custom Post Type хорошее решение. Когда вам нужно полноценное оформление заказа с корзиной, выбором способа доставки и оплаты, то стоит посмотреть в сторону WooCommerce и подобных ему решений.

 

Tags:
1 Star2 Stars3 Stars4 Stars5 Stars6 Stars7 Stars8 Stars9 Stars10 Stars (No Ratings Yet)
Загрузка...

Добавить комментарий