Créer sa boutique

[no_way]

Attention, ce tuto a subi une mise à jour, la boutique est à présent en version 2.

Créer votre boutique (v2)

Ce tutoriel et les codes associés ont pour but de vous permettre de créer votre boutique en s'appuyant sur le système de points de votre forum, il est possible d'installer la boutique plus aisément en passant par l'installation simplifiée. N'hésitez pas à lire les codes fournis afin de comprendre son fonctionnement, la rédaction de ce tutoriel a été faite de sorte à être accessible, toutes les possibilités ne peuvent être couvertes. Accès rapide: -Quelques points clés. -Installation de base. -Description du code de la page HTML. -Définition des articles. -Création de la boutique. -Personnaliser les couleurs de la boutique. -Aller plus loin, personnaliser la boutique. -Les variables d'affichage. Quelques points clés: Il est important de noter que la boutique proposée ici: n'est pas compatible avec Internet Explorer en version inférieure à 10, de par son utilisation des fonctions addEventListener, querySelector, querySelectorAll, Object.defineProperties... n'est pas compatible avec les vieux forums dont l'encodage n'est pas en utf-8 SI le nom de l'administrateur ou des points comporte des caractères autres que ceux de l'alphabet de base (a-z) et _- ne peut pas retirer le nombre de points (argent) au membre acheteur, c'est un administrateur qui doit s'en occuper. envoie un MP indiquant les articles et le coût total de l'achat à l'admin de la boutique qui doit être un administrateur. utilise pour l'affichage des articles et le contenu du panier la technique des templates, vous écrivez donc le même code html pour 1 article que pour 200. ne dépend pas de jQuery. est conçue de façon à être personnalisable. Installation de base: Il vous faut dans un premier temps vérifier que votre forum est configuré pour autoriser les formulaires non officiels: Panneau d'administration Général Sécurité Interdire les formulaires non officiels à poster des messages et messages privés sur le forum:non Il vous faut bien entendu utiliser le système de points Une fois ceci fait, il faut ajouter un peu de code CSS à votre forum: Panneau d'administration Affichage Couleurs Feuille de style CSS Code: .ma_boutique{ position:relative; background:#B69A88; color:#452E0A; border-radius:5px; text-align:center; font-size:13px; width:400px } .ma_boutique *{ color:#452E0A; margin:0px; padding:0px; } .ma_boutique [data-var][data-sans_contenu]:before{ content:attr(data-var) } .ma_boutique .titre_article_template_articles[data-var][data-sans_contenu]:before{ content:'(x' attr(data-var) ')' } .ma_boutique .titre_article_template_articles[data-var="0"]{ visibility:hidden } .ma_boutique h2,.ma_boutique h4,.ma_boutique h6{ border-bottom:1px solid #ECDFD5; padding:0.3em; color:#F5EFEB } .ma_boutique h2{ font-size:20px; } .ma_boutique h4{ font-size:13px; } .ma_boutique h6{ font-size:10px; } .ma_boutique .AJAX_erreur,.ma_boutique .AJAX_en_cours,.ma_boutique .AJAX_termine{ display:inline-block; width:10px; height:10px; border-radius:50%; border: 1px outset #AAAAAA } .ma_boutique .AJAX_erreur{ background:#FF0000 } .ma_boutique .AJAX_en_cours{ background:#EAB956 } .ma_boutique .AJAX_termine{ background:#25E100 } .ma_boutique .articles{ border-bottom: 2px solid #D7BFB0; max-height:300px; overflow:auto } .ma_boutique .articles>div{ overflow:auto; float:left; text-align:center; box-sizing:border-box; border:2px #B69A88 solid; border-radius:5px; background:#D7BFB0; padding:2px; width:50%; height:220px } .ma_boutique .articles>div>button{ display:block; margin:auto } .ma_boutique .articles>div .proprietes{ height:50px; overflow:auto } .ma_boutique .articles>div .proprietes>p[title]:before{ content:attr(title)': '; } .ma_boutique .articles>div .proprietes>p:empty{ visibility:hidden } .ma_boutique .img_article{ max-height:80px; max-width:100px } .ma_boutique .alerte{ background:#FFF8F7; padding:2px; border-radius:3px; border:solid 1px #FF0000; } .ma_boutique .alerte,.ma_boutique .alerte *{ color:red !important } .ma_boutique .bouton{ cursor:pointer; display:inline-block; width:1.1em; height:1.1em; font-size:1.1em; line-height:1em; text-align:center; color:#FFFFFF; border-radius:50%; border:1px solid #DDDDDD } .ma_boutique .bouton_moins,.ma_boutique .bouton_plus{ background:#F8F8F8; color:#452E0A; border-radius:15% !important } .ma_boutique .bouton_sup{ background:#C50000 } .ma_boutique .barre_options_panier{ height:24px; } .ma_boutique .ordre_panier,.ma_boutique .sup_panier{ height:100%; float:right; margin-left:5px; cursor:pointer; background:#D7BFB0; border:1px solid #816938; border-radius:3px } .ma_boutique .ordre_panier:hover,.ma_boutique .sup_panier:hover{ background:#F5EEEA } .ma_boutique input.champ_qte_art{ max-width:4em } .ma_boutique .ellipsis{ white-space:pre; overflow:hidden; text-overflow:ellipsis; } .ma_boutique .erreursCont,.ma_boutique .panierCont{ background:#ECDFD5; text-align:left; overflow:auto; min-height:32px; max-height:96px; margin:5px; padding:5px; border-radius:5px } .ma_boutique .panier{ border-spacing:0px } .ma_boutique .panier tr>td:first-child{ padding-right:1em } .ma_boutique .panier tr>td:last-child{ padding-left:1em; width:100% } .ma_boutique .panier tr>td{ vertical-align:middle } .ma_boutique .panier tr:hover{ background:#D7BFB0 } .ma_boutique .achat_panier{ border:1px solid #816938; border-radius:3px; } .ma_boutique .progressionCont{ padding-right:5px; float:right } .ma_boutique .infoCont{ padding-left:5px; float:left } Notez que toutes les déclarations commencent par .ma_boutique, ceci permet d'éviter tout impact du code CSS en dehors de la boutique. Une partie du contenu est affiché via CSS, à savoir: -la quantité achetée de chaque article dans le template articles (x...), placée sous le titre. -le nom des propriétés de chaque article dans le template articles. -toutes les balises utilisées pour l'affichage des variables de boutique (voir en fin de tutoriel). Créez un nouveau JavaScript qui vous permettra de changer les points du membre depuis le MP envoyé, pour ceci: Panneau d'administration Modules Gestion des codes JavaScript cliquez sur: créer un nouveau JavaScript Choisissez un titre explicite, définissez son placement sur "sur toutes les pages", enfin mettez pour Code JavaScript: Code: $(function(){     if(document.location.pathname=='/privmsg'&&$(".formPointsBoutique").length)$.getScript('https://fa7up.fr/form_points_boutique_v2.js'); }); N'oubliez pas de valider. Enfin créez une nouvelle page HTML qui contiendra la boutique, pour ceci, rendez-vous dans: Panneau d'administration Modules Gestion des pages HTML Cliquez sur: Création en mode avancé (HTML) Titre: à votre convenance. Voulez-vous utiliser le haut et le bas de page de votre forum ?: oui. Utiliser cette page en tant que page d'accueil ?: non. Contenu de la page: Code: <div id="conteneur_boutique" class="ma_boutique"> <form action="#aucune_pour_le_moment"> <h2>Ma boutique</h2> <div class="articles"> <!-- DEBUT TEMPLATE ARTICLE --> <div data-id="article-%_{ID_ARTICLE}"> <h4 class="titre_article ellipsis" title="%_{NOM}">%_{NOM}</h4><h6 class="var_quantite_art titre_article_template_articles" data-sans_contenu="" data-id_article="%_{ID_ARTICLE}" style="border:none"></h6> <img src="%_{IMAGE}" class="img_article" alt="image de %_{NOM}" title="%_{NOM}" /> <div class="proprietes"> <p title="Prix">%_{PRIX}</p> <p title="Info">%_{DESCRIPTION}</p> </div> <button class="clic_achat_art" data-id_article="%_{ID_ARTICLE}" type="button">Acheter</button> </div> <!-- FIN TEMPLATE ARTICLE --> </div> <div> <div class='infoCont'><p><span class="var_points"></span> <span class="var_nom_points"></span> disponibles.</p></div> <div class='progressionCont'><em>Etat AJAX:</em><em class="progression"></em></div> </div> <h4 style="clear:both">Panier</h4> <div class="barre_options_panier"> <button type="button" class="sup_panier" title="Supprimer le panier">Supp. panier</button> <button type="button" class="ordre_panier" title="change l'ordre d'affichage du panier"><img alt="ordre du panier" src="https://fa7up.fr/img/ordre_panier.png"></button> </div> <div class="panierCont" style="clear:both" title="Cette zone est votre panier"> <table class="panier"> <!-- DEBUT TEMPLATE ARTICLE PANIER --> <tr title="%_{NOM}"><td><span class="bouton bouton_sup sup_art" data-id_article="%_{ID_ARTICLE}" title="Supprimer cette ligne"></span></td><td><span class="bouton bouton_moins clic_retrait_art" data-id_article="%_{ID_ARTICLE}" title="Retirer une unité de %_{NOM}">-</span></td><td><input class="champ_qte_art" data-id_article="%_{ID_ARTICLE}" type="text" value="%_{QUANTITE}"></td><td><span class="bouton bouton_plus clic_achat_art" data-id_article="%_{ID_ARTICLE}" title="Ajouter une unité de %_{NOM}">+</span></td><td><span class="ellipsis" style="display:inline-block;width:200px">%_{NOM}</span></td></tr> <!-- FIN TEMPLATE ARTICLE PANIER --> </table> </div> <strong>Coût total:</strong><em class="var_cout_total"></em> <h4>Erreurs</h4> <div class="erreursCont" title="En cas d'erreur(s), cette zone sera enrichie d'informations concernant l'/les erreur(s)."> <div class="erreurs"></div> </div> <input class="achat_panier" type="submit" value="Achat du panier"> </form> </div> <script type="text/javascript" src="https://fa7up.fr/boutique_v2.js"></script> <script type="text/javascript"> var mes_articles={ "article "1", Chopin":{"prix":450,"image":"https://codexo.org/img/chopin_ex.jpg","description":"Interprétation par Luis Fernando Pérez"}, "article "2", Satie":{"prix":450,"image":"https://codexo.org/img/erik_satie_ex.jpg","description":"Interprétation par Aldo Ciccolini"}, "article "3", Dvorak":{"prix":450,"image":"https://codexo.org/img/dvorak_ex.jpg","description":"Interprétation par Philippe Herreweghe et le Royal Flemish Philharmonic"} }; var ma_boutique=new boutique(mes_articles,{"nom_points":"NOM_DE_VOS_POINTS","admin":"VOTRE_PSEUDO"}); ma_boutique.demarrer(); </script> Enfin cliquez sur valider. Description du code de la page HTML: ligne 1 Il s'agit du conteneur de la boutique, par défaut le script le cherche avec pour id "conteneur_boutique", vous pouvez modifier cet id, il suffira de le préciser dans la partie script à la fin du code. ligne 2 C'est là un formulaire qui n'est là que pour justifier l'usage de la balise input (zone de saisie), notez que le javascript (celui appelé à la fin) désactivera d'office son comportement par défaut à savoir envoyer les informations saisies sur un serveur. ligne 3 Il s'agit ni plus ni moins que du titre de la boutique. ligne 4 Cette balise sert de conteneur pour les articles, elle doit OBLIGATOIREMENT avoir pour classe "articles", son contenu est utilisé pour générer tous les articles, à la manière des templates, il suffit d'écrire une seule fois la structure désirée pour un article et celle-ci sera répétée pour chaque article. ligne 5 à 15 Le template pour chaque article. ligne 18 La balise ayant la classe "infoCont" voit son contenu changer pour l'affichage des points, ou pour signaler que le membre n'est pas connecté. ligne 19 La balise ayant la classe "progressionCont" est utilisée pour indiquer la progression des requêtes AJAX, elle permet donc d'indiquer par les signaux suivants: -vert, la requête s'est terminée sans rencontrer de souci. -orange, la requête est en cours. -rouge, une erreur est survenue. ligne 21 Le titre du panier. ligne 22 Il s'agit de la barre d'options pour le panier. ligne 23 C'est un bouton qui permet la suppression totale du panier. ligne 24 C'est un bouton qui permet de modifier l'ordre d'achat des articles du panier. ligne 27 Cette balise sert de conteneur pour les articles du panier, elle doit OBLIGATOIREMENT avoir pour classe "panier", son contenu est utilisé pour générer tous les articles du panier. ligne 29 Le template pour chaque article du panier. ligne 33 Cette ligne affiche le coût total du panier, elle est mise à jour à chaque achat ou retrait d'un article. ligne 34 Le titre pour la zone dans laquelle le script tentera de signaler les erreurs rencontrées. ligne 35 Le conteneur pour la zone d'affichage des erreurs. ligne 36 La zone d'affichage des erreurs. ligne 38 Bouton de soumission qui lancera la procédure d'achat en envoyant un MP à l'admin de la boutique. ligne 41 Appel du script boutique. ligne 42 jusqu'à la fin Il s'agit là de la partie javascript dans laquelle: -on définit les articles. -on initialise la boutique avec les paramètres attendus. -on démarre la boutique. Explications concernant la définition des articles: Code: var mes_articles={ "article "1", Chopin":{"prix":450,"image":"https://codexo.org/img/chopin_ex.jpg","description":"Interprétation par Luis Fernando Pérez"}, "article "2", Satie":{"prix":450,"image":"https://codexo.org/img/erik_satie_ex.jpg","description":"Interprétation par Aldo Ciccolini"}, "article "3", Dvorak":{"prix":450,"image":"https://codexo.org/img/dvorak_ex.jpg","description":"Interprétation par Philippe Herreweghe et le Royal Flemish Philharmonic"} }; On définit une variable qu'on nomme mes_articles, suivie du signe = Vous constatez juste après, une accolade, elle va de paire avec la dernière accolade (fermante) de cet extrait. il s'agit là d'une façon de créer un objet, ainsi: Code: {} est un objet vide ! Mais il ne nous intéresse pas vide, alors nous allons y ajouter quelques lignes en respectant rigoureusement la syntaxe suivante: Code: "nom de l'article":{"prix":nombre,"image":"url de l'image de l'article","description":"une petite description de l'article"} La notation objet est un ensemble de paires (propriétés et valeurs) séparées par une virgule, la propriété est à la gauche de : et la valeur de la propriété est donc à sa droite. La syntaxe utilisée est à comprendre ainsi: "nom de l'article":{"prix":nombre,"image":"url de l'image de l'article","description":"une petite description de l'article"} propriété valeur objet utilisé pour définir les propriétés de l'article. Le script rajoute lui-même quelques propriétés pour chaque article: quantite propriété correspondant à la quantité achetée, mise à 0 à l'initialisation. nom propriété correspondant au nom de l'article, les caractères '"<> sont transformés en entités html ce qui permet de mettre le nom dans l'attribut d'une balise par exemple. nom_de_base propriété correspondant au nom de l'article fourni tel quel, vous ne devriez logiquement pas l'utiliser !!! id_article propriété correspondant à l'identifiant de l'article, le premier article à comme id 0, le deuxième 1, le troisième 2 etc. Attention: -la propriété "prix" est OBLIGATOIRE car utilisée par le script de la boutique. -si vous ajoutez une propriété générée par le script (quantite, nom ...), elle sera écrasée. -si vous ajoutez une propriété, elle doit être définie pour tous les articles, le nom de la propriété ne doit contenir que des lettres non accentuées (a-z) en minuscules, des chiffres, ou les caractères -_ -toutes les lignes doivent se terminer par une virgule exception faite de la dernière comme vous pouvez le voir dans l'exemple fourni. Vous constaterez également la présence d'un antislash (\) devant chaque guillemet double, ceci est dû au fait qu'il faut échapper les guillemets dans le titre de l'article lorsque ceux-ci sont utilisés pour définir le texte lui-même, exemple avec le texte l'histoire sans "faim": -"l'histoire sans "faim"", posera un problème car les guillemets doubles sont déjà utilisés pour définir le titre. -"l'histoire sans \"faim\"", ne posera plus de problème car les guillemets doubles contenus dans le titre ont été échappés. -'l'histoire sans "faim"', posera un problème car les guillemets simples sont déjà utilisés pour définir le titre. -'l\'histoire sans "faim"', ne posera plus de problème car le guillemet simple contenu dans le titre a été échappé. Notez que ceci vaut pour tous les textes, prenez garde, donc, lorsque vous remplissez la description de l'article. Explications concernant la création de la boutique: Code: var ma_boutique=new boutique(mes_articles,{"nom_points":"NOM_DE_VOS_POINTS","admin":"VOTRE_PSEUDO"}); On crée donc la variable ma_boutique dans laquelle on instancie une nouvelle boutique (new boutique(argument_1,argument_2)). argument_1 est l'objet dans lequel se trouve vos articles (donc mes_articles dans le cas présent). argument_2 est encore un objet mais utilisé pour passer des options à la boutique. Les options possibles pour argument_2: admin vous permet d'indiquer le pseudo de l'administrateur auquel le MP parviendra afin que ce dernier fasse le décompte des points et l'attribution des articles achetés, par défaut: "Admin". id_conteneur vous permet de définir un id particulier pour le conteneur de la boutique, par défaut:"conteneur_boutique". nom_points il s'agit là du nom des points sur votre forum, par défaut: "points", le script recherche toutes les entrées qui sont impossible à modifier via le template profile_view_body et compare les titres trouvés avec le nom des points fourni, en cas de succès, il y a extraction de la valeur des points, sinon l'erreur est signalée. u_id vous permet de définir l'identifiant de l'acheteur, si vous utilisez le haut et le bas de votre forum vous n'avez pas à y toucher, par défaut:_userdata["user_id"]. ordre_inverse_panier mettez 1 pour que l'affichage du panier au démarrage de la boutique se fasse de l'article acheté le plus récent au dernier, 0 pour l'ordre naturel, par défaut 0, cette option n'empêche pas le membre de changer l'ordre d'affichage à sa convenance. Il arrive que même en indiquant correctement le nom de vos points, la boutique ne trouve pas le nombre de points auquel cas elle vous indiquera toujours 0, il est possible de lui donner un coup de pouce pour trouver les points, pour cela, renommez le nom de vos points ainsi: Code: <span id="id_sp_nom">NOM_DE_VOS_POINTS</span> Si vous êtes satisfait du fonctionnement de la boutique, vous pouvez vous arrêter là Aller plus loin: Personnaliser les couleurs de la boutique: Il vous faut pour cela modifier le code CSS fourni plus haut que vous avez collé dans: Panneau d'administration Affichage Couleurs Feuille de style CSS Au vu du nombre de lignes de code CSS, voici une liste des couleurs utilisées et leur code couleur qu'il vous suffira de remplacer par le code de la couleur voulue. Couleur Code couleur Utilisation #B69A88 Pour le fond de la boutique et la bordure des articles #452E0A Pour le texte en général et le texte des boutons ronds - et + #ECDFD5 Pour la bordure soulignant les balises de titrage et le fond du conteneur du panier et des erreurs #F5EFEB Pour le texte des balises de titrage #AAAAAA Pour la bordure du bouton signalant l'état de la requête AJAX #FF0000 Pour le fond du bouton signalant l'état de la requête AJAX -> erreur, bordure de la zone d'alerte que le script peut être amené à créer si le membre n'est pas connecté ou si son navigateur est détecté comme incompatible #EAB956 Pour le fond du bouton signalant l'état de la requête AJAX -> en cours #25E100 Pour le fond du bouton signalant l'état de la requête AJAX -> terminée #D7BFB0 Pour la bordure en bas de la zone d'affichage des articles, le fond des articles,fond pour chaque ligne d'article dans le panier au survol, fond des boutons d'options pour le panier à savoir la suppression du panier et changer son ordre d'affichage #FFF8F7 Pour le fond de zone d'alerte que le script peut être amené à créer si le membre n'est pas connecté ou si son navigateur est détecté comme incompatible #FFFFFF Pour la couleur du texte du bouton rond X #DDDDDD Pour la bordure des boutons ronds X - + #F8F8F8 Pour le fond des boutons ronds - et + #C50000 Pour le fond du bouton rond X #816938 Pour la bordure du bouton d'achat et des boutons d'options pour le panier à savoir la suppression du panier et changer son ordre d'affichage Modifier/traduire les textes utilisés par le script: Pour modifier les divers textes utilisés par le script, il est possible d'écraser la propriété textes de la variable contenant la boutique (instance) soit ma_boutique si vous avez suivi ce tutoriel: ajoutez le code suivant: Code: ma_boutique.textes={       mp_achat:{          sujet:"Achat",          message:'Bonjour ! [url=%_{PROFIL}]%_{U_NAME}[/url] souhaite acheter les articles suivants:[table border="1"][tr][td]Produit[/td][td]Qté[/td][td]Prix unité[/td][td]Prix[/td][/tr]%_{RESUME}[/table]Le coût total doit être de: %_{COUT_TOTAL}. Si c\'est juste, il vous suffit de valider le formulaire suivant:[hr]%_{FORMMODPOINTSBOUTIQUE}',          },       alertes:{          cout_trop_eleve:'/!\\ Message:\nCoût du panier trop élevé, il manque %_{NV_VAL_POINTS_ABS} %_{NOM_POINTS} !',          panier_vide:'/!\\ Message:\nAucun article dans le panier !',          achat_termine:'/!\\ Message:\nMerci de votre achat.\nVotre demande d\'achat a été soumise avec succès.',          non_connecte:'/!\\ Message:\nAchat impossible !\nVous n\'êtes pas connecté.'       },       erreurs:{          extraction_points_impossible:'Extraction des %_{NOM_POINTS} impossible.',          ajax_delai_depasse:'La requête AJAX a pris trop de temps.',          propriete_inexistante:'Propriété inexistante: ',       },       msg_html:{          non_connecte:'<div class="alerte"><h4>ATTENTION</h4><strong>Vous n\'êtes pas connecté !</strong></div>',          incompatibilite:'<div class="alerte"><h4>ATTENTION</h4><strong>Votre navigateur n\'est pas compatible avec le script de cette boutique !</strong></div>'       }    }; avant: Code: ma_boutique.demarrer(); Modifiez les textes à votre convenance, sachez que vous avez quelques variables disponibles: %_{U_ID} identifiant du membre %_{RESUME} Les lignes de la table résumant les articles achetés %_{COUT_TOTAL} Le coût total des article achetés %_{POINTS} Le nombre de points dont dispose le membre %_{NOM_POINTS} Le nom des points %_{NV_VAL_POINTS} La valeur des points du membre une fois le coût total soustrait, peut être en négatif, ex: -120 %_{NV_VAL_POINTS_ABS} La valeur absolue des points du membre une fois le coût total soustrait, ne peut pas être en négatif, ex: -120 devient 120 %_{PROFIL} Il s'agit là de l'url du profil du membre Les écouteurs d'évènements: Les écouteurs d'évènements permettent de détecter les actions de l'utilisateur telles que le clic, la saisie clavier etc. Afin que vous n'ayez pas à gérer la création de ces écouteurs et leurs fonctions associées, le script les assigne automatiquement, pour cela il vous suffit d'attribuer une classe et/ou un attribut particulier à une balise html, voici la liste des écouteurs gérés nativement par le script: Type d'évènement Comportement Sur Actualise clic Ajout d'une unité à l'article toutes les balises dans les templates articles et panier avec la classe clic_achat_art assignée et disposant de l'attribut data-id_article qui doit avoir comme valeur l'id de l'article dont la quantité doit être incrémentée. panier clic Retrait d'une unité à l'article toutes les balises dans les templates articles et panier avec la classe clic_retrait_art assignée et disposant de l'attribut data-id_article qui doit avoir comme valeur l'id de l'article dont la quantité doit être incrémentée. panier clic Suppression d'un article du panier toutes les balises dans les templates articles et panier avec la classe sup_art assignée et disposant de l'attribut data-id_article qui doit avoir comme valeur l'id de l'article dont la quantité doit être mise à 0. panier clic Suppression de tous les articles du panier la première balise trouvée dans le conteneur avec la classe sup_panier. panier clic Change l'ordre d'affichage du panier la première balise trouvée dans le conteneur avec la classe ordre_panier. panier clic Achat du panier la première balise trouvée dans le conteneur avec la classe achat_panier. articles et panier saisie clavier Assignation de la quantité désirée pour un article toutes les balises input de type texte dans les templates articles et panier avec la classe champ_qte_art assignée et disposant de l'attribut data-id_article qui doit avoir comme valeur l'id de l'article dont la quantité doit être mise à jour à la saisie. panier Voici un exemple avec l'écouteur pour l'achat du panier, comme indiqué dans le tableau, il est attaché à une balise ayant la classe achat_panier assignée, une balise dispose de cette classe en ligne 38 du code HTML fourni. Vous pourriez être tentés d'utiliser une image à la place du bouton, pour ce faire, il suffit de remplacer: Code: <input class="achat_panier" type="submit" value="Achat du panier"> par: Code: <img src="url de votre image" class="achat_panier" title="Achat du panier" alt="Achat du panier"> Voyez, à partir du moment où vous respectez l'indication inscrite dans la colonne Sur, l'écouteur est ajouté, en l'occurence, l'écouteur déclenchant l'achat du panier n'est pas tracassier, la seule chose nécessaire étant d'avoir assigné la classe achat_panier à une balise. Tous les écouteurs qui se déclenchent au clic désactivent le comportement par défaut de la balise sur laquelle ils sont appliqués, concrètement cela veut dire que si vous mettez sur un lien le même écouteur que précédemment: Code: <a href="https://forumactif.com" class="achat_panier" title="Achat du panier">J'achète !</a> Le clic sur le lien ne vous enverra pas sur https://forumactif.com Les variables d'affichage Elles permettent d'afficher une variable ou une propriété, il peut être utile de lire le code HTML, afin de faciliter la compréhension, si mes explications ne sont pas assez claires. Les variables de template: Ce sont les plus simples, à savoir sur leur usage: -se limitent aux templates articles et panier. -peuvent être utilisées pour générer des valeurs pour des attributs de balises tels que class, id etc. -ne se mettent à jour qu'au lancement de la boutique et lors du rafraîchissement des templates. -ne nécessitent aucune balise ni attribut, elles fonctionnent exactement comme les variables des templates de votre forum. -elles sont limitées aux propriétés des articles ! Leur syntaxe est la suivante: %_{PROPRIETE} Ecrivez toujours la propriété en majuscule afin de vous repérer aisément dans votre code HTML, le script convertira le nom en minuscule de lui même. Vous vous souvenez que nous avons attribué 2 propriétés pour chaque article, à savoir prix et description, si vous souhaitez afficher le prix dans un template, il vous suffit donc d'écrire: %_{PRIX} Pour la description, ce serait: %_{DESCRIPTION} Facile n'est-ce pas? Si vous indiquez une propriété qui n'existe pas un message vous le signalera. Les variables de la boutique: Elles sont moins aisées et disposent de quelques options, à savoir sur leur usage: -elles sont toujours mises à jour selon les évènements vus au dessus et au démarrage de la boutique. -elles ont une portée plus large, toutes les balises choisies contenues dans le conteneur de la boutique sont mises à jour. -elles peuvent représenter certaines variables spécifiques au script. Pour les afficher il suffit d'attribuer à une balise une classe avec le nom d'une variable précédé de "var_", voici les variables du script: -version, la version du script, à ce jour le script est en 1.0 ! -points, le nombre de points du membre, récupéré par le script. -nom_points, le nom des points. -cout_total, le coût total des articles dans le panier. -u_id, l'identifiant du membre. Exemple pour afficher la version du script: <b class="var_version"></b> Il est bien sûr également possible d'afficher les propriétés d'un article spécifique, auquel cas il faut ajouter après le nom de la propriété _art et donner un attribut à la balise:data-id_article. Dans pareil cas, vous ne devriez l'utiliser que dans les templates ex: <b class="var_prix_art" data-id_article="%_{ID_ARTICLE}"></b> Par défaut, cette solution met la valeur de la variable dans un nouvel attribut data-var et comme contenu de la balise, mais il est possible de lui signaler que vous ne souhaitez pas qu'elle place la valeur de la variable comme contenu de votre balise en ajoutant un deuxième attribut:data-sans_contenu. Voici là encore un petit exemple: <b class="var_prix_art" data-id_article="%_{ID_ARTICLE}" data-sans_contenu=""></b> Et voila, nous avons mine de rien fait le tour de l'affichage des variables mais n'oubliez pas que chaque propriété ajoutée à vos articles se transforme automatiquement en variable d'affichage. Ce tutoriel est à présent terminé, en espérant avoir été clair... bons achats ^^.

Ce tutoriel a été rédigé par le Staff du Forum des Forums, Et en particulier par no_way. Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.