Как редактировать страницу магазина WooCommerce программно (CSS и PHP)

Опубликовано: 2020-08-27

Ищете способы настроить страницу своего магазина? В этом руководстве мы покажем вам, как редактировать страницу магазина WooCommerce программно, используя PHP и CSS .

В любом интернет-магазине очень важно редактировать и оптимизировать страницу магазина, чтобы повысить коэффициент конверсии. Страница магазина — это место, где вы показываете свои продукты, и это может создать или разрушить ваш бизнес. Если вы используете магазин WooCommerce, мы настоятельно рекомендуем вам настроить страницу магазина и максимально использовать ее возможности. В этом руководстве мы покажем вам, как программно редактировать страницу магазина WooCommerce .

Почему важно редактировать страницу магазина в WooCommerce?

Страница магазина — одна из самых важных страниц в WooCommerce. Именно здесь вы показываете свои товары своим посетителям, что может оказать огромное влияние на производительность вашего магазина. Хорошая страница магазина может улучшить взаимодействие с пользователем, повысить коэффициент конверсии и помочь вам привлечь пользователей. С другой стороны, плохая страница магазина может сделать прямо противоположное и задушить ваш бизнес.

Вот почему вы должны оптимизировать его, чтобы максимизировать свои продажи . Вы можете сделать это с помощью плагинов и компоновщиков страниц, но если у вас есть навыки кодирования, создание собственного решения — это то, что вам нужно.

Как программно отредактировать страницу магазина WooCommerce

Ранее мы видели различные способы настройки страницы магазина. Однако в этом уроке мы сосредоточимся на том, как редактировать страницу магазина WooCommerce программно , используя немного кода CSS и PHP. Стоит отметить, что в этом руководстве мы будем работать над дочерней темой, а также отредактируем стандартный шаблон магазина WooCommerce. Мы сосредоточимся на файлах шаблонов WooCommerce и некоторых ссылках на файл functions.php дочерней темы.

В этом руководстве вы узнаете, как программно редактировать страницу магазина WooCommerce, чтобы:

Отключить шаблон страницы магазина WooCommerce по умолчанию
Настройка заголовков и содержимого
1. Самые популярные продукты
2. Самые продаваемые продукты
3. Самые популярные
4. Отображать товары по таксономиям
5. Настройте страницу магазина WooCommerce в functions.php
Отредактируйте макет цикла продуктов и примените таблицу стилей CSS.
1. Изменить количество столбцов по умолчанию в строке
2. Применить стиль CSS к странице магазина
Отредактируйте файлы цикла на странице магазина WooCommerce.
1. Замените текст «распродажа» по умолчанию на анимированный gif.
2. Удалить параметры сортировки и пагинации

Прежде чем ты начнешь

Обратите внимание, что следующее руководство включает в себя продвинутое кодирование, поэтому, если у вас нет технических навыков, мы рекомендуем вам вместо этого следовать этому другому руководству .

Прежде чем начать, мы также рекомендуем вам установить дочернюю тему. Вы можете ознакомиться с нашим руководством о том, как создать дочернюю тему или использовать плагин, чтобы сделать это за несколько кликов. Кроме того, поскольку вы будете изменять основные файлы, рекомендуется сделать полную резервную копию вашего сайта.

Итак, теперь давайте посмотрим, как настроить страницу магазина в WooCommerce с помощью кодирования.

1. Отключить шаблон страницы магазина WooCommerce по умолчанию

Для настройки страницы магазина есть два возможных подхода:

Вы можете перезаписать файл WooCommerce, отвечающий за печать страницы магазина.
Добавьте настраиваемые скрипты в файл functions.php вашей дочерней темы с помощью хуков WC.

Вы можете редактировать HTML-шаблон WooCommerce точно так же, как файл functions.php дочерней темы, перезаписывая основные файлы, чтобы предотвратить удаление при обновлении. Однако, поскольку все работает не так, как в файле functions.php , если WooCommerce решит обновить эти файлы, ваши настройки могут больше не работать.

