Front-office produit caractéristique

**lelectronique.com** · 18/02/2025, 15h31

Bonjour,

Je tente de rajouter les caractéristiques produit en automatique en fonction de la catégorie du produit en rajouter un fichier js à mon admin, cela fonctionne très bien pour un nouveau.
Pour la modification d'un produit cela fonctionne aussi sauf pour les listes déroulantes contenant les valeurs définies. Les listes restent vident et elles ne récupèrent pas les valeurs, elles sont dans cet état :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<select id="form_step1_features_40_value" name="form[step1][features][40][value]" disabled="disabled" class="feature-value-selector custom-select" data-minimumresultsforsearch="7"><option value="">Choisissez une valeur</option></select>

Auriez vous une idée ?

Voici mon code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
 
 
document.addEventListener("DOMContentLoaded", function () {
 
     console.log("🚀  Script chargé !");
    // Mapping des catégories avec leurs caractéristiques
    const categoryFeatures = {
        206: ["Cadre", "Fourche", "Guidon", "Potence", "Tige de selle", "Selle", "Dérailleur arrière", "Dérailleur avant", "Freins", "Pneus", "Jantes", "Cassette", "Chaine", "Pédalier", "Taille des roues", "Poids approximatif", "Manettes", "Année", "Genre"],
        208: ["Cadre", "Fourche", "Guidon", "Potence", "Tige de selle", "Selle", "Dérailleur arrière", "Dérailleur avant", "Freins", "Pneus", "Jantes", "Cassette", "Chaine", "Pédalier", "Taille des roues", "Poids approximatif", "Manettes", "Année", "Genre"],
        209: ["Cadre", "Fourche", "Guidon", "Potence", "Tige de selle", "Selle", "Dérailleur arrière", "Dérailleur avant", "Freins", "Pneus", "Jantes", "Cassette", "Chaine", "Pédalier", "Taille des roues", "Poids approximatif", "Manettes", "Année", "Moteur", "Batterie", "Vitesse maximale", "Console", "Couple moteur", "Capacité de la batterie", "Position moteur", "Genre"],
        210: ["Cadre", "Fourche", "Guidon", "Potence", "Tige de selle", "Selle", "Dérailleur arrière", "Dérailleur avant", "Freins", "Pneus", "Jantes", "Cassette", "Chaine", "Pédalier", "Taille des roues", "Poids approximatif", "Manettes", "Année", "Genre", "Amortisseur"],
        211: ["Cadre", "Fourche", "Guidon", "Potence", "Tige de selle", "Selle", "Dérailleur arrière", "Dérailleur avant", "Freins", "Pneus", "Jantes", "Cassette", "Chaine", "Pédalier", "Taille des roues", "Poids approximatif", "Manettes", "Année", "Genre"],
        215: ["Cadre", "Fourche", "Guidon", "Potence", "Tige de selle", "Selle", "Dérailleur arrière", "Dérailleur avant", "Freins", "Pneus", "Jantes", "Cassette", "Chaine", "Pédalier", "Taille des roues", "Poids approximatif", "Manettes", "Année", "Moteur", "Batterie", "Vitesse maximale", "Console", "Couple moteur", "Capacité de la batterie", "Position moteur", "Genre"],
        228: ["Cadre", "Fourche", "Guidon", "Potence", "Tige de selle", "Selle", "Dérailleur arrière", "Dérailleur avant", "Freins", "Pneus", "Jantes", "Cassette", "Chaine", "Pédalier", "Taille des roues", "Poids approximatif", "Manettes", "Année", "Moteur", "Batterie", "Vitesse maximale", "Console", "Couple moteur", "Capacité de la batterie", "Position moteur", "Genre", "Amortisseur"],
        234: ["Cadre", "Fourche", "Guidon", "Potence", "Tige de selle", "Selle", "Dérailleur arrière", "Dérailleur avant", "Freins", "Pneus", "Jantes", "Cassette", "Chaine", "Pédalier", "Taille des roues", "Poids approximatif", "Manettes", "Année", "Genre", "Amortisseur"],
        273: ["Cadre", "Fourche", "Guidon", "Potence", "Tige de selle", "Selle", "Dérailleur arrière", "Dérailleur avant", "Freins", "Pneus", "Jantes", "Cassette", "Chaine", "Pédalier", "Taille des roues", "Poids approximatif", "Manettes", "Année", "Genre", "Amortisseur"],
        237: ["Cadre", "Fourche", "Guidon", "Potence", "Tige de selle", "Selle", "Dérailleur arrière", "Dérailleur avant", "Freins", "Pneus", "Jantes", "Cassette", "Chaine", "Pédalier", "Taille des roues", "Poids approximatif", "Manettes", "Année", "Moteur", "Batterie", "Vitesse maximale", "Console", "Couple moteur", "Capacité de la batterie", "Position moteur", "Genre"],
        238: ["Cadre", "Fourche", "Guidon", "Potence", "Tige de selle", "Selle", "Dérailleur arrière", "Dérailleur avant", "Freins", "Pneus", "Jantes", "Cassette", "Chaine", "Pédalier", "Taille des roues", "Poids approximatif", "Manettes", "Année", "Genre"],
        267: ["Cadre", "Fourche", "Guidon", "Potence", "Tige de selle", "Selle", "Dérailleur arrière", "Dérailleur avant", "Freins", "Pneus", "Jantes", "Cassette", "Chaine", "Pédalier", "Taille des roues", "Poids approximatif", "Manettes", "Année", "Moteur", "Batterie", "Vitesse maximale", "Console", "Couple moteur", "Capacité de la batterie", "Position moteur", "Genre", "Type vélo cargo"],
        268: ["Cadre", "Fourche", "Guidon", "Potence", "Tige de selle", "Selle", "Dérailleur arrière", "Dérailleur avant", "Freins", "Pneus", "Jantes", "Cassette", "Chaine", "Pédalier", "Taille des roues", "Poids approximatif", "Manettes", "Année", "Moteur", "Batterie", "Vitesse maximale", "Console", "Couple moteur", "Capacité de la batterie", "Position moteur", "Genre", "Type vélo cargo"],
        233: ["Cadre", "Fourche", "Guidon", "Potence", "Tige de selle", "Selle", "Dérailleur arrière", "Dérailleur avant", "Freins", "Pneus", "Jantes", "Cassette", "Chaine", "Pédalier", "Taille des roues", "Poids approximatif", "Manettes", "Année", "Genre"],
        236: ["Cadre", "Fourche", "Guidon", "Potence", "Tige de selle", "Selle", "Dérailleur arrière", "Dérailleur avant", "Freins", "Pneus", "Jantes", "Cassette", "Chaine", "Pédalier", "Taille des roues", "Poids approximatif", "Manettes", "Année", "Genre"],
        270: ["Cadre", "Fourche", "Guidon", "Potence", "Tige de selle", "Selle", "Dérailleur arrière", "Dérailleur avant", "Freins", "Pneus", "Jantes", "Cassette", "Chaine", "Pédalier", "Taille des roues", "Poids approximatif", "Manettes", "Année", "Genre"],
        271: ["Cadre", "Fourche", "Guidon", "Potence", "Tige de selle", "Selle", "Dérailleur arrière", "Dérailleur avant", "Freins", "Pneus", "Jantes", "Cassette", "Chaine", "Pédalier", "Taille des roues", "Poids approximatif", "Manettes", "Année", "Genre"],
        213: ["Cadre", "Fourche", "Guidon", "Potence", "Tige de selle", "Selle", "Dérailleur arrière", "Dérailleur avant", "Freins", "Pneus", "Jantes", "Cassette", "Chaine", "Pédalier", "Taille des roues", "Poids approximatif", "Manettes", "Année", "Genre"],
        235: ["Cadre", "Fourche", "Guidon", "Potence", "Tige de selle", "Selle", "Dérailleur arrière", "Dérailleur avant", "Freins", "Pneus", "Jantes", "Cassette", "Chaine", "Pédalier", "Taille des roues", "Poids approximatif", "Manettes", "Année", "Genre"],
        272: ["Cadre", "Fourche", "Guidon", "Potence", "Tige de selle", "Selle", "Dérailleur arrière", "Dérailleur avant", "Freins", "Pneus", "Jantes", "Cassette", "Chaine", "Pédalier", "Taille des roues", "Poids approximatif", "Manettes", "Année", "Genre"],
    };
 
    // Normalise une chaîne (en minuscules et sans espaces superflus)
    function normalize(str) {
        return str ? str.trim().toLowerCase() : "";
    }
 
    // Sauvegarde les valeurs existantes pour chaque champ,
    // en associant le nom normalisé de la caractéristique à un objet contenant :
    // - la valeur du select (selectValue)
    // - la valeur du champ personnalisé (customValue)
    function saveExistingFieldValues() {
        const saved = {};
        document.querySelectorAll(".feature-collection .product-feature").forEach(field => {
            const select = field.querySelector("select.feature-selector");
            const inputCustom = field.querySelector("input.form-control"); // champ texte
            if (select) {
                const selectedOption = select.options[select.selectedIndex];
                let selectedText = selectedOption ? selectedOption.text : "";
                selectedText = normalize(selectedText);
                if (selectedText && selectedText !== "choisissez une caractéristique") {
                    saved[selectedText] = {
                        selectValue: select.value,
                        customValue: inputCustom ? inputCustom.value : ""
                    };
                }
            }
        });
        console.log("Valeurs sauvegardées :", saved);
        return saved;
    }
 
    // Simule le clic sur le bouton "Ajouter une caractéristique" et attend l'ajout du champ.
    function addCharacteristicField(featureName, callback) {
        const addBtn = document.querySelector("#add_feature_button");
        if (!addBtn) {
            console.error("Bouton 'Ajouter une caractéristique' non trouvé !");
            return;
        }
        const container = document.querySelector(".feature-collection");
        const initialCount = container.querySelectorAll(".product-feature").length;
        addBtn.click();
        console.log("Clic simulé pour ajouter la caractéristique :", featureName);
        const interval = setInterval(() => {
            const fields = container.querySelectorAll(".product-feature");
            if (fields.length > initialCount) {
                clearInterval(interval);
                const newField = fields[fields.length - 1];
                callback(newField);
            }
        }, 100);
    }
 
    // Ajoute les champs caractéristiques de manière séquentielle et restaure les valeurs sauvegardées.
    // 'features' est un tableau des caractéristiques à ajouter (selon votre mapping).
    // 'savedValues' est l'objet contenant les valeurs sauvegardées.
    function addCharacteristicFieldsSequentially(features, index, savedValues) {
        if (index >= features.length) return;
        addCharacteristicField(features[index], function (newField) {
            // Attendre 300ms pour laisser le temps à Select2 de s'initialiser
            setTimeout(() => {
                const select = newField.querySelector("select.feature-selector");
                const inputCustom = newField.querySelector("input.form-control");
                if (select) {
                    // Restaure la valeur sauvegardée si elle existe pour cette caractéristique.
                    const normalizedFeature = normalize(features[index]);
                    const savedData = savedValues[normalizedFeature];
                    if (savedData && Array.from(select.options).some(opt => opt.value === savedData.selectValue)) {
                        select.value = savedData.selectValue;
                        if (window.jQuery && $(select).data('select2')) {
                            $(select).trigger('change.select2');
                        } else {
                            select.dispatchEvent(new Event("change", { bubbles: true }));
                        }
                        console.log("Valeur restaurée pour", features[index], "->", savedData.selectValue);
                        // Restaure la valeur du champ personnalisé si présente
                        if (inputCustom && savedData.customValue) {
                            inputCustom.value = savedData.customValue;
                            console.log("Valeur personnalisée restaurée pour", features[index], "->", savedData.customValue);
                        }
                    } else {
                        // Pré-remplissage par défaut basé sur le texte de l'option
                        const optionDefault = Array.from(select.options).find(opt => normalize(opt.text) === normalizedFeature);
                        if (optionDefault) {
                            select.value = optionDefault.value;
                            if (window.jQuery && $(select).data('select2')) {
                                $(select).trigger('change.select2');
                            } else {
                                select.dispatchEvent(new Event("change", { bubbles: true }));
                            }
                            console.log("Pré-remplissage par défaut pour", features[index]);
                        } else {
                            console.warn("Option non trouvée pour", features[index]);
                        }
                    }
                } else {
                    console.warn("Select non trouvé dans le champ ajouté pour", features[index]);
                }
                // Passe au champ suivant
                addCharacteristicFieldsSequentially(features, index + 1, savedValues);
            }, 300);
        });
    }
 
    // Met à jour la section des caractéristiques pour la catégorie sélectionnée.
    function updateCharacteristicsForCategory(categoryId) {
        const featuresToAdd = categoryFeatures[categoryId] || [];
        console.log("Mise à jour des caractéristiques pour la catégorie :", categoryId);
        console.log("Caractéristiques à ajouter :", featuresToAdd);
 
        const container = document.querySelector(".feature-collection");
        if (!container) {
            console.error("Conteneur des caractéristiques introuvable !");
            return;
        }
        // Sauvegarder les valeurs existantes avant de vider le conteneur
        const savedValues = saveExistingFieldValues();
 
        if (!confirm("Changer de catégorie va réinitialiser les caractéristiques actuelles. Continuer ?")) {
            return;
        }
 
        // Vider le conteneur
        container.innerHTML = "";
 
        // Ajout séquentiel des nouveaux champs, en passant les valeurs sauvegardées
        addCharacteristicFieldsSequentially(featuresToAdd, 0, savedValues);
    }
 
    // Récupère l'ID de la catégorie sélectionnée via les boutons radio
    function getSelectedCategory() {
        const selectedRadio = document.querySelector("input.default-category:checked");
        return selectedRadio ? parseInt(selectedRadio.value) : null;
    }
 
    // Lorsqu'une catégorie change, mettre à jour les caractéristiques.
    function onCategoryChange() {
        const categoryId = getSelectedCategory();
        if (categoryId === null) {
            console.warn("Aucune catégorie sélectionnée.");
            return;
        }
        updateCharacteristicsForCategory(categoryId);
    }
 
    // Attache l'événement sur les boutons radio de catégorie.
    const categoryRadios = document.querySelectorAll("input.default-category");
    if (categoryRadios.length > 0) {
        categoryRadios.forEach(radio => {
            radio.addEventListener("change", onCategoryChange);
        });
        // Mise à jour initiale si une catégorie est déjà sélectionnée.
        onCategoryChange();
    } else {
        console.error("Aucun bouton radio de catégorie trouvé !");
    }
 
 
 
});

Merci pour votre aide

**Mister Socrates** · 06/07/2025, 22h42

Bonjour et désolé pour mon intervention tardive.
La liste est vide parce qu'outre l'option générale "Choisissez une valeur", il faut ajouter les différentes options disponibles. Par ex. s'il s'agit de vêtements avec 3 options de couleur, il faut ajouter: option 1= bleu, option 2= rouge, option 3= vert.
Il faudrait aussi vérifier que le disabled n'agit pas pour désactiver le déroulement de la liste auquel cas elle reste inactive.
Ce qui donne comme exemple au niveau du code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<select id="form_step1_features_40_value" name="form[step1][features][40][value]" class="feature-value-selector custom-select">
  <option value="">Choisissez une valeur</option>
  <option value="1">Rouge</option>
  <option value="2">Bleu</option>
  <option value="3">Vert</option>
</select>

Front-office produit caractéristique

EDI, CMS, Outils, Scripts et API PHP

Discussions similaires

Partager

Partager