О Вордпресс

Интернет-магазин на Wordpress. Настройка woocommerce. Часть 1.

Интернет-магазин на 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>

То есть в красном кружке будет выведено общее количество товаров в корзине и по клику переходим на страницу корзины, созданием которой я займусь в следующем ролике.

Следующее видео -->

сайт на Bitrix

Территориально я нахожусь в Санкт-Петербурге, но могу и готова работать со всеми, вне зависимости от вашего местоположения. Вы можете написать мне через форму обратной связи, либо связаться через социальные сети. Ознакомиться с портфолио можно здесь и здесь.

Социальные сети

Рандом новостей