Une question au sujet de l'affichage sur une page produit

-- url of the page with the problem -- : www.guillenphoto.com/fr/les-photos-d-art...-et-blanc-245-7.html
-- Browser(s) name and version -- : Chrome 154.0

Bonjour,

Avant de vous poser ma question, je voudrai vous féliciter pour le nouveau design de votre site web. C'est très réussi. Très aéré, moderne et très clair. Facile à naviguer.
J'apprécie beaucoup.

Je viens d'avoir un souci avec un client. Il faut que je trouve une solution.
Voici ma question.
- Aller sur cette page :  www.guillenphoto.com/fr/les-photos-d-art...-et-blanc-245-7.html
- Dans le premier champ, sélectionnez "Finition contemporaine".
- Dans le deuxième champ, sélectionnez une taille.

J'aimerai que Finition contemporaine apparaisse automatiquement dans le troisième champ. Aujourd'hui, les clients doivent manuellement effectuer un choix confirmant le premier. C'est le moyen que j'ai trouvé pour afficher les détails du produit.

Tout fonctionnait bien jusqu'à aujourd'hui. Pour une commande, un client vient de sélectionner dans le premier champ "Finition contemporaine" puis il a choisi la finition Museum dans le troisième champ. Je ne sais pas quel produit lui livrer.

J'espère que mes explications sont claires. N'hésitez pas à me demander des détails.

J'espère aussi que c'est possible. Les montants sont importants. je ne peux pas me permettre de reproduire ce fonctionnement.


Sincèrement,
A. Guillen

Bonjour,

Merci pour vos mots sur le nouveau site.

Ce qui s'est passé : le premier champ (la finition) est une caractéristique de variante, alors que le troisième est un champ personnalisé de produit en panier. HikaShop ne relie pas les deux : un champ personnalisé ne peut dépendre que d'un autre champ personnalisé, jamais d'une caractéristique. Rien n'empêchait donc un client de choisir « Finition contemporaine » en haut et « Finition museum » plus bas, et c'est ce qui est arrivé. Ce n'est pas une panne : cela a toujours été possible, personne ne l'avait encore fait.

Pour la commande déjà passée, la commande contient les deux choix et HikaShop ne peut pas savoir lequel était voulu : le plus sûr est de demander au client quelle finition il souhaite (et la couleur de cadre qui va avec), le prix payé correspondant à la variante choisie dans le premier champ.

Pour que cela ne se reproduise pas, vous pouvez garder vos champs tels qu'ils sont et ajouter un petit script sur la page produit : il coche automatiquement dans le troisième champ la finition choisie dans le premier, cache ce troisième champ, et vos champs de couleur de cadre continuent de s'afficher selon la finition comme aujourd'hui. Le client ne peut donc plus choisir deux finitions différentes.

Pour l'ajouter :

1. Dans l'administration de HikaShop, allez dans Affichage > Vues.

2. Choisissez le template de votre site dans le filtre, et cherchez la vue « show_default » du type « product » (côté site).

3. Éditez-la et collez le code ci-dessous tout à la fin du fichier, après la dernière ligne. Si le fichier ne se termine pas par ?> , ajoutez une ligne avec ?> juste avant le code.

4. Enregistrez, puis testez sur la page produit : choisissez une finition dans le premier champ, le troisième doit disparaître et vos champs de couleur de la bonne finition doivent s'afficher.

Les valeurs 1, 5 et 6 et le nom du champ sont ceux que nous voyons sur vos pages produit (la caractéristique de finition, ses valeurs « Finition contemporaine » et « Finition museum », et votre champ « Choisissez une finition pour votre tirage en édition limitée »). Si vous renommez un jour ces valeurs du champ personnalisé, pensez à mettre à jour la ligne « var map » du code. Si une finition n'a pas de correspondance dans le champ, le script laisse simplement le champ visible pour que le client choisisse lui-même.

Nous avons testé ce code sur une boutique de test reproduisant votre configuration (caractéristique en boutons radio, champ de confirmation obligatoire et champs dépendants) : la valeur suit bien la finition choisie et les champs de couleur s'affichent correctement. Faites tout de même une commande test sur votre site après l'avoir ajouté.

Bonjour Nicolas,

je vous remercie pour votre réponse.

Merci beaucoup pour votre aide car ce n'est pas un bug mais une amélioration fonctionnelle pour mon site. J'apprécie beaucoup.

