Display selected attribute color name on Prestashop for Warehouse theme
Source: https://mypresta.eu/prestashop-17/show-selected-color-attribute-name.html
Modification of custom.css
File is located in this directory: themes/warehouse/assets/css/custom.css (if you use different theme than « classic » theme – open your theme directory instead). At the end of this file paste code attached below:
|
1 2 3 4 5 6 |
.ColorLabel:after { display:inline-block; content: ': ' attr(data-after); margin-left:5px; font-weight:bold; } |
Modification of custom.js
File is located in this directory: themes/warehouse/assets/js/custom.js (the same as previously if you use different theme than « classic » – open your theme directory instead). At the end of this file paste code attached below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(document).ready(function(){ $(".input-color").parent().parent().parent().find('.form-control-label').addClass('ColorLabel'); $(".input-color:checked").each(function(){ $(this).parent().parent().parent().parent().find('.ColorLabel').attr('data-after', $(this).parent().find('.sr-only').html()); }); prestashop.on("updatedProduct", function (){ $(".input-color").parent().parent().parent().find('.form-control-label').addClass('ColorLabel'); $(".input-color:checked").each(function(){ $(this).parent().parent().parent().parent().find('.ColorLabel').attr('data-after', $(this).parent().find('.sr-only').html()); }); }); }); |
If Smart cache for JavaScript is enabled, add the JS code to themes/warehouse/assets/js/theme.js.
3 commentaires
Julien LD · 10 juillet 2022 à 4 h 23 min
Bonjour,
Merci pour l’astuce.
Cela n’a pas fonctionné directement car la classe ne s’ajoutait pas derrière form-control-label (je suis sur warehouse également) alors j’ai ajouté directement la classe ColorLabel dans le template product-variants et cela a fait son effet.
Julien LD · 10 juillet 2022 à 4 h 36 min
EDIT commentaire au-dessus :
En fait, ça a buggé sur ma version pre-prod mais a fonctionné directement sur la version en prod. Je cherche pas plus loin, merci encore pour l’astuce.
David Sprang · 9 août 2022 à 15 h 30 min
Merci pour votre commentaire 🙂