Интернет-магазин на Wordpress. Настройка woocommerce. Часть 1.
Стенограмма видео:
Это четвертое видео из цикла "Интернет-магазин на WP". И в этом видео я приступлю к выводу информации, касающейся непосредственно товаров, а именно список категорий в сайдбаре, список товаров на главной и корзина в шапке сайта.
Начнем со списка категорий товаров в сайдбаре, то есть от большего к меньшему. Для начала нужно создать эти категории, для этого я прохожу во вкладку Товары - Категории. И здесь добавляю нужные мне рубрики товаров. После того как все рубрики добавлены, нужно создать из них меню. Прохожу во Внешний вид - меню - создайте новое меню. Назову его "categories" - Создать меню. И перенесу в него все созданные рубрики. Но предварительно надо включить их выбор в "Настройках экрана" - Категории товаров, после чего они появляются в списке для выбора. Чуть позже, когда я создам страницу магазина, я также добавлю ее в это меню с наименованием ALL, как это задано в верстке. Это будет страница shop. И так меню сохранено, теперь его нужно вывести в нужном месте. В первую очередь зарегистрирую новый тип меню в functions.php:
'cat' => __( 'Категории товаров', 'twentyseventeen' ),
Добавлю здесь такую строку. И теперь в меню можно выбрать наше меню, относящееся к этому типу. И для вывода осталось лишь вставить в нужное место данный код:
<?php wp_nav_menu( array( 'theme_location' => 'cat', 'menu_id' => 'menu-cat', ) ); ?>
Если посмотреть в инспекторе, то id меню это id списка тега ul, а theme_location - эта название при регистрации в functions.php. Теперь обновим страничку и посмотрим как это выглядит. Для того, чтобы последний элемент в списке был корректен, давайте создадим страницу магазина - Каталог. И в настройках Woocommerce - Настройки - Товары - Отображение нужно выбрать страницу магазина - Каталог - сохранить изменения. Вернемся в настройки меню и добавим эту страницу в меню категорий, переименовав текст ссылки в ALL. Все, она добавлена в меню и является страницей всего каталога.
Теперь можно приступать к выводу списка товаров. Я создам несколько товаров - 12 штук минимум и добавлю их в разные рубрики. На странице каталога автоматически появляются эти товары. И список товаров должен быть выведен на главной. Это я сделаю с помощью плагина Ajax load more, который одновременно убивает 2 зайцев - добавляет и кнопку "загрузить еще", и эффект masonry greed, конечно, не забываем подключить эту библиотеку в шапке сайта. Я открываю редактирование главной страницы и нажав на иконку плагина собираю shortcode. Для эффекта masonry нужно выбрать в опции transition - type Masonry. И выбрать в опции Тип записей - Товары. И для текущего ряда установлю дополнительный класс catalog.
Поскольку этот внешний вид не подходит, то надо отредактировать шаблон вывода данного плагина. Он находится в файле относительно корня сайта: \wp-content\plugins\ajax-load-more\core\repeater\deafault.php. И здесь я оформлю все так как задано в верстке. И так будет более заметен эффект masonry.
Цена и кнопка добавить в корзину не предусмотрены дефолтной версткой плагина, поэтому:
Цены выведу с помощью следующего кода:
<?php global $product; $price = $product->price; $id = $product->id; ?>
<span class="price dis_block"><?php echo $price;?></span>
то есть я обращаюсь к глобальной переменной и получаю значение свойства "цена"
А кнопку "добавить в корзину":
<a rel="nofollow" data-quantity="1" data-product_id="<?php echo $id?>" href=" <?php echo do_shortcode( '[add_to_cart_url id='.$id.']' ); ?>" class="add_to_cart_button ajax_add_to_cart">add to basket</a>с помощью shortcode, добавляющего необходимый url. Количество добавляемых товаров - 1, что указано в атрибуте data-quantity . Все то же самое можно проделать через админку - в настройках Ajax Load More - Repeater Templates.
Обновляю страницу и вижу, что контент выстраивается не таким образом как мне это нужно. Для этого я открываю настройки сайта - Настройки темы - Разметка страницы - Один столбец. И теперь контент будет выводится в одну колонку. Также надо убрать внутренние отступы у дива с классом .wrap, чтобы не было так сужено. И удалить вывод заголовка header на главной странице (\template-parts\page\content-front-page.php).
Осталось привести в порядок сами элементы и кнопку загрузки. Убрать подчеркивание у ссылок - для этого нужно удалить box-shadow у .entry-content a. Чтобы кнопка пришла к нужному виду - в настройках плагина выбрать чекбокс "I want to use my own CSS styles", чтобы не подключались ненужные мне стили для кнопки.
Обновляю страницу и теперь все выглядит так, как должно быть. И когда открыты все возможные товары, кнопке устанавливается класс done, и она приобретает внешний вид, заданный в стилях.
И последний момент - это вывод корзины в шапке. Для этого я опять-таки прибегну к помощи виджетареи. Зарегистрирую новую виджетарею в functions.php:
register_sidebar( array( 'name' => __( 'Сюда вставить корзину', 'twentyseventeen' ), 'id' => 'sidebar-6', 'description' => __( 'Добавьте сюда виджеты и они выведутся в шапке (корзина).', 'twentyseventeen' ), 'before_widget' => '', 'after_widget' => '', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>', ) );
В нужно месте в файле header.php вставлю код вывода виджетареи:
<?php
if ( is_active_sidebar( 'sidebar-6' ) ) { ?>
<?php dynamic_sidebar( 'sidebar-6' ); ?>
<?php } ?>
И теперь в админке вставлю виджет в созданную виджетарею. Это виджет woocommerce Корзина - наименование стираю. Обновлю сайт и вот корзина вывелась. И если добавить товар, то он добавляется в корзину и отображается без перезагрузки страницы. Последнее, что нужно сделать - это придать ей нужный внешний вид. Я скопирую часть woocommerce в папку с темой, чтобы впоследствии не затерлись изменения. А именно содержимое папки templates. Создам папку woocommerce в директории темы и перенесу туда содержимое папки templates.
Для редактирования мини-корзины открою файл mini-cart.php в папке cart. Удалю здесь весь ul, он не нужен по макету.
И подправлю код:
Если корзина не пуста, то выводить следующее:
<span class="small_cart"> <a href="/cart/">My Cart</a> <span class="dis_inline_bl text-white"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
</span> <?php do_action( 'woocommerce_widget_shopping_cart_before_buttons' ); ?>
если корзина пуста, тогда:
<span class="small_cart">My Cart<span class="dis_inline_bl text-white"><?php echo WC()->cart->get_cart_contents_count(); ?></span> </span>
То есть в красном кружке будет выведено общее количество товаров в корзине и по клику переходим на страницу корзины, созданием которой я займусь в следующем ролике.