Добавьте новый вид на странице аккаунта Woocommerce.

Содержание

Вопрос или проблема
Ответ или решение
Добавление нового представления на странице аккаунта WooCommerce
Шаг 1: Регистрация конечной точки
Шаг 2: Добавление переменной запроса
Шаг 3: Создание файла представления
Шаг 4: Настройка контента для новой конечной точки
Шаг 5: Обновление шаблона страницы аккаунта
Заключительные рекомендации

Вопрос или проблема

Я работаю над индивидуальной темой для Woocommerce. Я уже разобрался, как добавить метку “Список желаемого” в навигацию “Мой аккаунт” Woocommerce. Когда вы нажимаете на элемент навигации “Список желаемого”, вы переходите на domain.com/my-account/wishlist. Но “просмотр” еще не существует.

/*
* Регистрируем новый эндпоинт списка желаемого
*/
function add_wishlist_endpoint() {
    add_rewrite_endpoint( 'wishlist', EP_ROOT | EP_PAGES );
}

add_action( 'init', 'add_wishlist_endpoint' );


/*
* Регистрируем новый эндпоинт списка желаемого
*/
function wishlist_query_vars( $vars ) {
    $vars[] = 'wishlist';
    return $vars;
}

add_filter( 'query_vars', 'wishlist_query_vars', 0 );

Я создал новый файл my-wishlist.php в своей теме в папке Woocommerce (themes/my-theme/woocommerce/myaccount/my-wishlist.php)

<?php
    if ( ! defined( 'ABSPATH' ) ) {
        exit;
    }

    echo do_shortcode('[yith_wcwl_wishlist]');
?>

Я хочу, чтобы файл my-wishlist.php отображался с правой стороны навигации, как заказы, адреса, детали аккаунта. Таким образом, когда вы нажимаете на элемент меню “Список желаемого”, вы по-прежнему видите навигацию аккаунта с левой стороны.

Шаблон страницы моего аккаунта выглядит так:

<sidebar>
<?php 
    do_action( 'woocommerce_account_navigation' );
?>
</sidebar>

<main>
<?php
    do_action( 'woocommerce_account_content' );
?>
</main>

 add_action('woocommerce_account_wishlist_endpoint', function() {
    $wishlists = [];

    wc_get_template('myaccount/my-wishlist.php', [
        'wishlists' => $wishlists
    ]);
});

Ответ или решение

Добавление нового представления на странице аккаунта WooCommerce

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

Шаг 1: Регистрация конечной точки

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

/*
* Регистрация новой конечной точки "wishlist"
*/
function add_wishlist_endpoint() {
    add_rewrite_endpoint( 'wishlist', EP_ROOT | EP_PAGES );
}
add_action( 'init', 'add_wishlist_endpoint' );

Эта функция использует хук init для добавления конечной точки. После этого ваша страница будет доступна по следующему адресу: domain.com/my-account/wishlist.

Шаг 2: Добавление переменной запроса

Чтобы правильно обрабатывать URL, мы должны добавить переменную к функционалу WooCommerce.

/*
* Регистрация переменной запроса для "wishlist"
*/
function wishlist_query_vars( $vars ) {
    $vars[] = 'wishlist';
    return $vars;
}
add_filter( 'query_vars', 'wishlist_query_vars', 0 );

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

Шаг 3: Создание файла представления

Теперь вам нужно создать файл представления my-wishlist.php в директории вашей темы:

/wp-content/themes/my-theme/woocommerce/myaccount/my-wishlist.php

Содержимое файла может выглядеть следующим образом:

<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Защита от прямого доступа.
}

echo do_shortcode('[yith_wcwl_wishlist]');

В этом коде происходит вызов шорткода для вывода содержимого "Списка желаемого" от YITH.

Шаг 4: Настройка контента для новой конечной точки

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

add_action('woocommerce_account_wishlist_endpoint', function() {
    $wishlists = []; // Массив для хранения данных списка желаемого

    wc_get_template('myaccount/my-wishlist.php', [
        'wishlists' => $wishlists
    ]);
});

Этот код добавляет функционал для вывода содержимого my-wishlist.php, когда пользователь переходит по ссылке "Список желаемого".

Шаг 5: Обновление шаблона страницы аккаунта

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

<sidebar>
    <?php 
        do_action( 'woocommerce_account_navigation' );
    ?>
</sidebar>

<main>
    <?php
        do_action( 'woocommerce_account_content' );
    ?>
</main>

Эти вызовы обеспечивают отображение навигации слева и контента на главной панели справа, как это сделано на страницах "Заказы", "Адреса" и "Детали аккаунта".

Заключительные рекомендации

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

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