Но это не о чем беспокоиться. WooCommerce знает об этом, поэтому они редко обновляют файлы шаблонов таким образом, что это может нарушить работу ваших скриптов. Проблема работы с файлом functions.php заключается в том, что страница магазина WooCommerce по умолчанию все равно будет отображаться после того, как вы добавите свои хуки.

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

Файл архив-product.php

В WooCommerce файл, отвечающий за вывод на страницу магазина, называется archive-product.php , и вы можете найти его в папке шаблонов WooCommerce ( WooCommerce > Templates > archive-product.php ). Редактировать страницу магазина WooCommerce программно — отключить шаблон страницы магазина

Чтобы перезаписать этот файл, вам нужно скопировать и вставить его в папку WooCommerce в вашей дочерней теме, как показано ниже:

Теперь давайте посмотрим на файл archive-product.php , чтобы вы могли увидеть, как WooCommerce отображает страницу магазина. Для этого откройте свою любимую интегрированную среду разработки (IDE), перейдите в папку шаблонов плагина WooCommerce и откройте файл. Вы можете редактировать его и экспериментировать с ним точно так же, как вы можете настроить любой другой файл шаблона WC.

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

В файле archive-product.php вы увидите несколько do_action() . Эти функции используются для создания доступных в настоящее время хуков WooCommerce для страницы магазина. Чтобы полностью отключить страницу магазина WooCommerce, просто удалите цикл, отвечающий за печать товаров:

 если (wc_get_loop_prop ("всего")) {
    в то время как (have_posts()) {
        the_post();
        do_action('woocommerce_shop_loop');
        wc_get_template_part('контент', 'продукт');
    }
}

Здесь вы можете внести дополнительные изменения, но для упрощения мы удалим только цикл, а все остальное оставим как есть. Если вы решите внести дополнительные изменения, имейте в виду, что если вы удалите некоторые из do_action() , соответствующий шорткод больше не будет работать ни на одной странице веб-сайта.

После удаления цикла печати продукции файл archive-product.php будет выглядеть так:

 определен('ABSPATH') || выход;
get_header('магазин');
do_action('woocommerce_before_main_content');
если (woocommerce_product_loop()) {
    do_action('woocommerce_before_shop_loop');
    // здесь мы удалили цикл
    do_action('woocommerce_after_shop_loop');
} еще {
    do_action('woocommerce_no_products_found');
}
do_action('woocommerce_after_main_content');
do_action('woocommerce_sidebar');
get_footer('магазин');

Вот и все! Вы отключили шаблон страницы магазина по умолчанию и отредактировали страницу магазина WooCommerce программно ! Теперь у вас есть пустая страница магазина, поэтому вы можете начать создавать свою собственную.

2. Настройте заголовки и содержимое страницы магазина WooCommerce программно

Содержимое и заголовки могут быть любой HTML-разметкой, которая может включать изображения, таблицы или ссылки. Или даже что-то вроде пустого контейнера для запуска внешнего файла JavaScript. Для этого вам понадобятся базовые знания шорткодов WooCommerce, поскольку вы собираетесь использовать их для отображения товаров на странице магазина. Если вы не знакомы с шорткодами WC, ознакомьтесь с этим руководством.

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

2.1 Показать самые популярные товары

Для отображения самых популярных товаров вам необходимо отредактировать файл archive-product.php вашей дочерней темы. Сначала используйте следующий шорткод

 [ products orderby="popularity" ]

Прямо там, где была петля до того, как вы ее удалили. # отображать самые популярные товары: 2 товара в 2 колонки

 do_action('woocommerce_before_shop_loop');
echo '<h1>САМЫЙ ПОПУЛЯРНЫЙ!!</h1>';
do_shortcode('[ products orderby="popularity" class="m-popular" columns="2" limit="2" ]'); do_action('woocommerce_after_shop_loop');

В шорткоде вы добавите класс с именем m-popular , который вы сможете использовать позже при применении стилей. В приведенном выше примере мы установили его для отображения 2 продуктов в одной строке из 2 столбцов (columns=”2″ limit=”2″) . Обратите внимание, что вы не можете использовать шорткоды здесь так же, как вы используете их в публикации или на странице.

