Jak dodać listę życzeń w WooCommerce

Opublikowany: 2021-04-22

Jak dodać listę życzeń w WooCommerce Chcesz dodać listę życzeń w WooCommerce? Należy zauważyć, że WooCommerce nie ma funkcji listy życzeń. Pozwala użytkownikom oznaczać określone produkty, dodając je do listy do wykorzystania w przyszłości.

Popularne sklepy, takie jak Amazon, umożliwiają kupującym online tworzenie wielu list życzeń.

Jak dodać listę życzeń w WooCommerce

W tym samouczku stworzymy funkcjonalność listy życzeń dla WooCommerce. Użyjemy AJAX, WordPress REST API i grafiki SVG.

Pod koniec postu będziesz mógł stworzyć wtyczkę listy życzeń.

Zobaczmy, jak możesz to osiągnąć.

Tworzenie wtyczki listy życzeń

Najpierw musimy stworzyć strukturę wtyczki.

Utwórz folder o nazwie „lista życzeń” i plik PHP o tej samej nazwie.

Następnie dodaj następujący fragment do pliku PHP:


/*

Plugin Name: Woocommerce wishlist

Description: Ajax wishlist for WooCommerce

Author: Njengah

Version: 1.0

*/

if ( ! defined( 'ABSPATH' ) ) {

exit; // Exit if accessed directly

}

Dodawanie struktury

Teraz nadszedł czas na dodanie funkcji. Oto, co zamierzamy zrobić:

  • Dodaj przełącznik listy życzeń do produktów w pętli i pojedynczych stronach za pomocą haków WooCommerce
  • Utwórz krótki kod tabeli życzeń, aby przechowywać produkty dodane do listy życzeń
  • Utwórz niestandardową opcję listy życzeń w profilu użytkownika

Ważne jest, aby pamiętać, że cały kod wtyczki zostanie umieszczony wewnątrz akcji init dla wtyczki.

Zanim zaczniemy, musimy upewnić się, że wtyczka WooCommerce jest aktywna. Po szczegółach wtyczki dodaj następujący kod:


add_action('init','plugin_init');

function plugin_init(){

if (class_exists("Woocommerce")) {

// Plugin code starts here

}

}

Następnym krokiem jest kolejkowanie naszych skryptów i stylów wtyczek poprzez dodanie następującego kodu do głównego pliku wtyczki: 

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' );

W tej sekcji kodu umieszczamy w kolejce główny plik style.css i plik main.js dla wtyczki. Przekazaliśmy również kilka parametrów do pliku main.js do pracy z:

  • ajaxUrl
  • ajaxPost
  • restUrl
  • Nazwa sklepu

Po dodaniu kodu utwórz folder css i js i umieść odpowiednie pliki w tych folderach: style.css w folderze css i main.js w folderze js.

Zaczep listę życzeń

Aby podłączyć przełącznik listy życzeń , dodaj następujący kod wewnątrz akcji init: 


// 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>';
}

Powyższy kod dodaje przełącznik listy życzeń do każdego produktu w pętli i do każdego układu produktu. Wykorzystaliśmy haki woocommerce_before_shop_loop_item_title i woocommerce_single_product_summary.

Dodaj ikony SVG

Następnym krokiem jest dodanie ikon SVG .

Utwórz folder obrazów w folderze wtyczek i umieść w nim następujący 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>

Animacja SVG ma trzy stany:

  • Domyślnie: ścieżka serca
  • Proces: ładowanie grupy (tag g)
  • Koniec: zaznacz grupę (tag g)

Aby nadać styl ikonom, otwórz plik style.css i wklej następujący kod:


.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);}

}

Pokazaliśmy ścieżkę serca naszego SVG. Gdy użytkownik na nią kliknie, ukryjemy ścieżkę serca i pokażemy ścieżkę ładowania.

Po załadowaniu pokażemy znacznik wyboru wskazujący, że produkt został pomyślnie dodany do listy życzeń.

Utwórz skrót do tabeli życzeń

Teraz musimy utworzyć shortcode tabeli Lista życzeń . Możesz dodać ten krótki kod do dowolnej strony, a elementy listy życzeń pojawią się na niej.

Zrobimy to, dodając następujący kod w akcji wtyczki init: 

// 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>';
 }

Następnie musimy stworzyć stronę listy życzeń.

Z pulpitu nawigacyjnego utwórz stronę o nazwie „Lista życzeń” i umieść w niej krótki kod [listy życzeń].

Jeśli otworzysz stronę listy życzeń, zobaczysz pustą tabelę.

Następnym krokiem jest stylizacja elementów listy życzeń. Aby to osiągnąć, otwórz style.css i dodaj następujący kod: 

.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;

}

Następnie dodaj obraz loading.svg do folderu images: 

<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>

Niestandardowa opcja listy życzeń w profilu użytkownika

Dodaj następujący kod do akcji init: 

// 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'] );
}

Moc to

Teraz, gdy dodaliśmy ważne sekcje, jesteśmy gotowi, aby go włączyć.

Otwórz plik main.js i umieść w nim następujący kod: 

(function($){

"use strict";

})(jQuery);

Następnym krokiem jest zebranie wymaganych danych i utworzenie kilku zmiennych: 

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   = '';

