Как добавить список желаний в WooCommerce

Опубликовано: 2021-04-22

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

Популярные магазины, такие как Amazon, позволяют онлайн-покупателям создавать несколько списков желаний.

Как добавить список желаний в WooCommerce

В этом уроке мы создадим функциональность списка пожеланий для WooCommerce. Мы будем использовать AJAX, WordPress REST API и графику SVG.

К концу поста вы сможете создать плагин списка желаний.

Давайте посмотрим, как вы можете этого добиться.

Создание плагина списка желаний

Во-первых, нам нужно создать структуру плагина.

Создайте папку с названием «wishlist» и файл PHP с тем же именем.

После этого добавьте следующий фрагмент в файл PHP:


/*

Plugin Name: Woocommerce wishlist

Description: Ajax wishlist for WooCommerce

Author: Njengah

Version: 1.0

*/

if ( ! defined( 'ABSPATH' ) ) {

exit; // Exit if accessed directly

}

Добавление структуры

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

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

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

Прежде чем мы начнем, нам нужно убедиться, что плагин WooCommerce активен. После сведений о плагине добавьте следующий код:


add_action('init','plugin_init');

function plugin_init(){

if (class_exists("Woocommerce")) {

// Plugin code starts here

}

}

Следующим шагом будет добавление в очередь скриптов и стилей нашего плагина путем добавления следующего кода в основной файл плагина:

function wishlist_plugin_scripts_styles(){
    wp_enqueue_style( 'wishlist-style', plugins_url('/css/style.css', __FILE__ ), array(), '1.0.0' );
    wp_enqueue_script( 'wishlist-main', plugins_url('/js/main.js', __FILE__ ), array('jquery'), '', true);
    wp_localize_script(
        'main',
        'opt',
        array(
            'ajaxUrl'        => admin_url('admin-ajax.php'),
            'ajaxPost'       => admin_url('admin-post.php'),
            'restUrl'        => rest_url('wp/v2/product'),
            'shopName'       => sanitize_title_with_dashes(sanitize_title_with_dashes(get_bloginfo('name'))),
            'inWishlist'     => esc_html__("Already in wishlist","text-domain"),
            'removeWishlist' => esc_html__("Remove from wishlist","text-domain"),
            'buttonText'     => esc_html__("Details","text-domain"),
            'error'          => esc_html__("Something went wrong, could not add to wishlist","text-domain"),
            'noWishlist'     => esc_html__("No wishlist found","text-domain"),
        )
    );
}
add_action( 'wp_enqueue_scripts', 'wishlist_plugin_scripts_styles' );

В этом разделе кода мы ставим в очередь основной файл style.css и файл main.js для плагина. Мы также передали некоторые параметры в файл main.js для работы:

  • ajaxURL
  • ajaxPost
  • restUrl
  • магазинНазвание

После добавления кода создайте папку css и js и поместите в эти папки соответствующие файлы: style.css в папку css и main.js в папку js.

Подключить список желаний Toggle

Чтобы подключить переключатель списка желаний , добавьте следующий код в действие инициализации:


// Add wishlist to product
add_action('woocommerce_before_shop_loop_item_title','wishlist_toggle',15);
add_action('woocommerce_single_product_summary','wishlist_toggle',25);
function wishlist_toggle(){
     global $product;
    echo '<span class="wishlist-title">'.esc_attr__("Add to wishlist","text-domain").'</span><a class="wishlist-toggle" data-product="'.esc_attr($product->get_id()).'" href="#" title="'.esc_attr__("Add to wishlist","text-domain").'">'.file_get_contents(plugins_url( 'images/icon.svg', __FILE__ )).'</a>';
}

Приведенный выше код добавляет переключатель списка пожеланий к каждому продукту в цикле и к каждому отдельному макету продукта. Мы использовали хуки woocommerce_before_shop_loop_item_title и woocommerce_single_product_summary.

Добавьте SVG-иконки

Следующим шагом является добавление значков SVG .

Создайте папку с изображениями в папке плагина и поместите в нее следующий icon.svg:


<svg viewBox="0 0 471.701 471.701">
    <path class="heart" d="M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1
            c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3
            l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4
            C471.801,124.501,458.301,91.701,433.601,67.001z M414.401,232.701l-178.7,178l-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3
            s10.7-53.7,30.3-73.2c19.5-19.5,45.5-30.3,73.1-30.3c27.7,0,53.8,10.8,73.4,30.4l22.6,22.6c5.3,5.3,13.8,5.3,19.1,0l22.4-22.4
            c19.6-19.6,45.7-30.4,73.3-30.4c27.6,0,53.6,10.8,73.2,30.3c19.6,19.6,30.3,45.6,30.3,73.3
            C444.801,187.101,434.001,213.101,414.401,232.701z"/>
    <g class="loading">
        <path d="M409.6,0c-9.426,0-17.067,7.641-17.067,17.067v62.344C304.667-5.656,164.478-3.386,79.411,84.479
            c-40.09,41.409-62.455,96.818-62.344,154.454c0,9.426,7.641,17.067,17.067,17.067S51.2,248.359,51.2,238.933
            c0.021-103.682,84.088-187.717,187.771-187.696c52.657,0.01,102.888,22.135,138.442,60.976l-75.605,25.207
            c-8.954,2.979-13.799,12.652-10.82,21.606s12.652,13.799,21.606,10.82l102.4-34.133c6.99-2.328,11.697-8.88,11.674-16.247v-102.4
            C426.667,7.641,419.026,0,409.6,0z"/>
        <path d="M443.733,221.867c-9.426,0-17.067,7.641-17.067,17.067c-0.021,103.682-84.088,187.717-187.771,187.696
            c-52.657-0.01-102.888-22.135-138.442-60.976l75.605-25.207c8.954-2.979,13.799-12.652,10.82-21.606
            c-2.979-8.954-12.652-13.799-21.606-10.82l-102.4,34.133c-6.99,2.328-11.697,8.88-11.674,16.247v102.4
            c0,9.426,7.641,17.067,17.067,17.067s17.067-7.641,17.067-17.067v-62.345c87.866,85.067,228.056,82.798,313.122-5.068
            c40.09-41.409,62.455-96.818,62.344-154.454C460.8,229.508,453.159,221.867,443.733,221.867z"/>
    </g>
    <g class="check">
        <path d="M238.933,0C106.974,0,0,106.974,0,238.933s106.974,238.933,238.933,238.933s238.933-106.974,238.933-238.933
            C477.726,107.033,370.834,0.141,238.933,0z M238.933,443.733c-113.108,0-204.8-91.692-204.8-204.8s91.692-204.8,204.8-204.8
            s204.8,91.692,204.8,204.8C443.611,351.991,351.991,443.611,238.933,443.733z"/>
        <path d="M370.046,141.534c-6.614-6.388-17.099-6.388-23.712,0v0L187.733,300.134l-56.201-56.201
            c-6.548-6.78-17.353-6.967-24.132-0.419c-6.78,6.548-6.967,17.353-0.419,24.132c0.137,0.142,0.277,0.282,0.419,0.419
            l68.267,68.267c6.664,6.663,17.468,6.663,24.132,0l170.667-170.667C377.014,158.886,376.826,148.082,370.046,141.534z"/>
    </g>
</svg>

Анимация SVG имеет три состояния:

  • По умолчанию: сердечный путь
  • Процесс: загрузка группы (тег g)
  • Конец: контрольная группа (тег g)

Чтобы стилизовать значки, откройте файл style.css и вставьте следующий код:


.wishlist-toggle {

display: block;

position: absolute;

top: 16px;

left: 16px;

z-index: 5;

width: 24px;

height: 24px;

outline: none;

border:none;

}

.wishlist-title {

display: none;

}

.entry-summary .wishlist-toggle {

position: relative;

top: 0;

left: 0;

display: inline-block;

vertical-align: middle;

margin-bottom: 8px;

}

.entry-summary .wishlist-title {

display: inline-block;

vertical-align: middle;

margin-right: 8px;

margin-bottom: 8px;

}