Вы должны использовать do_shortcode() , чтобы шорткоды работали. Если все прошло хорошо, теперь вы должны увидеть это на странице магазина: пользовательская страница магазина

2.2 Самые продаваемые продукты

Еще один способ программной настройки магазина WooCommerce — сортировка товаров по бестселлерам. Для этого, помимо повторения шорткода, вы добавите некоторый контент, используя простую HTML-разметку ( <h1> ). Здесь вы можете добавить любой другой тип контента, соответствующий правильному формату HTML.

Давайте отобразим самые продаваемые продукты, на этот раз в макете из 2 строк и 3 столбцов. Для этого просто вставьте это сразу после echo do_shortcode() , которую вы вставили на предыдущем шаге 2.1:

 echo '<h1>Бестселлеры</h1>';
do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]');

И что вы получаете, это: пользовательская страница магазина Если вы хотите добавить только бестселлеры вместо самых популярных продуктов, просто замените echo -строку в 2.1 на строку в 2.2.

2.3 Продукты с самым высоким рейтингом

Теперь давайте еще поиграем с короткими кодами и отобразим продукты с самым высоким рейтингом. На этот раз мы будем использовать шорткод без дополнительных атрибутов, кроме класса.

 echo '<h1>Лучшие оценки</h1>';
do_shortcode('[ top_rated_products class="t-rated" ]');

Посмотрим, что будет после этого: пользовательская страница магазина Как видите, макет WooCommerce по умолчанию имеет 4 столбца. Оставим пока так, вернемся к этому позже.

2.4 Отображение товаров по таксономиям на странице магазина

Помимо отображения самых продаваемых или самых популярных продуктов, вы также можете отображать их по таксономиям. Например, следующий код будет печатать продукты для категорий «Плакаты» и «Одежда», используя те же атрибуты, которые вы использовали ранее, но изменив количество столбцов на 5.

 echo '<h1>Таксономия одежды:</h1>';
do_shortcode('[ products category="Clothing" columns="5" limit="10" class="t-clothing" ]'); echo '<h1>Таксономия постеров:</h1>'; echo '<h2>Заберите лучшие постеры на стену</h2>'; do_shortcode('[ products category="Posters" limit="4" class="t-posters" ]');

И вот как теперь должен выглядеть ваш archive-product.php :

 <header class="woocommerce-products-header">
       <h1 class="woocommerce-products-header__title page-title"></h1>	
</заголовок>
<?php
если (woocommerce_product_loop()) {
	do_action('woocommerce_before_shop_loop');		
	
	echo '<h1>САМЫЙ ПОПУЛЯРНЫЙ!!</h1>';
        do_shortcode('[ products orderby="popularity" class="m-popular" columns="2" limit="2" ]'); echo '<h1>Бестселлеры</h1>'; do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]'); echo '<h1>Лучшие оценки</h1>'; do_shortcode('[ top_rated_products class="t-rated" ]'); echo '<h1>Таксономия одежды:</h1>'; do_shortcode('[ products category="Clothing" columns="5" limit="10" class="t-clothing" ]'); echo '<h1>Таксономия постеров:</h1>; echo '<h2>Заберите лучшие постеры на стену</h2>'; do_shortcode('[ products category="Posters" columns="2" limit="4" class="t-posters" ]'); do_action('woocommerce_after_shop_loop'); } else { do_action('woocommerce_no_products_found'); } do_action('woocommerce_after_main_content'); do_action('woocommerce_sidebar'); get_footer('магазин');

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

2.5 Настройте страницу магазина WC в functions.php

Если вы хотите программно настроить страницу магазина WooCommerce, вы также можете отредактировать файл functions.php . Для контента вне цикла продуктов вы можете использовать некоторые хуки из файла archive-product.php , запуская их из файла functions.php дочерней темы. Таким образом вы убедитесь, что ваши скрипты будут работать, даже если WC решит обновить свои файлы шаблонов.

