Bon.Je viens de me souvenir que j’ai un blog et que ce dernier a besoin d’être alimenté. Mon dernier article remonte à belle lurette : toutes les aventures technologiques que j’ai eu la chance d’avoir depuis lors me fourniront assez de contenu pour alimenter ce blog, du moins jusqu’à la fin de l’année (Par exemple, j’expliquerais, dans les jours à venir, comment après être passé par la case Huawei P30 Lite, puis P30 Pro, je suis revenu mes premiers amours en matière de SmartPhone – la gamme camon de Tecno, pour avoir la paix de l’esprit, de bonnes photos, éviter le cauchemar des accessoires pour le P30 pro mais surtout avoir la garantie d’un service après vente.).
Mais aujourd’hui, parlons plutôt d’un sujet qui, j’en suis sûr, donne beaucoup de cheveux blancs à bon nombre de développeurs des bords de la lagune Ebrié : Les produits configurables de Magento 2 , et plus précisement l’incapacité des « color swatches » à conserver le choix des utilisateurs .
En termes plus clairs, lorsqu’un produit est proposé dans plusieurs variantes de couleurs , Magento 2 permet de visualiser ces couleurs en cliquant sur des pastilles de couleur , aussi bien sur la page des catégories que sur la fiche produit.
Toutefois, il est incapable, out of the box, de conserver le choix de l’utilisateur lorsque ce dernier passe de la page des catégories à la fiche produit : en d’autres termes, si votre madame va sur le site présente plus haut et choisit un top noir, lorsqu’elle affichera la fiche produit de ce top, elle devra à nouveau sélectionner la pastille noire pour retrouver son choix.
Soit dit en passant, c’est un jeu d’enfant pour des CMS moins prestigieux, tels WordPress/WooCommerce.
Tout comme mon expérience avec Huawei, Magento 2 s’est averé être une grosse déception ( contrairement à Magento 1.9) .
Une solution est d’acheter un module dédié à la gestion des catégories de couleur . Néanmoins, il faut garder à l’esprit que rien ne garantit que ce dernier soit compatible out of the box avec le thème que vous utilisez, et il faut prévoir du développement supplémentaire.
L’autre solution est d’utiliser des cookies javascript et un peu de jQuery.
Dans un premier temps, ajoutez la librairie jscookie – https://github.com/js-cookie/js-cookie – dans le dossier app/design/frontend/Vendor/template/web/js de votre template
et éditez le fichier require-config.js de votre template comme ceci
var config = {
paths: {
cookie: 'js/cookie'
},
shim: {
cookie: {
deps: ['jquery']
}
}
};
Regenerez les fichiers statiques de votre template si cela est nécessaire .
Ensuite, créez un cookie qui enregistrera le choix de l’utilisateur, dans le fichier phtml des catégories (généralement dans le dossier app/design/Vendor/template/Magento_Catalog/templates/product/list.phtml)
<script type="text/javascript">
require(['jquery', 'cookie'], function($) {
$(document).ready(function() {
if ($("body").hasClass("page-products")) {
//si l'user click sur la photo, creer un cookie
$('.product-item-info').each(function() {
$(this).click(function() {
var moupe = $(this).find('.swatch-option.color.selected');
var tangoyi = moupe.attr("id");
//console.log(tangoyi);
var choixdelutilisateur = $.cookie('choixdelutilisateur', tangoyi);
//console.log(choixdelutilisateur);
});
});
}
});
});
</script>Enfin, chargez ce cookie sur la fiche produit – app/design/frontend/Vendor/template/Magento_Catalog/templates/product/view/detail_layout.phtml – , et faites un trigger click lorsque les color swatches sont chargées.
<script type="text/javascript">
require([
'jquery','cookie'
], function(jQuery) {
(function($) {
$(document).ready(function() {
$(document).on('swatch.initialized', function() {
var choix = $.cookie('choixdelutilisateur');
console.log(choix);
var choixId = '#'+choix;
console.log(choixId);
$("#"+choix).trigger('click');
});
})(jQuery);
});
</script>Bonne chance .
Jean Luc Houedanou