.wishlist-toggle:focus {

outline: none;

border:none;

}

.wishlist-toggle svg {

fill:#bdbdbd;

transition: all 200ms ease-out;

}

.wishlist-toggle:hover svg,

.wishlist-toggle.active svg {

fill:#000000;

}

.wishlist-toggle svg .loading,

.wishlist-toggle svg .check {

opacity: 0;

}

.wishlist-toggle.active svg .check {

opacity: 1;

}

.wishlist-toggle.active svg .heart {

opacity: 0;

}

.wishlist-toggle.loading svg .loading,

.wishlist-table.loading:before {

animation:loading 500ms 0ms infinite normal linear;

transform-origin: center;

opacity: 1;

}

.wishlist-toggle.loading svg .heart {

opacity:0;

}

@keyframes loading {

from {transform: rotate(0deg);}

to {transform: rotate(360deg);}

}

Мы показали сердечный путь нашего SVG. Когда пользователь щелкнет по нему, мы скроем путь сердца и покажем путь загрузки.

После загрузки мы покажем галочку, указывающую, что товар был успешно добавлен в список желаний.

Создать шорткод для таблицы желаний

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

Мы сделаем это, добавив следующий код в действие плагина инициализации:

// Wishlist table shortcode
add_shortcode('wishlist', 'wishlist');
function wishlist( $atts, $content = null ) {
    extract(shortcode_atts(array(), $atts));
     return '<table class="wishlist-table loading">
                <tr>
                    <th><!-- Left for image --></th>
                    <th>'.esc_html__("Name","text-domain").'</th>
                    <th>'.esc_html__("Price","text-domain").'</th>
                    <th>'.esc_html__("Stock","text-domain").'</th>
                    <th><!-- Left for button --></th>
                </tr>
            </table>';
 }

После этого нам нужно создать страницу списка желаний.

На панели инструментов создайте страницу под названием «Список желаний» и поместите в нее шорткод [список желаний].

Если вы откроете страницу списка желаний, вы увидите пустую таблицу.

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

.wishlist-table {

width:100%;

position: relative;

}

.wishlist-table.loading:after {

display: block;

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

content: "";

background: #ffffff;

opacity: 0.5;

z-index: 5;

}

.wishlist-table.loading:before {

display: block;

width: 24px;

height: 24px;

position: absolute;

top: 50%;

left: 50%;

margin-top:-12px;

margin-left:-12px;

content: "";

background-image: url('../images/loading.svg');

background-repeat: no-repeat;

background-size: 100%;

z-index: 6;

}

.wishlist-table td {

position: relative;

}

.wishlist-table a.details {

padding:4px 16px;

background: #000000;

color: #ffffff;

text-align: center;

border:none !important

}

.wishlist-table a.wishlist-remove {

display: block;

width: 24px;

height: 24px;

position: absolute;

top: 50%;

left: 50%;

margin-top:-12px;

margin-left:-12px;

background-image: url('../images/remove.svg');

background-repeat: no-repeat;

background-size: 100%;

z-index: 6;

border:none;

opacity:0;

}

.wishlist-table td:hover &gt; a.wishlist-remove {

opacity:1;

}

Затем добавьте изображение loading.svg в папку с изображениями:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 471.701 471.701">
    <path d="M409.6,0c-9.426,0-17.067,7.641-17.067,17.067v62.344C304.667-5.656,164.478-3.386,79.411,84.479
        c-40.09,41.409-62.455,96.818-62.344,154.454c0,9.426,7.641,17.067,17.067,17.067S51.2,248.359,51.2,238.933
        c0.021-103.682,84.088-187.717,187.771-187.696c52.657,0.01,102.888,22.135,138.442,60.976l-75.605,25.207
        c-8.954,2.979-13.799,12.652-10.82,21.606s12.652,13.799,21.606,10.82l102.4-34.133c6.99-2.328,11.697-8.88,11.674-16.247v-102.4
        C426.667,7.641,419.026,0,409.6,0z"/>
    <path d="M443.733,221.867c-9.426,0-17.067,7.641-17.067,17.067c-0.021,103.682-84.088,187.717-187.771,187.696
        c-52.657-0.01-102.888-22.135-138.442-60.976l75.605-25.207c8.954-2.979,13.799-12.652,10.82-21.606
        c-2.979-8.954-12.652-13.799-21.606-10.82l-102.4,34.133c-6.99,2.328-11.697,8.88-11.674,16.247v102.4
        c0,9.426,7.641,17.067,17.067,17.067s17.067-7.641,17.067-17.067v-62.345c87.866,85.067,228.056,82.798,313.122-5.068
        c40.09-41.409,62.455-96.818,62.344-154.454C460.8,229.508,453.159,221.867,443.733,221.867z"/>