Для этого примера давайте добавим настраиваемый заголовок с заголовком, подзаголовком, описанием и баннером. Вставьте этот скрипт в файл functions.php дочерней темы:

 add_action('woocommerce_before_shop_loop','shop_main_heading');
функция shop_main_heading(){
	$контент = '';
	$content.='<h1>Добро пожаловать на страницу моего замечательного магазина!</h1>'; 
	$content.='<h2>Сделано мной с любовью</h2>';
	$content.='<p>Спасибо, что прошли мимо и посетили страницу магазина на моем веб-сайте, пожалуйста, просмотрите наиболее понравившиеся товары и приобретите их все</p>';
	$content.='<img src="https://www.carpetright.co.uk/globalassets/static-pages/useful-links/samples/sample-banner.jpg"/>';
	эхо $контент;
}

Вот как будет выглядеть страница вашего магазина: пользовательская страница магазина Точно так же вы можете использовать хук woocommerce_after_shop_loop для отображения некоторого контента в конце страницы магазина.

3. Отредактируйте количество продуктов в строке и примените таблицу стилей CSS к странице магазина WC.

К настоящему времени вы должны иметь возможность отображать продукты, сортировать их по избранным, таксономиям, бестселлерам и любым другим способом, который вы хотите, используя шорткоды WooCommerce. Кроме того, вы должны иметь возможность вставлять любой контент в любое место на странице вашего магазина. Но что, если бы вы могли пойти еще дальше и вывести страницу своего магазина на новый уровень? Вы можете отредактировать макет шаблона и добавить некоторые стили CSS, чтобы программно настроить страницу магазина WooCommerce еще больше.

3.1 Изменить количество столбцов по умолчанию в строке

Если вы укажете атрибут столбца шорткода WC, вы можете установить количество продуктов, которое будет отображаться в каждой строке. Дополнительно можно установить общее количество товаров для шорткода с атрибутом limit:

 [ product orderby=”popularity” columns=”3” limit=”3” ]

Однако, если вы не определяете атрибут columns, вы можете установить количество продуктов, которые вы хотите напечатать для каждой строки, используя этот скрипт в файле functions.php дочерней темы.

 add_filter('loop_shop_columns', 'loop_columns', 999);
если (!function_exists('loop_columns')) {
    функция loop_columns() {
        вернуть 4 ;//4 товара в строке
    }
}

Это изменит количество продуктов по умолчанию, отображаемых в строке, только если в шорткоде WooCommerce нет атрибута столбца.

3.2 Применение некоторых стилей CSS к странице магазина

Чтобы применить CSS к странице магазина WooCommerce, вы можете просто добавить свои скрипты в файл шаблона следующим образом:

 <стиль>
* {
    цвет фона:#a2bcff;
}
</стиль>

Это нормально для небольших фрагментов CSS, но не рекомендуется. Чтобы применить стиль CSS в стиле WordPress, вам нужно использовать хук wp_enqueue_scripts для загрузки ваших скриптов из другого файла.

В этом примере мы назовем этот файл shop_style.css и сохраним его в основной папке нашей дочерней темы на том же уровне иерархии, что и файл style.css по умолчанию. После создания этого файла вставьте следующий скрипт в файл functions.php :

 add_action('wp_enqueue_scripts', 'quadlayers_enqueue_css');
функция quadlayers_enqueue_css(){    
    если( is_shop() ) :
    wp_enqueue_style('checkout_style',
        get_stylesheet_directory_uri() . '/shop_style.css'
    );
    конец;
}

