Comment ajouter une liste de souhaits dans WooCommerce
Publié: 2021-04-22
Voulez-vous ajouter une liste de souhaits dans WooCommerce ? Il est important de noter que WooCommerce n'a pas de fonctionnalité de liste de souhaits. Il permet aux utilisateurs de marquer certains produits, en les ajoutant à une liste pour référence future.
Les magasins populaires comme Amazon permettent aux acheteurs en ligne de créer plusieurs listes de souhaits.
Comment ajouter une liste de souhaits dans WooCommerce
Dans ce tutoriel, nous allons créer une fonctionnalité de liste de souhaits pour WooCommerce. Nous utiliserons AJAX, l'API WordPress REST et les graphiques SVG.
À la fin de l'article, vous pourrez créer un plugin de liste de souhaits.
Voyons comment vous pouvez y parvenir.
Création d'un plugin de liste de souhaits
Tout d'abord, nous devons créer la structure du plugin.
Créez un dossier avec le nom "wishlist" et un fichier PHP avec le même nom.
Après cela, ajoutez l'extrait de code suivant au fichier PHP :
/*
Plugin Name: Woocommerce wishlist
Description: Ajax wishlist for WooCommerce
Author: Njengah
Version: 1.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
Ajout de la structure
Il est maintenant temps d'ajouter les fonctions. Voici ce que nous allons faire :
- Ajouter une bascule de liste de souhaits aux produits en boucle et aux pages uniques à l'aide de crochets WooCommerce
- Créer un shortcode de table de liste de souhaits pour contenir les produits ajoutés à la liste de souhaits
- Créer une option personnalisée de liste de souhaits dans le profil utilisateur
Il est important de noter que tout le code du plugin ira dans l'action init du plugin.
Avant de commencer, nous devons nous assurer que le plugin WooCommerce est actif. Après les détails du plugin, ajoutez le code suivant :
add_action('init','plugin_init');
function plugin_init(){
if (class_exists("Woocommerce")) {
// Plugin code starts here
}
}
L'étape suivante consiste à mettre en file d'attente nos scripts et styles de plug-in en ajoutant le code suivant au fichier principal du plug-in :
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' );
Dans cette section de code, nous mettons en file d'attente le fichier principal style.css et le fichier main.js pour le plugin. Nous avons également passé quelques paramètres au fichier main.js pour travailler avec :
- ajaxUrl
- ajaxPost
- restUrl
- Nom de la boutique
Après avoir ajouté le code, créez un dossier css et js et placez les fichiers correspondants dans ces dossiers : style.css dans le dossier css et main.js dans le dossier js.
Accrochez le basculement de la liste de souhaits
Pour accrocher le Wishlist Toggle , ajoutez le code suivant dans l'action 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>';
}
Le code ci-dessus ajoute une bascule de liste de souhaits à chaque produit de la boucle et à chaque mise en page de produit. Nous avons utilisé les hooks woocommerce_before_shop_loop_item_title et woocommerce_single_product_summary.
Ajouter des icônes SVG
L'étape suivante consiste à ajouter des icônes SVG .
Créez un dossier d'images dans le dossier du plugin et placez-y le fichier icon.svg suivant :
<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>
L'animation SVG a trois états :
- Par défaut : le chemin du cœur
- Processus : groupe de chargement (balise g)
- Fin : vérifier le groupe (balise g)
Pour styliser les icônes, ouvrez le fichier style.css et collez le code suivant :
.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);}
}
Nous avons montré le chemin du cœur de notre SVG. Lorsque l'utilisateur cliquera dessus, nous masquerons le chemin du cœur et afficherons le chemin de chargement.
Après le chargement, nous afficherons la coche indiquant que le produit a été ajouté avec succès à la liste de souhaits.
Créer un shortcode de table de liste de souhaits
Nous devons maintenant créer le shortcode de la table de liste de souhaits . Vous pouvez ajouter ce shortcode à n'importe quelle page, et les éléments de la liste de souhaits apparaîtront à l'intérieur.
Nous allons le faire en ajoutant le code suivant dans l'action du plugin 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>';
}
Après cela, nous devons créer une page de liste de souhaits.
Depuis le tableau de bord, créez une page appelée "Liste de souhaits" et insérez-y le shortcode [liste de souhaits].
Si vous ouvrez la page de liste de souhaits, vous verrez un tableau vide.
L'étape suivante consiste à styliser les éléments de la liste de souhaits. Pour ce faire, ouvrez le style.css et ajoutez le code suivant :
.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;
}
Ajoutez ensuite l'image loading.svg au dossier 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>
Option personnalisée de liste de souhaits dans le profil utilisateur
Ajoutez le code suivant à l'action 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'] );
}
Alimentez-le
Maintenant que nous avons ajouté les sections importantes, nous sommes prêts à l'activer.
Ouvrez le fichier main.js et insérez-y le code suivant :
(function($){
"use strict";
})(jQuery);
L'étape suivante consiste à rassembler les données requises et à créer des variables :
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 = '';
Si l'utilisateur est connecté :
- Récupérer les données utilisateur actuelles avec AJAX
- En cas de succès, mettez à jour la liste de souhaits
- Mettez en surbrillance les éléments de la liste de souhaits
- Supprimer la session/le stockage local
- En cas d'échec, afficher le message d'erreur dans la console pour le développeur
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');
}
});
}
Si l'utilisateur est invité, nous récupérons la liste de souhaits de la session/du stockage local
else {
if (typeof(ls) != 'undefined' && ls != null) {
ls = ls.split(',');
ls = ls.unique();
wishlist = ls;
}
}
Nous avons maintenant le double AJAX et quelques fonctions d'assistance.
La première requête AJAX obtient l'identifiant de l'utilisateur et les données de la liste de souhaits de l'utilisateur de WordPress. Vous pouvez y parvenir avec une action AJAX personnalisée ajoutée au fichier de code du plug-in :
// 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' );
La prochaine requête AJAX met à jour la liste de souhaits de l'utilisateur s'il y avait déjà des éléments de liste de souhaits de la session/du stockage local :
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');
Fonctions d'assistance
Avant de passer à la partie événements, apprenons-en plus sur nos fonctions d'assistance
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);
}
});
}
La première fonction d'assistance rend le tableau unique, en supprimant les doublons.
D'autre part, le second vérifie si la valeur donnée est présente dans le tableau donné.
La dernière fonction s'exécute lorsqu'un élément est ajouté à la liste de souhaits et la dernière affiche les éléments qui sont dans la liste de souhaits.
Ajouter une bascule
L'étape suivante consiste à ajouter un événement de clic à la bascule de la liste de souhaits pour alimenter la fonctionnalité réelle.
Si vous allez sur la page de la boutique, actualisez le navigateur et cliquez sur n'importe quelle bascule de la liste de souhaits, vous verrez que cela fonctionne !
$('.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);
}
}
});
});
Lister les éléments dans le tableau de souhaits
Ajoutez le code suivant dans main.js tout en bas de notre fonction wrapper :
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);
Ici, nous avons deux options pour l'API REST :
- en utilisant l'API REST de WordPress
- en utilisant l'API REST WooCommerce.
Accédez au fichier principal du plugin et tout en bas ajoutez le code suivant :
// 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');
Supprimer des articles de la liste de souhaits
Ajoutez le code suivant tout en bas de la fonction wrapper dans le fichier 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);
}
}
});
});
Voici le résultat : 
Conclusion
Dans ce tutoriel, nous avons créé un plugin personnalisé pour ajouter une liste de souhaits dans WooCommerce. Nous espérons que cet article vous a aidé à ajouter une fonctionnalité de liste de souhaits à votre boutique.
Articles similaires
- Redirection WooCommerce après la déconnexion [Guide ultime]
- Redirection WooCommerce après le paiement : redirection vers une page de remerciement personnalisée
- Guide complet d'utilisation des crochets personnalisés WordPress do_action & apply_filters avec exemple
- Comment réparer une erreur de type non interceptée : wp.template n'est pas une fonction
- Comment rediriger l'utilisateur s'il n'est pas connecté à WordPress » Redirection de page
- Comment ajouter un champ de recherche en haut de la page du thème Storefront
- Comment obtenir le nom de la catégorie de produit actuelle dans WooCommerce
- Comment masquer l'étiquette fiscale dans WooCommerce
- Comment vérifier si l'utilisateur est connecté WordPress
- Comment créer un produit par programmation WooCommerce
- Comment obtenir la description et l'affichage du produit WooCommerce
- Comment désactiver l'expédition par catégorie dans WooCommerce
- Comment obtenir l'URL de paiement dans WooCommerce
- Comment changer le symbole monétaire dans WooCommerce
- Comment créer un bouton WooCommerce Ajouter au panier par identifiant de produit
- Comment créer une page de boutique personnalisée WooCommerce
- Comment configurer le blog WooCommerce Storefront
- 40+ meilleurs plugins de formulaire de contact WordPress pour un contact facile
- 30+ meilleurs plugins de commentaires pour WordPress pour stimuler l'engagement
- Comment ajouter des champs dans le formulaire d'inscription WooCommerce
- Comment ajouter des icônes de médias sociaux au thème de la vitrine du pied de page
- Comment envoyer gratuitement un paiement à Mpesa WooCommerce
- Comment configurer le méga menu WooCommerce Storefront
- 5+ meilleurs exemples de magasins WooCommerce
- Comment ajouter un produit au panier par programmation dans WooCommerce
- Comment obtenir l'ID de commande sur la page de paiement WooCommerce
- Crochet de redirection de connexion WooCommerce expliqué avec un exemple
- Comment ajouter la redirection de la page de mon compte WooCommerce