</svg>

Настраиваемая опция списка желаний в профиле пользователя

Добавьте следующий код в действие инициализации:

// Wishlist option in the user profile
add_action( 'show_user_profile', 'wishlist_user_profile_field' );
add_action( 'edit_user_profile', 'wishlist_user_profile_field' );
function wishlist_user_profile_field( $user ) { ?>
    <table class="form-table wishlist-data">
        <tr>
            <th><?php echo esc_attr__("Wishlist","text-domain"); ?></th>
            <td>
                <input type="text" name="wishlist" id="wishlist" value="<?php echo esc_attr( get_the_author_meta( 'wishlist', $user->ID ) ); ?>" class="regular-text" />
            </td>
        </tr>
    </table>
<?php }
 add_action( 'personal_options_update', 'save_wishlist_user_profile_field' );
add_action( 'edit_user_profile_update', 'save_wishlist_user_profile_field' );
function save_wishlist_user_profile_field( $user_id ) {
    if ( !current_user_can( 'edit_user', $user_id ) ) {
        return false;
    }
    update_user_meta( $user_id, 'wishlist', $_POST['wishlist'] );
}

Включите это

Теперь, когда мы добавили важные разделы, мы готовы включить его.

Откройте файл main.js и поместите в него следующий код:

(function($){

"use strict";

})(jQuery);

Следующим шагом будет сбор необходимых данных и создание некоторых переменных:

var shopName   = opt.shopName+'-wishlist',

inWishlist = opt.inWishlist,

restUrl    = opt.restUrl,

wishlist   = new Array,

ls         = sessionStorage.getItem(shopName),

loggedIn   = ($('body').hasClass('logged-in')) ? true : false,

userData   = '';

Если пользователь вошел в систему:

  • Получить текущие пользовательские данные с помощью AJAX
  • В случае успеха обновите список желаний
  • Выделите элементы списка желаний
  • Удалить сеанс/локальное хранилище
  • В случае сбоя показать сообщение об ошибке в консоли для разработчика
if(loggedIn) {
    // Fetch current user data
    $.ajax({
        type: 'POST',
        url: opt.ajaxUrl,
        data: {
            'action' : 'fetch_user_data',
            'dataType': 'json'
        },
        success:function(data) {
            userData = JSON.parse(data);
            if (typeof(userData['wishlist']) != 'undefined' && userData['wishlist'] != null && userData['wishlist'] != "") {
                 var userWishlist = userData['wishlist'];
                userWishlist = userWishlist.split(',');
                 if (wishlist.length) {
                    wishlist =  wishlist.concat(userWishlist);
                     $.ajax({
                        type: 'POST',
                        url:opt.ajaxPost,
                        data:{
                            action:'user_wishlist_update',
                            user_id :userData['user_id'],
                            wishlist :wishlist.join(','),
                        }
                    });
                 } else {
                    wishlist =  userWishlist;
                }
                wishlist = wishlist.unique();
                 highlightWishlist(wishlist,inWishlist);
                sessionStorage.removeItem(shopName);
             } else {
                if (typeof(ls) != 'undefined' && ls != null) {
                    ls = ls.split(',');
                    ls = ls.unique();
                    wishlist = ls;
                }
                 $.ajax({
                    type: 'POST',
                    url:opt.ajaxPost,
                    data:{
                        action:'user_wishlist_update',
                        user_id :userData['user_id'],
                        wishlist :wishlist.join(','),
                    }
                })
                .done(function(response) {
                    highlightWishlist(wishlist,inWishlist);
                    sessionStorage.removeItem(shopName);
                });
            }
        },
        error: function(){
            console.log('No user data returned');
        }
    });
}