Jeśli użytkownik jest zalogowany:

  • Pobierz aktualne dane użytkownika za pomocą AJAX
  • Jeśli się powiedzie, zaktualizuj listę życzeń
  • Zaznacz pozycje na liście życzeń
  • Usuń sesję/pamięć lokalną
  • W przypadku niepowodzenia pokaż komunikat o błędzie w konsoli dla programisty 
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');
        }
    });
}

Jeśli Użytkownik jest Gość, pobieramy listę życzeń z sesji/lokalnej pamięci 

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

Teraz mamy podwójny AJAX i kilka funkcji pomocniczych.

Pierwsze żądanie AJAX pobiera identyfikator użytkownika i dane listy życzeń użytkownika z WordPressa. Możesz to osiągnąć za pomocą niestandardowej akcji AJAX dodanej do pliku z kodem wtyczki: 

// 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' );

Następne żądanie AJAX aktualizuje listę życzeń użytkownika, jeśli istnieją już elementy listy życzeń z sesji/pamięci lokalnej: 

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');

Funkcje pomocnicze

Zanim przejdziemy do części poświęconej wydarzeniom, dowiedzmy się więcej o naszych funkcjach pomocniczych 

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);
        }
    });
}

Pierwsza funkcja pomocnicza sprawia, że ​​tablica jest unikalna, usuwając duplikaty.

Natomiast drugi sprawdza, czy dana wartość występuje w danej tablicy.

Ostatnia funkcja jest wykonywana, gdy pozycja jest dodawana do listy życzeń, a ostatnia pokazuje pozycje, które są na liście życzeń.

Dodaj przełącznik

Następnym krokiem jest dodanie zdarzenia kliknięcia do przełącznika listy życzeń, aby zapewnić faktyczną funkcjonalność.

Jeśli wejdziesz na stronę sklepu, odśwież przeglądarkę i kliknij dowolny przełącznik listy życzeń, zobaczysz, że działa! 

$('.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);
             }
         }
     });
});

Lista pozycji w tabeli życzeń

Dodaj następujący kod do main.js na samym dole naszej funkcji opakowującej: 

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);

Tutaj mamy dwie opcje dla REST API:

  • za pomocą WordPress REST API
  • za pomocą WooCommerce REST API.

Przejdź do głównego pliku wtyczki i na samym dole dodaj następujący kod: 

// 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');

Usuwanie pozycji z listy życzeń

Dodaj następujący kod na samym dole funkcji opakowującej w pliku 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);
            }
        }
     });
 });

Oto wynik: lista życzeń

Wniosek

W tym samouczku stworzyliśmy niestandardową wtyczkę do dodawania listy życzeń w WooCommerce. Mamy nadzieję, że ten post pomógł Ci dodać funkcjonalność listy życzeń do Twojego sklepu.

Podobne artykuły

  1. Przekierowanie WooCommerce po wylogowaniu [Najlepszy przewodnik]
  2. Przekierowanie WooCommerce po realizacji transakcji: Przekierowanie na niestandardową stronę z podziękowaniami
  3. Kompletny przewodnik po korzystaniu z niestandardowych hooków WordPressa do_action i apply_filters z przykładem
  4. Jak naprawić błąd Uncaught TypeError: wp.template nie jest funkcją
  5. Jak przekierować użytkownika, jeśli nie jest zalogowany w WordPressie » Przekierowanie strony
  6. Jak dodać pole wyszukiwania na górze motywu witryny Storefront?
  7. Jak uzyskać aktualną nazwę kategorii produktu w WooCommerce?
  8. Jak ukryć etykietę podatkową w WooCommerce
  9. Jak sprawdzić, czy użytkownik jest zalogowany w WordPress
  10. Jak programowo tworzyć produkt WooCommerce
  11. Jak uzyskać opis i wyświetlanie produktu WooCommerce?
  12. Jak wyłączyć wysyłkę według kategorii w WooCommerce?
  13. Jak uzyskać adres URL kasy w WooCommerce?
  14. Jak zmienić symbol waluty w WooCommerce?
  15. Jak utworzyć przycisk Dodaj do koszyka WooCommerce według identyfikatora produktu
  16. Jak stworzyć własną stronę sklepu WooCommerce?
  17. Jak skonfigurować blog WooCommerce Storefront
  18. 40+ najlepszych wtyczek do formularzy kontaktowych WordPress dla łatwego kontaktu
  19. 30+ najlepszych wtyczek do komentarzy dla WordPressa, aby zwiększyć zaangażowanie
  20. Jak dodać pola w formularzu rejestracyjnym WooCommerce?
  21. Jak dodać ikony mediów społecznościowych do motywu Footer Storefront?
  22. Jak wysłać do Mpesa WooCommerce płatność za darmo?
  23. Jak skonfigurować Mega Menu WooCommerce Storefront
  24. 5+ najlepszych przykładów sklepów WooCommerce
  25. Jak programowo dodać produkt do koszyka w WooCommerce?
  26. Jak uzyskać identyfikator zamówienia na stronie kasy WooCommerce?
  27. Hak przekierowania logowania WooCommerce wyjaśniony na przykładzie
  28. Jak dodać przekierowanie strony mojego konta WooCommerce?