Как видите, if(is_shop()): должно быть истинным, чтобы поставить файл shop_style.css в очередь. В этом файле у вас будут все скрипты стилей, которые вы хотите применить только к странице магазина . Это отличается от файла style.css в дочерней теме, который будет применять сценарии ко всему внешнему интерфейсу веб-сайта. В этом руководстве мы будем использовать следующий файл shop_style.css , но не стесняйтесь использовать свои скрипты CSS или изменить этот:

 div.storefront-sorting:nth-child(2){
	выравнивание текста: по центру;
} 
#main div.storefront-sorting h1{
	стиль шрифта: нормальный;
}
#основной h1,#основной h2{
	вес шрифта:жирнее;
	стиль шрифта: наклонный;
	выравнивание текста: по центру;
}
#main > .m-popular,#main > .b-sellers,#main > .t-rated,#main > .t-clothing,#main > .t-posters{	
	граница: сплошная #b8b8b8 1px;
	радиус границы: 25px;
	нижняя граница: 25px;
	отступы сверху: 35px;	
	отступ слева: 20px;
	отступ справа: 20px;	
} 
#main > .m-популярный{
	цвет фона:#dbad97;	
}
#main > .b-продавцы {
	цвет фона:#b4e6a3;
}
#main > .t-рейтинг {
	цвет фона:#f0f695;	
}
#main > .t-одежда {
	цвет фона:#95b4f6;	
}
#main > .t-posters {
	цвет фона:#c88fe5;	
}

В файле CSS вы найдете несколько селекторов, содержащих пользовательские классы. Мы создали их до создания шорткодов. Например, мы добавили класс «b-sellers» в шорткод следующим образом:

 do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]');

Итак, после добавления стиля CSS на страницу магазина WooCommerce вы получите что-то вроде этого (щелкните изображение, чтобы увидеть его в полном размере): Нажмите на изображение, чтобы просмотреть его в полном размере

Нажмите на изображение, чтобы просмотреть его в полном размере.

Кроме того, имейте в виду, что у нас активна тема StoreFront, и, как вы, возможно, знаете, селекторы CSS могут быть разными на каждом веб-сайте, даже если у них одна и та же тема. Поэтому, чтобы заставить этот файл работать, вам может потребоваться отредактировать селекторы для вашего конкретного сайта.

БОНУС : Как изменить количество товаров на странице

Теперь предположим, что вы хотите изменить количество товаров, отображаемых на странице магазина. Например, если вы хотите отображать 10 товаров на странице, просто добавьте следующий код в файл functions.php :

 add_filter('loop_shop_per_page', 'new_loop_shop_per_page', 20);

функция new_loop_shop_per_page($cols) {
  $колс = 10;
  вернуть $cols;
}

Где $cols содержит количество продуктов на странице, которое берет значение из Параметры -> Чтение и возвращает количество продуктов, которые вы хотите отображать на каждой странице.

4. Отредактируйте файлы цикла на странице магазина WooCommerce.

До сих пор мы видели, как редактировать файл шаблона archive-product.php для программной настройки страницы магазина WooCommerce. В этом файле запускается цикл WC для отображения всех продуктов на странице. Теперь откройте папку плагина WooCommerce в редакторе плагинов или в вашей IDE и откройте папку цикла. Вы найдете его на том же уровне, что и файл archive-product.php .

В папке цикла вы найдете несколько файлов, которые вы также можете отредактировать, чтобы еще больше настроить страницу магазина. Чтобы перезаписать этот файл, вам нужно создать клонированную папку и файл в вашей дочерней теме. Создайте новую папку под названием loop под ранее созданной папкой WooCommerce.

После этого скопируйте исходный файл sale-flash.php из шаблонов плагина и вставьте его в папку цикла в вашей дочерней теме. Мы будем использовать файл sale-flash.php , чтобы добавить анимированный gif ко всем продуктам, которые продаются со скидкой. Если вы посмотрите на файл, вы увидите, что это скрипт, отвечающий за отображение сообщения «ПРОДАЖА», когда продукт продается со скидкой.

4.1 Заменить текст «распродажа» по умолчанию для анимированного gif

В этом разделе мы покажем вам, как отключить сообщение о распродаже по умолчанию и заменить его анимированным gif. Вам нужно отредактировать файл flash-sale.php вашей дочерней темы, чтобы он выглядел так:

 определен('ABSPATH') || выход;
глобальные $post, $product;
если ($product->is_on_sale()) { 
   $an_gif = '<img src="https://i1.wp.com/tamingchaos.net/wp-content/uploads/2020/04/Sale-Gif.gif" width="100px" height="60px"/ >';
   эхо $an_gif;
}

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