Если пользователь является гостем, мы извлекаем список пожеланий из сеанса/локального хранилища.

else {
    if (typeof(ls) != 'undefined' && ls != null) {
        ls = ls.split(',');
        ls = ls.unique();
        wishlist = ls;
    }
}

Теперь у нас есть двойной AJAX и несколько вспомогательных функций.

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

// Get current user data
function fetch_user_data() {
    if (is_user_logged_in()){
        $current_user = wp_get_current_user();
        $current_user_wishlist = get_user_meta( $current_user->ID, 'wishlist',true);
        echo json_encode(array('user_id' => $current_user->ID,'wishlist' => $current_user_wishlist));
    }
    die();
}
add_action( 'wp_ajax_fetch_user_data', 'fetch_user_data' );
add_action( 'wp_ajax_nopriv_fetch_user_data', 'fetch_user_data' );

Следующий запрос AJAX обновляет список пожеланий пользователя, если уже были элементы списка пожеланий из сеанса/локального хранилища:

ffunction update_wishlist_ajax(){
    if (isset($_POST["user_id"]) && !empty($_POST["user_id"])) {
        $user_id   = $_POST["user_id"];
        $user_obj = get_user_by('id', $user_id);
        if (!is_wp_error($user_obj) && is_object($user_obj)) {
            update_user_meta( $user_id, 'wishlist', $_POST["wishlist"]);
        }
    }
    die();
}
add_action('admin_post_nopriv_user_wishlist_update', 'update_wishlist_ajax');
add_action('admin_post_user_wishlist_update', 'update_wishlist_ajax');

Вспомогательные функции

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

Array.prototype.unique = function() {
  return this.filter(function (value, index, self) {
    return self.indexOf(value) === index;
  });
}
 function isInArray(value, array) {return array.indexOf(value) > -1;}
 function onWishlistComplete(target, title){
    setTimeout(function(){
        target
        .removeClass('loading')
        .addClass('active')
        .attr('title',title);
    },800);
}
function highlightWishlist(wishlist,title){
    $('.wishlist-toggle').each(function(){
        var $this = $(this);
        var currentProduct = $this.data('product');
        currentProduct = currentProduct.toString();
        if (isInArray(currentProduct,wishlist)) {
            $this.addClass('active').attr('title',title);
        }
    });
}

Первая вспомогательная функция делает массив уникальным, удаляя дубликаты.

С другой стороны, второй проверяет, присутствует ли данное значение в данном массиве.

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

Добавить переключатель

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

Если вы перейдете на страницу магазина, обновите браузер и щелкнете по любому переключателю списка желаний, вы увидите, что он работает!

$('.wishlist-toggle').each(function(){
     var $this = $(this);
     var currentProduct = $this.data('product');
     currentProduct = currentProduct.toString();
     if (!loggedIn && isInArray(currentProduct,wishlist)) {
        $this.addClass('active').attr('title',inWishlist);
    }
     $(this).on('click',function(e){
        e.preventDefault();
        if (!$this.hasClass('active') && !$this.hasClass('loading')) {
             $this.addClass('loading');
             wishlist.push(currentProduct);
            wishlist = wishlist.unique();
             if (loggedIn) {
                // get user ID
                if (userData['user_id']) {
                    $.ajax({
                        type: 'POST',
                        url:opt.ajaxPost,
                        data:{
                            action:'user_wishlist_update',
                            user_id :userData['user_id'],
                            wishlist :wishlist.join(','),
                        }
                    })
                    .done(function(response) {
                        onWishlistComplete($this, inWishlist);
                    })
                    .fail(function(data) {
                        alert(opt.error);
                    });
                }
            } else {
                 sessionStorage.setItem(shopName, wishlist.toString());
                onWishlistComplete($this, inWishlist);
             }
         }
     });
});

Список элементов в таблице желаний

