IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

EDI, CMS, Outils, Scripts et API PHP Discussion :

Front-office produit caractéristique


Sujet :

EDI, CMS, Outils, Scripts et API PHP

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2003
    Messages
    408
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : Mai 2003
    Messages : 408
    Par défaut Front-office produit caractéristique
    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

  2. #2
    Membre confirmé
    Homme Profil pro
    Enseignant
    Inscrit en
    Février 2020
    Messages
    40
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : Belgique

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : Février 2020
    Messages : 40
    Par défaut
    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>

Discussions similaires

  1. [Joomla!] Virtuemart : produits enfants qui s'affichent sur front office
    Par tich13 dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 0
    Dernier message: 14/06/2013, 11h28
  2. Requetes lentes depuis le front office
    Par Naturalforme.fr dans le forum MS SQL Server
    Réponses: 2
    Dernier message: 29/06/2008, 22h49
  3. Réponses: 0
    Dernier message: 16/06/2008, 15h11
  4. support en FRONT Office
    Par Mathusalem dans le forum Etudes
    Réponses: 6
    Dernier message: 03/12/2006, 23h16
  5. [Tableaux] Front-office et back-office
    Par ChiCodoubrasil dans le forum Langage
    Réponses: 16
    Dernier message: 15/07/2006, 19h45

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo