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é !");
}
}); |
Front-office produit caractéristique
Répondre avec citation
Partager