Добавьте следующий код в main.js в самом низу нашей функции-оболочки:

setTimeout(function(){
     if (wishlist.length) {
         restUrl += '?include='+wishlist.join(',');
        restUrl += '&per_page='+wishlist.length;
         $.ajax({
            dataType: 'json',
            url:restUrl
        })
        .done(function(response){
            $('.wishlist-table').each(function(){
                var $this = $(this);
                $.each(response,function(index,object){
                    $this.append('<tr data-product="'+object.id+'"><td><a class="wishlist-remove" href="#" title="'+opt.removeWishlist+'"></a>'+object.image+'</td><td>'+object.title["rendered"]+'</td><td>'+object.price+'</td><td>'+object.stock+'</td><td><a class="details" href="'+object.link+'">'+opt.buttonText+'</a></td></tr>');
                });
            });
        })
        .fail(function(response){
            alert(opt.noWishlist);
        })
        .always(function(response){
            $('.wishlist-table').each(function(){
                $(this).removeClass('loading');
            });
        });
     } else {
        $('.wishlist-table').each(function(){
            $(this).removeClass('loading');
        });
    }
 },1000);

Здесь у нас есть два варианта REST API:

  • используя WordPress REST API
  • с помощью REST API WooCommerce.

Перейдите в основной файл плагина и в самый низ добавьте следующий код:

// Extend REST API
function rest_register_fields(){
     register_rest_field('product',
        'price',
        array(
            'get_callback'    => 'rest_price',
            'update_callback' => null,
            'schema'          => null
        )
    );
     register_rest_field('product',
        'stock',
        array(
            'get_callback'    => 'rest_stock',
            'update_callback' => null,
            'schema'          => null
        )
    );
     register_rest_field('product',
        'image',
        array(
            'get_callback'    => 'rest_img',
            'update_callback' => null,
            'schema'          => null
        )
    );
}
add_action('rest_api_init','rest_register_fields');
 function rest_price($object,$field_name,$request){
     global $product;
     $id = $product->get_id();
     if ($id == $object['id']) {
        return $product->get_price();
    }
 }
 function rest_stock($object,$field_name,$request){
     global $product;
     $id = $product->get_id();
     if ($id == $object['id']) {
        return $product->get_stock_status();
    }
 }
 function rest_img($object,$field_name,$request){
     global $product;
     $id = $product->get_id();
     if ($id == $object['id']) {
        return $product->get_image();
    }
 }
 function maximum_api_filter($query_params) {
    $query_params['per_page']["maximum"]=100;
    return $query_params;
}
add_filter('rest_product_collection_params', 'maximum_api_filter');

Удаление товаров из списка желаний

Добавьте следующий код в самый низ функции-оболочки в файле main.js:

$(document).on('click', '.wishlist-remove', function(){
     var $this = $(this);
     $this.closest('table').addClass('loading');
     wishlist = [];
     $this.closest('table').find('tr').each(function(){
         if ($(this).data('product') != $this.closest('tr').data('product')) {
             wishlist.push($(this).data('product'));
             if (loggedIn) {
                 // get user ID
                if (userData['user_id']) {
                    $.ajax({
                        type: 'POST',
                        url:opt.ajaxPost,
                        data:{
                            action:'user_wishlist_update',
                            user_id :userData['user_id'],
                            wishlist :wishlist.join(','),
                        }
                    })
                    .done(function(response) {
                        $this.closest('table').removeClass('loading');
                        $this.closest('tr').remove();
                    })
                    .fail(function(data) {
                        alert(opt.error);
                    });
                }
            } else {
                sessionStorage.setItem(shopName, wishlist.toString());
                setTimeout(function(){
                    $this.closest('table').removeClass('loading');
                    $this.closest('tr').remove();
                },500);
            }
        }
     });
 });

Это результат: список желаний

Вывод

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

Похожие статьи

  1. Перенаправление WooCommerce после выхода из системы [Полное руководство]
  2. Перенаправление WooCommerce после оформления заказа: перенаправление на пользовательскую страницу благодарности
  3. Как получить описание продукта и отобразить WooCommerce