4.2 Удалить параметры сортировки и нумерацию страниц

Теперь давайте посмотрим, как отключить селектор «сортировать по» и функцию нумерации страниц на странице магазина WooCommerce. Подобно тому, что вы сделали с файлом sale-flash.php , вы можете добиться этого, просто сохранив пустой файл с тем же именем.

Создайте оба файла в папке цикла и назовите их orderby.php и pagination.php . Чтобы полностью отключить оба файла, вы должны только поместить этот скрипт в каждый из файлов:

 определен('ABSPATH') || выход;

После этого у вас будет более чистый верхний и нижний колонтитулы на странице вашего магазина. Кроме того, разбиение на страницы может быть не очень полезным, поскольку вы показываете большое количество товаров. редактировать страницу магазина WooCommerce программно - Сортировка и нумерация страниц Обратите внимание, что в файле sale-flash.php мы удалили поведение WooCommerce по умолчанию и добавили собственное отображение анимированного gif. Это очень простая задача, но этот метод предлагает широкий спектр возможностей для опытных разработчиков.

ЗАКЛЮЧИТЕЛЬНЫЕ ПРИМЕЧАНИЯ

Файлы шаблонов WC дочерней темы не предотвращают перезапись, если WooCommerce решит выпустить обновление шаблонов. Однако такое случается редко.
Это примеры сценариев, и их нельзя использовать в производстве, они предназначены только для дидактических целей.

Бонус: отображение категорий на странице магазина WooCommerce.

Наконец, давайте посмотрим, как вы можете добавить категории на страницу магазина WooCommerce, используя небольшой код. Этот метод рекомендуется для пользователей с навыками кодирования. Помимо PHP, рекомендуется также немного знать CSS, чтобы иметь возможность стилизовать код.

ПРИМЕЧАНИЕ . Прежде чем начать, обязательно сделайте резервную копию своего сайта и создайте дочернюю тему, если у вас ее еще нет.

Добавить категории на страницу магазина

На панели инструментов перейдите в раздел « Внешний вид» > «Редактор тем» и откройте файл functions.php дочерней темы. Нажмите на файл functions.php на правой боковой панели Theme Files и вставьте следующие скрипты, чтобы добавить свои пользовательские функции.

Приведенная ниже функция добавит категории ваших продуктов перед загрузкой других элементов страницы вашего магазина. Это означает, что покупатели увидят все ваши категории товаров до каталога товаров.

 функция product_subcategories( $args = array() ) {
$parentid = get_queried_object_id();

$аргументы = массив(
'родительский' => $parentid
);

$terms = get_terms('product_cat', $args);

если ( $ термины ) {
echo '<ul class="product-cats">';

foreach ( $terms как $term ) {
эхо '<li class="category">'; 
woocommerce_subcategory_thumbnail($term);
эхо '<h2>';
echo '<a href="'.esc_url(get_term_link($term)) .'" class="'.$term->slug. '">';
эхо $term->имя;
эхо '</a>';
эхо '</h2>';
эхо '</li>';
}

эхо '</ul>';
}

}

add_action('woocommerce_before_shop_loop', 'product_subcategories', 50);

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

Вывод

В общем, страница магазина чрезвычайно важна и может создать или разрушить ваш магазин. Вот почему, если у вас есть навыки программирования, мы рекомендуем программно отредактировать страницу магазина WooCommerce и оптимизировать ее, чтобы повысить коэффициент конверсии.

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

Для получения дополнительных руководств по настройке вашего магазина WooCommerce мы рекомендуем вам проверить:

WooCommerce AJAX добавление в корзину
Как добавить настраиваемые поля на страницу оформления заказа?
WooCommerce добавить в корзину функцию программно

Наконец, если вы хотите подключить Facebook Shop к WooCommerce, вам следует ознакомиться с этим полным руководством. Вы настроили свой интернет-магазин? Что вы изменили? Если у вас есть какие-либо вопросы, оставьте комментарий ниже, и мы сделаем все возможное, чтобы помочь вам! Вы также можете проверить полный код на Github.