Front-office produit caractéristique

[mondeduvelo]

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 :

<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 

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