J'ai procédé comme vous l'avez indiqué. La modification ne fonctionne pas.
Je modifie mon site de test.
Voici une page pour voir ce qui se passe : gpfa99.guillenphoto.com/fr/les-photos-d-...-et-blanc-245-7.html

Quand je choisis "Finition contemporaine" dans le premier champ, le deuxième champ disparait. RIen ne change dans le troisième champ.

Il faut que je choisisse "Finition museum" pour voir réapparaitre le deuxième champ.

Je me suis peut être trompé dans le code. J'ai bien tout relu et vérifié. Tout me semble correct.

Pouvez-vous m'aider?

Sincèrement,
A. Guillen

Bonjour,

Merci pour le lien et pour vos explications précises. Le code n'est pas en cause : il n'est simplement jamais exécuté sur vos pages produit, et c'est notre faute, nous vous avons indiqué la mauvaise vue.

Vos pages produit n'utilisent pas la mise en page « show_default » mais « show_fullwidth » (on le voit dans le code source de vos pages). Le code collé à la fin de show_default n'est donc jamais chargé : c'est pour cela que rien ne change dans le champ de confirmation de la finition.

Le plus simple est de le placer dans la vue « show », qui entoure toutes les mises en page de la page produit. Il fonctionnera alors quelle que soit la mise en page choisie pour un produit ou une catégorie :

