Afficher un prix dynamiquement en fonction de la quantité saisie par l’utilisateur est un bon moyen pour rassurer sur le prix « réel » qui sera facturé. Bien souvent, le visiteur sélectionne un produit, une ou plusieurs déclinaisons/variations, détermine une quantité et place le tout au panier. L’affichage des images des variations est désormais une technologie maîtrisée par bon nombre de CMS (Prestashop encore une fois excelle en la matière), mais le calcul du prix total en fonction de la quantité est un atout majeur sur un e-commerce désirant appliquer une dégressivité.
Voici par exemple un site e-commerce dit « standard » sur lequel on peut décider de la quantité à insérer au panier :
Comme vous pouvez le voir, on ignore complètement le prix qui sera facturé au final. Cela n’incite pas beaucoup à commander en masse…
Proposer des prix unitaires inférieurs à la normale lorsque le client en commande un grand nombre est un moyen d’inciter à l’achat en masse (« 10% de réduction sur 100 produits achetés »), mais le visiteur aura certainement la flemme de sortir sa calculatrice pour connaître le montant total qu’il va payer au final. Certes il pourrait mettre le tout au panier, mais proposer un affichage dynamique est un atout à ne pas négliger lors de dégressivité. Dans le cas du site ci-dessus, je n’ai donc aucune envie d’acheter plus d’un produit, pas plus que je n’ai envie de sortir ma calculatrice.
Woocommerce, le fameux plugin de WordPress, permet d’ajouter son propre Jquery de manière à manipuler les templates aisément. D’origine, lui non plus ne permet pas de proposer un tel affichage des totaux, dégressivité incluse, mais voici une fonction Jquery qui permet non seulement de faire ce genre de calcul très simple, mais aussi de proposer une dégressivité.
Conformément au Codex de WordPress, il faut donc ajouter ces lignes à votre fichier functions.php :
function my_scripts_method() {
wp_enqueue_script(
'custom_pricing',
get_stylesheet_directory_uri() . '/chemin/vers/mon_fichier.js',
array('jquery')
);
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
Ceci ajoute tout simplement un nouveau fichier Jquery à votre thème. Il nous faudra au préalable ajouter cette petite div sur la page produit pour afficher les totaux :
function my_custom_span(){
echo '
‘;
}
add_action( ‘woocommerce_single_product_summary’, ‘my_custom_span’, 30 );
add_action( ‘woocommerce_simple_add_to_cart’, ‘my_custom_span’, 30 );
add_action( ‘woocommerce_grouped_add_to_cart’, ‘my_custom_span’, 30 );
add_action( ‘woocommerce_variable_add_to_cart’, ‘my_custom_span’, 30 );
add_action( ‘woocommerce_external_add_to_cart’, ‘my_custom_span’, 30 );
On a donc à présent un lien vers un fichier Jquery personnalisé, et une div pour accueillir le résultat de notre code. Nous n’avons plus qu’à nous occuper de ce fichier « custom ». Dans le cas présent, il y a deux types d’attributs sur les produits : taille et couleur.
$j=jQuery.noConflict();//Pas de conflit !
$j(document).ready(function(){
function calculate_price(){//Et c'est Darty mon kiki !
if ($j('.single_variation .price .amount').length) {
var m = $j('.single_variation .price .amount').text();
var n = m.replace("€", "");//Récupération du contenu de la balise meta itemprop=price
var my_price = parseFloat(n.replace(",", "."));//Variabilisation et mise en numérique du prix récupéré
} else {
var m = $j("meta[ itemprop=price]");//Enregistrement de la balise meta itemprop=price
var n = m.attr("content");//Récupération du contenu de la balise meta itemprop=price
var my_price = parseFloat(n);//Variabilisation et mise en numérique du prix récupéré
}
var qty_prod = $j(".qty").val(); //Détection et variabilisation de la valeur de la quantité saisie
var real_qty = parseFloat(qty_prod); //Mise en numérique de la variable
var the_datas = $j(".variations_form").data("product_variations");//Enregistrement des datas product_variations depuis les balises html5, au cas où
var real_total = my_price * qty_prod;//Calcul du prix total de base : prix unitaire multiplié par quantité (comme chez McDo)
var total_to_pay = parseFloat(real_total);//Mise en numérique du prix total de base (stoi le parseFloat, ouais !)
$j(".qty").attr("max", 99999999999999);//Modification de la quantité max autorisée (bug woocommerce suite à l'ajout de custom_pricing.js, ou comment demander à l'aide sur un tuto :-D)
if (qty_prod < = 50){//Calcul du prix si quantité saisie inférieure ou égale à 50 $j("#price_me").html("Le prix est de " + total_to_pay.toFixed(2) + " euros pour la sélection");//Aucune dégressivité, blocage des décimales à 2 } else if (qty_prod > 50){//Calcul du prix si quantité saisie supérieure à 50
total_to_pay = total_to_pay - (total_to_pay * 15 / 100);//Le prix total de base prend 15% de réduction (il est loin mon Bac L...)
$j("#price_me").html("Le prix est de " + total_to_pay.toFixed(2) + " euros pour la sélection");//Prix total mis à jour par la ligne au-dessus, blocage des décimales à 2
} else{//Cas de figure non pris en compte, genre si un petit rigolo met une valeur inférieure à zéro
$j("#price_me").html("Le prix est de " + total_to_pay.toFixed(2) + " euros pour la sélection");//Prix total de base par défaut, petits malins !
}
}
calculate_price();//Lancement de la fonction au chargement de la page
$j(".qty").change(calculate_price);//Lancement de la fonction calculate_price lorsque la quantité saisie change
$j("#pa_couleur, #pa_taille").blur(calculate_price);//Lancement de la fonction calculate_price lorsque l'attribut couleur change de valeur
});
Bon.. Il est évident que j’ai encore à apprendre du Jquery, mais le résultat fonctionne sans aucun conflit, quoiqu’il arrive ! Voici en image ce que cela donne :
Avec par-dessus le marché les « data » récupérés, il est donc possible de repréciser la sélection qui a été effectuée par le client, dans le genre « Le prix est de xxx € pour la sélection suivante : couleur : xxx, taile xxx, quantité choisie : xxx ». Les datas de Woocommerce contiennent plus d’informations que vous-même en avez besoin !
Il n’y a aucun rechargement de la page ! C’est pour des raisons similaires que j’adore Jquery, avec la simplicité que l’on peut avoir à l’utiliser. Un vrai bonheur !
Une bonne idée à mettre en place derrière est d’ajouter après l’ajout au panier une petite phrase prévenant le visiteur du montant à atteindre pour obtenir une nouvelle dégressivité, ou des frais de port gratuits.
Au final, Woocommerce couplé à un WordPress correctement monté commence à devenir une arme redoutable pour le e-commerce… et comme d’hab’ je finirais par :
Vous aimeriez préciser de la dégressivité sur vos produits ? Je dispose d’un plugin de dégressivité pour Woocommerce, jetez-y un oeil !
Imprimer
Laisser un commentaire