Créer sa boutique
Page 1 sur 1 • Partagez
Créer sa boutique
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. ![]() -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.
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:
Notez que toutes les déclarations commencent par .ma_boutique, ceci permet d'éviter tout impact du code CSS en dehors de la boutique. ![]() -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:
![]() Choisissez un titre explicite, définissez son placement sur "sur toutes les pages", enfin mettez pour Code JavaScript:
Enfin créez une nouvelle page HTML qui contiendra la boutique, pour ceci, rendez-vous dans:
![]() 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:
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:
Mais il ne nous intéresse pas vide, alors nous allons y ajouter quelques lignes en respectant rigoureusement la syntaxe suivante:
![]() 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:
![]() -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.
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:
![]() 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:
Si vous êtes satisfait du fonctionnement de la boutique, vous pouvez vous arrêter là ![]()
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.
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:
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:
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:
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. ![]()
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:
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:
Pour la description, ce serait:
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:
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:
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:
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. |
Dernière édition par no_way le Sam 25 Nov 2017 - 1:39, édité 4 fois (Raison : Mise à jour des liens)
no_way- Aidactif
- Messages : 2206
Inscrit(e) le : 26/03/2010
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum