So fügen Sie eine Wunschliste in WooCommerce hinzu
Veröffentlicht: 2021-04-22
Möchten Sie eine Wunschliste in WooCommerce hinzufügen? Es ist wichtig zu beachten, dass WooCommerce keine Wishlist-Funktionalität hat. Es ermöglicht Benutzern, bestimmte Produkte zu markieren und sie zu einer Liste hinzuzufügen, um später darauf zurückgreifen zu können.
Beliebte Geschäfte wie Amazon ermöglichen es Online-Käufern, mehrere Wunschlisten zu erstellen.
So fügen Sie eine Wunschliste in WooCommerce hinzu
In diesem Tutorial erstellen wir eine Wunschlistenfunktion für WooCommerce. Wir werden AJAX, WordPress REST API und SVG-Grafiken verwenden.
Am Ende des Beitrags können Sie ein Wunschlisten-Plugin erstellen.
Lassen Sie uns sehen, wie Sie dies erreichen können.
Erstellen eines Wishlist-Plugins
Zuerst müssen wir die Plugin-Struktur erstellen.
Erstellen Sie einen Ordner mit dem Namen „Wunschliste“ und eine PHP-Datei mit demselben Namen.
Fügen Sie danach das folgende Snippet zur PHP-Datei hinzu:
/*
Plugin Name: Woocommerce wishlist
Description: Ajax wishlist for WooCommerce
Author: Njengah
Version: 1.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
Hinzufügen der Struktur
Jetzt ist es an der Zeit, die Funktionen hinzuzufügen. Hier ist, was wir tun werden:
- Fügen Sie mithilfe von WooCommerce-Hooks den Wunschlistenschalter zu Produkten in Schleifen und einzelnen Seiten hinzu
- Erstellen Sie einen Kurzcode für die Wunschliste, um die Produkte zu speichern, die der Wunschliste hinzugefügt wurden
- Erstellen Sie eine benutzerdefinierte Wunschliste im Benutzerprofil
Es ist wichtig zu beachten, dass der gesamte Plugin-Code in die Init-Aktion für das Plugin eingefügt wird.
Bevor wir beginnen, müssen wir sicherstellen, dass das WooCommerce-Plugin aktiv ist. Fügen Sie nach den Plugin-Details den folgenden Code hinzu:
add_action('init','plugin_init');
function plugin_init(){
if (class_exists("Woocommerce")) {
// Plugin code starts here
}
}
Der nächste Schritt besteht darin, unsere Plug-in-Skripte und -Stile einzureihen, indem Sie den folgenden Code zur Haupt-Plug-in-Datei hinzufügen:
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' );
In diesem Codeabschnitt stellen wir die Hauptdatei style.css und die Datei main.js für das Plug-in in die Warteschlange. Wir haben auch einige Parameter an die main.js-Datei übergeben, um damit zu arbeiten:
- ajaxUrl
- ajaxPost
- restUrl
- Laden Name
Erstellen Sie nach dem Hinzufügen des Codes einen css- und js-Ordner und legen Sie die entsprechenden Dateien in diesen Ordnern ab: style.css im css-Ordner und main.js im js-Ordner.
Haken Sie den Wishlist Toggle ein
Um den Wishlist Toggle einzuhaken , fügen Sie den folgenden Code in die Init-Aktion ein:
// 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>';
}
Der obige Code fügt jedem Produkt in der Schleife und jedem einzelnen Produktlayout einen Wunschlistenschalter hinzu. Wir haben die Hooks woocommerce_before_shop_loop_item_title und woocommerce_single_product_summary verwendet.
Fügen Sie SVG-Symbole hinzu
Der nächste Schritt besteht darin, SVG-Symbole hinzuzufügen .
Erstellen Sie einen Bilderordner im Plugin-Ordner und legen Sie die folgende icon.svg darin ab:
<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>
Die SVG-Animation hat drei Zustände:
- Standard: der Herzpfad
- Prozess: Ladegruppe (g-Tag)
- Ende: Gruppe prüfen (g-Tag)
Um die Symbole zu formatieren, öffnen Sie die Datei style.css und fügen Sie den folgenden Code ein:
.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);}
}
Wir haben den Herzpfad unserer SVG gezeigt. Wenn der Benutzer darauf klickt, werden wir den Herzpfad ausblenden und den Ladepfad anzeigen.
Nach dem Laden zeigen wir das Häkchen an, das anzeigt, dass das Produkt erfolgreich zur Wunschliste hinzugefügt wurde.
Shortcode für Wunschliste erstellen
Jetzt müssen wir den Shortcode für die Wishlist-Tabelle erstellen. Sie können diesen Shortcode zu jeder Seite hinzufügen, und die Artikel der Wunschliste werden darin angezeigt.
Wir tun dies, indem wir den folgenden Code in die Init-Plugin-Aktion einfügen:
// 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>';
}
Danach müssen wir eine Wunschliste erstellen.
Erstellen Sie im Dashboard eine Seite mit dem Namen „Wunschliste“ und fügen Sie den Shortcode [Wunschliste] darin ein.
Wenn Sie die Wunschliste öffnen, sehen Sie einen leeren Tisch.
Der nächste Schritt besteht darin, die Artikel der Wunschliste zu stylen. Öffnen Sie dazu die style.css und fügen Sie den folgenden Code hinzu:
.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 > a.wishlist-remove {
opacity:1;
}
Fügen Sie dann das Bild loading.svg zum Ordner images hinzu:
<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>
Benutzerdefinierte Wunschliste im Benutzerprofil
Fügen Sie der Init-Aktion den folgenden Code hinzu:
// 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'] );
}
Schalten Sie es ein
Nachdem wir die wichtigen Abschnitte hinzugefügt haben, können wir sie einschalten.
Öffnen Sie die Datei main.js und fügen Sie den folgenden Code ein:
(function($){
"use strict";
})(jQuery);
Der nächste Schritt besteht darin, die erforderlichen Daten zu sammeln und einige Variablen zu erstellen:
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 = '';
Wenn der Benutzer angemeldet ist:
- Aktuelle Benutzerdaten mit AJAX abrufen
- Bei Erfolg die Wunschliste aktualisieren
- Markieren Sie die Artikel auf der Wunschliste
- Entfernen Sie die Sitzung/den lokalen Speicher
- Wenn dies fehlschlägt, wird eine Fehlermeldung in der Konsole für den Entwickler angezeigt
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');
}
});
}
Wenn der Benutzer Gast ist, holen wir die Wunschliste aus der Sitzung/dem lokalen Speicher
else {
if (typeof(ls) != 'undefined' && ls != null) {
ls = ls.split(',');
ls = ls.unique();
wishlist = ls;
}
}
Jetzt haben wir Double-AJAX und einige Hilfsfunktionen.
Die erste AJAX-Anfrage ruft die Benutzer-ID und die Benutzer-Wunschlistendaten von WordPress ab. Sie können dies mit einer benutzerdefinierten AJAX-Aktion erreichen, die der Plugin-Codedatei hinzugefügt wird:
// 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' );
Die nächste AJAX-Anfrage aktualisiert die Wunschliste des Benutzers, wenn es bereits Wunschlistenelemente aus der Sitzung/dem lokalen Speicher gab:
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');
Hilfsfunktionen
Bevor wir zum Ereignisteil gehen, lassen Sie uns mehr über unsere Hilfsfunktionen erfahren
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);
}
});
}
Die erste Hilfsfunktion macht das Array eindeutig, indem Duplikate entfernt werden.
Andererseits prüft der zweite, ob der angegebene Wert im angegebenen Array vorhanden ist.
Die letzte Funktion wird ausgeführt, wenn ein Artikel zur Wunschliste hinzugefügt wird, und die letzte zeigt Artikel an, die sich auf der Wunschliste befinden.
Umschalter hinzufügen
Der nächste Schritt besteht darin, dem Wunschlisten-Umschalter ein Klickereignis hinzuzufügen, um die eigentliche Funktionalität zu aktivieren.
Wenn Sie zur Shop-Seite gehen, aktualisieren Sie den Browser und klicken Sie auf einen beliebigen Wunschlisten-Schalter, Sie werden sehen, dass es funktioniert!
$('.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);
}
}
});
});
Listen Sie Artikel in der Wunschliste auf
Fügen Sie ganz unten in unserer Wrapper-Funktion den folgenden Code in main.js ein:
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);
Hier haben wir zwei Optionen für die REST-API:
- mit der WordPress-REST-API
- mit der WooCommerce-REST-API.
Gehen Sie zur Haupt-Plugin-Datei und fügen Sie ganz unten den folgenden Code hinzu:
// 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');
Entfernen von Artikeln von der Wunschliste
Fügen Sie den folgenden Code ganz unten in der Wrapper-Funktion in der Datei main.js hinzu:
$(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);
}
}
});
});
Das ist das Ergebnis: 
Fazit
In diesem Tutorial haben wir ein benutzerdefiniertes Plugin erstellt, um eine Wunschliste in WooCommerce hinzuzufügen. Wir hoffen, dass dieser Beitrag Ihnen geholfen hat, Ihrem Shop eine Wunschlistenfunktion hinzuzufügen.
Ähnliche Artikel
- WooCommerce-Weiterleitung nach Abmeldung [Ultimate Guide]
- WooCommerce-Weiterleitung nach dem Checkout: Weiterleitung zur benutzerdefinierten Dankesseite
- Vollständige Anleitung zur Verwendung von benutzerdefinierten WordPress-Hooks do_action & apply_filters mit Beispiel
- So beheben Sie nicht erfassten TypeError: wp.template ist keine Funktion
- So leiten Sie Benutzer um, wenn sie nicht in WordPress angemeldet sind » Seitenumleitung
- So fügen Sie ein Suchfeld oben auf der Storefront-Theme hinzu
- So erhalten Sie den aktuellen Produktkategorienamen in WooCommerce
- So verstecken Sie das Steueretikett in WooCommerce
- So überprüfen Sie, ob der Benutzer in WordPress angemeldet ist
- So erstellen Sie Produkte programmgesteuert mit WooCommerce
- So erhalten Sie eine Produktbeschreibung und zeigen WooCommerce an
- So deaktivieren Sie den Versand nach Kategorie in WooCommerce
- So erhalten Sie die Checkout-URL in WooCommerce
- So ändern Sie das Währungssymbol in WooCommerce
- So erstellen Sie die WooCommerce-Schaltfläche „In den Warenkorb“ nach Produkt-ID
- So erstellen Sie eine benutzerdefinierte WooCommerce-Shop-Seite
- So richten Sie den WooCommerce Storefront-Blog ein
- Über 40 der besten WordPress-Kontaktformular-Plugins für einfachen Kontakt
- 30+ bestes Kommentar-Plugin für WordPress zur Steigerung des Engagements
- So fügen Sie Felder im WooCommerce-Registrierungsformular hinzu
- So fügen Sie Social Media-Symbole zum Footer Storefront Theme hinzu
- So senden Sie kostenlos an Mpesa WooCommerce Payment
- So richten Sie das WooCommerce Storefront Mega-Menü ein
- 5+ Beispiele für die besten WooCommerce-Shops
- So fügen Sie das Produkt in WooCommerce programmgesteuert zum Warenkorb hinzu
- So erhalten Sie eine Bestell-ID auf der Checkout-Seite WooCommerce
- WooCommerce Login Redirect Hook mit Beispiel erklärt
- So fügen Sie eine WooCommerce-Umleitung für die Seite „Mein Konto“ hinzu