1. Dans Affichage > Vues, ouvrez à nouveau la vue « show_default » du type « product » (côté site) pour votre template, coupez le code que vous avez ajouté (de à , et la ligne ?> si vous l'aviez ajoutée), puis enregistrez.

2. Toujours dans Affichage > Vues, avec le même template dans le filtre, ouvrez la vue nommée exactement « show » du type « product » (côté site).

3. Collez le même code tout à la fin du fichier, après la dernière ligne. Cette vue se termine déjà par du HTML (), il n'y a donc pas besoin d'ajouter ?> cette fois. Enregistrez.

4. Videz le cache de votre site s'il est activé, rechargez la page produit et choisissez une finition.

Ce que vous devez voir ensuite : au chargement, le champ de confirmation de la finition est caché. Quand vous choisissez « Finition contemporaine » ou « Finition museum », la liste des tailles s'affiche, le champ de confirmation reste caché mais il est coché automatiquement avec la même finition, et vos champs de couleur de cadre de cette finition s'affichent. C'est voulu : le client ne voit plus ce champ et ne peut donc plus choisir une finition différente, mais la finition figure bien dans le panier et dans la commande.

Si, après ce déplacement, le champ de confirmation réapparaît quand vous choisissez l'une des deux finitions, c'est que la valeur indiquée pour cette finition dans la ligne « var map » n'est pas écrite exactement comme dans votre champ personnalisé (majuscules, accents, espaces) : le script laisse alors volontairement le champ visible. Dans ce cas, envoyez-nous une copie de votre ligne « var map » et une capture des valeurs de votre champ personnalisé, et nous vous la corrigerons.

Bonsoir Nicolas,

je vous remercie pour votre aide. La correction ne fonctionne pas bien.

Je viens d'effectuer les modifications.
- j'ai bien supprimé le code de show_defaut.
- je l'ai ajouté à show.
- je reprends toujours la même page : gpfa99.guillenphoto.com/fr/les-photos-d-...-et-blanc-245-7.html
- comme vous l'avez dit, les tailles n'apparaissent pas.
- je sélectionne une finition (contemporaine par exemple).
- la liste des tailles apparait. Jusque là, tout est conforme à votre réponse.
- le champ de confirmation s'affiche toujours.
- j'ai vérifié la manière dont vous avez orthographié les valeur dans var map. Elles sont correctes.
- j'ai fait une copie d'écran mais je ne peux vous l'attacher. Je ne trouve pas l'option.

J'ai une autre question. Comment faire pour la version anglaise avec cette page par exemple :
gpfa99.guillenphoto.com/en/all-fine-art-...sand-dunes-2-17.html

Merci encore pour votre aide

Sincèrement,
A. Guillen

Bonsoir,

Nous avons pu ouvrir votre page de test gpfa99 et le code de notre dernière réponse n'y est pas du tout : ni l'ancienne version avec "var map", ni la nouvelle. Nous l'avons exécuté directement sur votre page et il fonctionne avec vos réglages : en choisissant "Finition contemporaine", le champ de confirmation prend la même valeur et se masque, et les couleurs de cadre de la finition contemporaine s'affichent ; même chose avec "Finition museum".

Le code n'est donc simplement pas enregistré dans la vue qu'utilise cette page. Votre site gpfa99 utilise le template "gpfa-full-screen-left-side" et la mise en page show_default. Pour le placer au bon endroit :
1. Dans HikaShop > Affichage > Vues, filtrez sur le template gpfa-full-screen-left-side et la vue "product".
2. Ouvrez le fichier show_default et collez le code de notre réponse précédente tout à la fin, puis enregistrez.
3. Videz le cache du site (Système > Effacer le cache) et, si vous en utilisez, le cache de Cloudflare, puis rechargez la page produit.

Si le champ de confirmation s'affiche encore après cela, dites-nous dans quel template vous avez fait la modification.

Bonjour Nicolas,

je vous ai enregistré cette vidéo pour vous montrer comment je procéde.
kdrive.infomaniak.com/app/share/118755/f...6a-8d20-4d0f8e90d35a

Je pense suivre vos instructions. Je dois rater une étape mais je ne vois pas laquelle.

Merci pour votre aide,
Sincèrement,
A. Guillen

Bonjour,

Merci pour la vidéo, elle nous a permis de trouver le problème, et il vient de nous : le forum a supprimé deux lignes du code que nous vous avons envoyé.

Le code doit être entouré d'une balise script ouvrante (première ligne) et d'une balise script fermante (dernière ligne). Le forum retire ces balises des messages, même dans un bloc de code : le code que vous avez copié commence donc directement par window.hikashop.ready et n'a plus ces deux lignes. Collé ainsi dans la vue, il n'est pas exécuté par le navigateur : il est simplement affiché comme du texte, et le champ de confirmation ne change pas. Vous avez fait exactement ce que nous avions indiqué.

Nous vous joignons donc le code complet dans un fichier (finition-auto.txt), avec ses balises. Il s'agit aussi d'une version améliorée : elle ne contient plus de numéros ni de noms de champ à adapter. Elle repère seule le champ dont les choix portent les mêmes noms que les finitions du premier champ et le remplit avec la finition choisie. Elle fonctionne aussi bien avec des listes déroulantes (comme sur votre site gpfa99) qu'avec des boutons radio.

1. Dans HikaShop > Affichage > Vues, filtrez sur le template gpfa-full-screen-left-side, ouvrez la vue « show » du type « product » et supprimez tout le code que vous avez collé après la dernière ligne qui ferme le div (à partir de window.hikashop.ready jusqu'à la fin). Faites de même dans « show_default » si vous y aviez encore laissé l'ancien code.

2. Ouvrez le fichier joint finition-auto.txt avec un éditeur de texte (Bloc-notes par exemple), sélectionnez tout le contenu (Ctrl+A), copiez-le, puis collez-le tout à la fin de la vue « show », après la dernière ligne. Vérifiez que la première ligne collée est bien la balise script ouvrante et la dernière la balise script fermante. Enregistrez.

3. Videz le cache de Cloudflare comme dans votre vidéo, puis rechargez la page produit.

Vous devez alors voir : au chargement, le champ « Précisez la finition que vous avez choisie » est caché. Quand vous choisissez une finition dans le premier champ, ce champ reste caché mais prend automatiquement la même finition, et vos champs de couleur de cadre de cette finition s'affichent. Si une finition du premier champ n'a pas d'équivalent dans ce champ, le script le laisse visible pour que le client choisisse lui-même.

Pour la version anglaise : il n'y a rien à ajouter. La vue « show » est la même pour toutes les langues, et comme le script compare les noms affichés, il fonctionne en anglais dès que les finitions portent le même nom dans les deux champs (par exemple « Contemporary finish » dans le premier champ et dans le champ de confirmation). Si, sur la page anglaise, le champ de confirmation reste visible après le choix d'une finition, c'est que ses valeurs n'y portent pas le même nom que la finition : envoyez-nous alors une capture des deux champs sur cette page.

Faites ensuite une commande test en français et en anglais pour vérifier que la finition apparaît bien dans le panier et dans la commande.

Bonjour Nicolas,

je vous remercie pour votre réponse.

Je n'ai pas trouvé le fichier .txt que vous évoquez dans le post.
J'ai donc effectué une recherche pour trouver les deux balises que vous évoquez. J'ai trouvé qu'il s'agissait de <script> et </script>.
Je les ai ajoutés. Tout fonctionne parfaitement sur la version française.
C'est vraiment génial. Merci.

J'ai effectué un test sur les produits anglais avec comme exemple cette URL : gpfa99.guillenphoto.com/en/all-fine-art-...sand-dunes-2-17.html

Le champ de confirmation de la finition est toujours affiché.

Pouvez-vous me dire comment faire pour cet ajout fonctionnel soit valable pour les produits en anglais?

Merci par avance.
A. Guillen

Le script fonctionne toujours de la même façon : il compare le texte affiché dans le premier champ (la finition) à celui de chaque choix du troisième champ, et ne coche + cache ce dernier que s'il trouve une correspondance exacte. C'est ce qui bloque sur vos pages anglaises.

Le troisième champ (« Précisez la finition que vous avez choisie ») est un champ unique, partagé par toutes les langues de la boutique : ses valeurs « Finition contemporaine » et « Finition museum » restent donc écrites en français même sur une page anglaise. La caractéristique « Finition », elle, est traduite car chaque page produit anglaise est une fiche à part que vous avez rédigée entièrement en anglais. Le nom anglais de la finition ne correspond donc à aucune des deux valeurs françaises du troisième champ : le script ne trouve pas de correspondance et laisse le champ visible, exactement comme il est conçu pour le faire quand aucune finition ne correspond.

Pour que cela fonctionne aussi en anglais, il faut traduire les deux valeurs du champ de confirmation pour l'anglais, avec une redéfinition de langue Joomla (cela ne touche pas le champ lui-même : le français continue de fonctionner sans rien changer) :

1. Dans l'administration, allez dans Système > Site > Langues : Redéfinitions.

2. Choisissez « English (United Kingdom) - Site » dans la liste des langues, puis cliquez sur Nouveau.

3. Dans « Language Constant », entrez FINITION_CONTEMPORAINE. Dans « Text », entrez exactement (copié-collé) le texte affiché pour cette finition dans le premier champ sur vos pages anglaises. Enregistrez.

4. Recommencez avec FINITION_MUSEUM pour l'autre finition, avec son texte anglais.

5. Videz le cache de Joomla, puis celui de Cloudflare, et rechargez une page produit anglaise : en choisissant une finition, le champ de confirmation doit maintenant se cocher automatiquement avec la même finition et se cacher, comme en français.

Si votre boutique propose d'autres langues que le français et l'anglais, il faut ajouter les mêmes deux redéfinitions pour chacune (en choisissant cette langue à l'étape 2 et son propre texte à l'étape 3) pour que le champ se cache aussi sur ces pages-là ; sans redéfinition pour une langue donnée, le champ y reste visible et le client choisit lui-même, sans risque d'erreur.

Faites ensuite une commande test en anglais pour vérifier que la finition apparaît bien dans le panier et dans la commande, comme vous l'avez déjà fait en français.

Bonjour Nicolas,

je vous remercie de continuer à m'aider pour cet ajout fonctionnel.

Je pense avoir suivi la procédure mais sur mon site, elle ne fonctionne pas.

Je vous ai enregistré cette vidéo pour vous montrer comment j'ai procédé :
kdrive.infomaniak.com/app/share/118755/7...1d-be1f-663e27928f8d

Sinon pour la version française, tout fonctionne parfaitement. Le panier est correctement mis à jour.

Pouvez-vous encore m'aider?

Sincèrement,
A. Guillen

Bonjour,

Merci pour la vidéo. Nous avons regardé vos pages anglaises sur gpfa99 et la cause est trouvée : le code qui se trouve actuellement dans votre vue est la première version que nous vous avions donnée, celle qui commence par « // Remplit le champ de finition à partir de la finition choisie plus haut ». Cette version vise uniquement la caractéristique « Finition » et le champ « Les options de personnalisation de votre tirage d'art » des pages françaises, par leurs numéros.

Or vos pages anglaises n'utilisent pas les mêmes : elles ont leur propre caractéristique de finition et leur propre champ « Specify the Finish You Have Chosen » (avec ses propres couleurs de cadre). Le code ne les trouve donc pas, et le champ reste visible. Les redéfinitions de langue FINITION_CONTEMPORAINE et FINITION_MUSEUM n'ont pas de rôle ici : vous pouvez les laisser ou les supprimer, cela ne change rien.

La version jointe à ce message (finition-auto.txt) ne dépend plus d'aucun numéro ni nom de champ : elle repère seule le champ dont les choix portent les mêmes noms que les finitions de la caractéristique. Nous avons vérifié sur votre page anglaise « Landscape of White Sand Dunes XVII » qu'elle associe bien la finition au champ « Specify the Finish You Have Chosen » (Contemporary Finish et Museum Finish), et sur les pages françaises elle associe la finition au champ français comme aujourd'hui.

1. Dans HikaShop > Affichage > Vues, avec le template gpfa-full-screen-left-side dans le filtre, ouvrez la vue « show » du type « product » où vous avez collé le code.
2. Supprimez tout l'ancien code, de la ligne de la balise script ouvrante qui le précède jusqu'à la balise script fermante qui le suit (le bloc qui contient « Remplit le champ de finition »).
3. Ouvrez le fichier joint finition-auto.txt avec un éditeur de texte (Bloc-notes par exemple), sélectionnez tout (Ctrl+A), copiez, et collez-le à la place de l'ancien code. Enregistrez.
4. Videz le cache de Joomla (Système > Vider le cache) puis celui de Cloudflare, et rechargez une page produit en anglais et une en français.

Sur les deux, le champ de confirmation devrait alors être caché au chargement, et prendre automatiquement la finition choisie dans le premier champ. Faites ensuite une commande test dans chaque langue pour vérifier que la finition apparaît bien dans le panier et dans la commande.

Bonjour Nicolas,

je vous remercie. Cette fois, je peux lire le fichier txt.

J'ai copié/collé le code.

- pour la version anglaise avec par exemple le produit :
gpfa99.guillenphoto.com/en/all-fine-art-...sand-dunes-2-17.html
Tout fonctionne parfaitement.

- pour la version française avec par exemple le produit :
gpfa99.guillenphoto.com/fr/les-photos-d-...-et-blanc-245-7.html
Le champ de confirmation est de nouveau affiché. Ce qui n'était pas le cas avec la correction précédente.

Pouvez-vous regarder?

Sincèrement,
A. Guillen

Bonjour,

Merci pour ce retour. Nous avons regardé votre page française « Paysage du parc national de Big Bend au Texas en noir et blanc VII » : le nouveau code y est bien, et c'est une erreur de notre part dans la réponse précédente.

Sur cette page française, les choix du champ « Les options de personnalisation de votre tirage d'art » s'affichent maintenant en anglais : « Contemporary Finish » et « Museum Finish ». Ce sont les deux redéfinitions de langue FINITION_CONTEMPORAINE et FINITION_MUSEUM qui les traduisent, et elles s'appliquent aussi à vos pages françaises. Le script ne retrouve donc plus « Finition contemporaine » et « Finition museum » dans ce champ, et le laisse visible. Nous vous avions écrit que ces redéfinitions n'avaient pas de rôle : c'était faux, elles sont au contraire ce qui fait fonctionner la page anglaise, il faut donc les garder.

Il suffit d'ajouter les deux mêmes redéfinitions pour le français, avec le texte français :

1. Dans Système > Site > Langues : Redéfinitions, choisissez « Français (France) - Site » dans la liste des langues, puis cliquez sur Nouveau.
2. Dans « Constante de langue », entrez FINITION_CONTEMPORAINE, et dans « Texte », entrez Finition contemporaine. Enregistrez.
3. Recommencez avec FINITION_MUSEUM et le texte Finition museum.
4. Videz le cache de Joomla puis celui de Cloudflare, et rechargez la page française et la page anglaise.

Le code collé dans la vue reste tel quel. Sur les deux pages, le champ devrait alors être caché et prendre automatiquement la finition choisie. Cela corrige aussi le panier et la commande de vos clients français, où la finition s'afficherait sinon en anglais : faites une commande test dans chaque langue pour le vérifier.

Bonjour Nicolas,

je vous remercie mille fois pour votre aide. Tout fonctionne parfaitement.

J'ai intégré les modifications sur mon site de production. J'ai effectué plusieurs tests. Ils sont très concluants.

Cette modification fonctionnelle va faciliter la vie de mes clients. J'essaie de leur rendre le site web facile d'accès. Mais cette fois, mes compétences étant limitées dans le domaine du web, j'ai fait au mieux avec les outils que j'avais à ma disposition.
Le problème que j'ai rencontré ce week end avec une commande s'est produit pour la première fois. Habituellement, les clients suivent la procédure sans problème car elle est séquentielle.
Cette fois, la personne n'a pas bien compris. Heureusement, la commande a été confirmée par le client. Il a été compréhensif.

En trouvant une solution à mon problème, vous m'avez retiré une belle aiguille du pied en m'évitant de futurs problèmes.

Je vous suis très reconnaissant pour ce que vous avez fait.

Je vous ai envoyé un message privé.

Merci pour tout.

Sincèrement,
A. Guillen