Système de Boutique avec filtrage automatique
Salut !
Alors, ce LS vous offrira un système de boutique. Il est composé d'une partie "menu", d'une partie "sélection des articles" et d'une partie "panier".
Le menu permet à l'utilisateur de filtrer les articles pour avoir la sélection des articles qui l'intéresse (toutes les armes qui coûtent moins de 500$ par exemple).
La sélection des articles est la liste des articles disponibles où vous pouvez indiquer le nombre d'articles à acheter et cliquer sur acheter pour que les articles s'ajoutent à votre panier.
Le panier comporte la liste des articles que vous avez choisis ainsi que le total que cela vous coûte. Vous avez l'option d'effacer le contenu du panier ainsi que d'ajouter/retirer un article.
Le système de boutique, une fois le panier rempli, vous permet de cliquer sur "soumettre votre panier", ce qui va poster un message contenant votre commande directement dans le sujet concerné.
PS : Quand je parle d'articles, je parle des trucs à vendre dans la boutique
Pour voir la Boutique en direct : cliquez ici.
Pour voir l'aperçu de la Boutique en image : cliquez ici.
Ce LS est en quatre parties.
- Tout d'abord, nous allons créer la boutique dans une page HTML.
- Ensuite, nous allons voir comment la personnaliser.
- Puis, nous allons activer l'autorisation de recevoir des formulaires externes pour que le formulaire fonctionne.
- Enfin, nous allons mettre la boutique dans un iframe pour la rendre accessible.
Mettre un crédit vers Never-Utopia est obligatoire.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^
1. Créer la boutique (Page HTML)
Pour commencer, nous allons créer une page HTML dans laquelle nous allons mettre le code de notre boutique.
Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES PAGES HTML
Ensuite, on clique sur le bouton vert "Création en mode avancé (HTML)".
On choisit un titre quelconque.
On coche "Non" aux questions "Voulez-vous utiliser le haut et le bas de page de votre forum ?" et "Utiliser cette page en tant que page d'accueil ?".
On met le code suivant et on enregistre :
- Code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<meta name="author" content="Onyx" />
<title>Boutique</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css' />
<style type="text/css">
:root {
/*Couleur background principal*/
--bg-main: #efefef;
/*Couleur background du titre*/
--bg-top: #808080;
/*Couleur background des articles*/
--bg-article: #d3d3d3;
/*Couleur background du panier*/
--bg-panier: #e3e3e3;
/*Couleur du texte*/
--color-text: #707070;
/*Couleur du texte pale*/
--color-text-light: #efefef;
}
/*Corps*/
body {
margin: 0px;
}
/*Le bloc entier de la boutique*/
#boutique {
position: relative;
margin: auto;
max-width: 850px;
background: var(--bg-main);
font-size: 1em;
font-family: 'Times New Roman';
color: var(--color-text);
text-align: center;
}
/*Le bloc du titre de la boutique*/
.boutique_top {
width: 100%;
background: var(--bg-top);
padding: 10px;
font-size: 2em;
text-align: center;
color: var(--color-text-light);
font-family: 'Dancing Script';
box-sizing: border-box;
}
.boutique_reste {
display: flex;
flex-wrap: wrap;
}
/*Menu de gauche*/
#menu {
text-align: left;
padding: 5px;
width: 150px;
border-right: 1px solid #808080;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
box-sizing: border-box;
}
/*Les boutons de tri*/
.mbutton button, .mbutton {
display: block;
margin: 10px auto 0px auto;
}
.mlist {
margin: 15px 0px 0px 10px;
}
/*Titres des catégories*/
.mlist > span {
display: inline-block;
margin-bottom: 5px;
border-bottom: 1px solid #707070;
font-size: 1.1em;
}
/*Liste des options des catégories*/
#menu ul {
margin: 0px;
list-style-type: none;
padding: 0px;
}
/*Option des catégories*/
#menu ul li {
}
/*Partie de droite*/
.middle {
width: 700px;
margin: 10px auto;
text-align: center;
}
#contenu_shoponglet_Autre {display: none;}
.contenu_shoponglet {
min-height: 450px;
max-height: 650px;
overflow: auto;
display: flex;
margin-bottom: 15px;
flex-wrap: wrap;
align-content: flex-start;
justify-content: center;
}
.contenu_shoponglet > div {
margin: 10px;
}
/*Bloc qui contient l'article*/
.article_bloc {
text-align: center;
background: var(--bg-article);
width: 130px;
padding: 5px;
color: #565656;
}
/*Image de l'article*/
.article_bloc > img:first-child {
width: 100px;
height: 100px;
}
/*Nom de l'article*/
.article_name {
padding: 5px 0px;
font-size: 1.02em;
font-family: 'Cambria';
font-weight: bold;
text-transform: uppercase;
}
/*Input du nombre d'article à acheter*/
input[type="number"] {
display: inline-block;
max-width: 50px;
text-align: center;
margin-bottom: 2px;
}
/*Partie du panier*/
.bottom {
margin: auto;
background: var(--bg-panier);
text-align: center;
overflow: hidden;
}
/*Titre du panier*/
.bottom_top {
font-size: 1.8em;
font-family: 'Dancing Script', script;
text-align: center;
padding: 10px;
background: var(--bg-top);
color: var(--color-text-light);
}
/*Panier visible*/
#vuepanier {
margin: 10px auto;
height: 120px;
padding: 0px 5px;
overflow: auto;
}
/*Bloc objet dans le panier*/
.article_input {
margin-bottom: 5px;
background: var(--bg-article);
padding: 2px;
text-align: left;
}
/*Le bloc du nom et prix de l'objet dans le panier*/
.articleinsidepanier {
padding-left: 5px;
}
/*Les boutons dans le panier*/
.article_input button, .input_nb_object {
display: inline-block;
margin-right: 2px;
}
/*La quantité de l'objet dans le panier*/
.input_nb_object {
width: 40px;
text-align: center;
}
/*Bouton effacer et soumettre le panier*/
#soumettrepanier, #effacerpanier {
display: inline-block;
margin: 10px auto 5px auto;
}
/*Bouton soumettre le panier*/
#effacerpanier {
margin-right: 15px;
}
/*Credit*/
.credits {
display: inline-block;
font-size: 12px;
position: absolute;
width: 200px;
bottom: 2px;
left: 5px;
text-align: left;
text-decoration: none;
color: #454545;
}
.credits:hover {
color: #000000;
}
/* Sur les écrans de moins de 700px (cellulaires) */
@media (max-width: 700px) {
#menu {
width: 100%;
border-right: none;
border-bottom: 1px solid #808080;
}
.middle {
width: 100%;
}
.contenu_shoponglet {
max-height: none;
}
}
</style>
</head>
<body>
<form enctype="multipart/form-data" name="post" method="post" action="/post" id="boutique" onsubmit="CompleteMessage()" target="_blank">
<div class="boutique_top">Boutique Alibaba</div>
<div class="boutique_reste">
<!-- DÉBUT DU MENU POUR FILTRER -->
<div id="menu">
<div class="mbutton">
<button id="trier2" type="button" onclick="notriage()">Réinitialiser les filtres</button>
<button id="trier" type="button" onclick="triage()">Filtrer les Articles</button>
</div>
<!-- DÉBUT CATÉGORIE TYPE -->
<div class="mlist">
<span>Type</span>
<ul>
<!-- OPTION #1 -->
<li>
<input type="checkbox" name="Arme" />
Armes
</li>
<!-- OPTION #2 -->
<li>
<input type="checkbox" name="Armure" />
Armures
</li>
<!-- OPTION #3 -->
<li>
<input type="checkbox" name="Accessoire" />
Accessoires
</li>
<!-- OPTION #4 -->
<li>
<input type="checkbox" name="Objet" />
Objets
</li>
<!-- OPTION #5 -->
<li>
<input type="checkbox" name="Magie" />
Magie
</li>
</ul>
</div>
<!-- FIN CATÉGORIE TYPE -->
<!-- DÉBUT CATÉGORIE PRIX -->
<div class="mlist">
<span>Prix</span>
<ul>
<!-- OPTION #1 -->
<li>
<input type="checkbox" name="Max99" />
Moins que 100
</li>
<!-- OPTION #2 -->
<li>
<input type="checkbox" name="100_499" />
[100 et 499]
</li>
<!-- OPTION #3 -->
<li>
<input type="checkbox" name="500_999" />
[500 et 999]
</li>
<!-- OPTION #4 -->
<li>
<input type="checkbox" name="1000_5000" />
[1000 et 5000]
</li>
<!-- OPTION #5 -->
<li>
<input type="checkbox" name="Min5000" />
Plus de 5000
</li>
</ul>
</div>
<!-- FIN CATÉGORIE PRIX -->
<!-- DÉBUT CATÉGORIE RARETÉ -->
<div class="mlist">
<span>Prix</span>
<ul>
<!-- OPTION #1 -->
<li>
<input type="checkbox" name="Commun" />
Commun
</li>
<!-- OPTION #2 -->
<li>
<input type="checkbox" name="Peucommun" />
Peu commun
</li>
<!-- OPTION #3 -->
<li>
<input type="checkbox" name="Rare" />
Rare
</li>
<!-- OPTION #4 -->
<li>
<input type="checkbox" name="Tresrare" />
Très rare
</li>
<!-- OPTION #5 -->
<li>
<input type="checkbox" name="Unique" />
Unique
</li>
</ul>
</div>
<!-- FIN CATÉGORIE RARETÉ -->
</div>
<!-- FIN DU MENU POUR TRIER -->
<div class="middle">
<div class="contenu_shoponglet" id="contenu_shoponglet_Tout">
<!-- DÉBUT ARTICLE -->
<div class="Arme Max99 Commun">
<div class="article_bloc">
<img src="URL_IMAGE" /><br />
<span class="article_name">Nom de l'article</span><br />
Type - Rareté<br />
Prix : <span class="nbprix">400</span>$<br /><br />
<input type="number" value="1" min="1" /><br />
<button class="ajoutprix" type="button">Acheter</button>
</div>
</div>
<div class="Arme Max99 Commun">
<div class="article_bloc">
<img src="URL_IMAGE" /><br />
<span class="article_name">Nom de l'article</span><br />
Type - Rareté<br />
Prix : <span class="nbprix">400</span>$<br /><br />
<input type="number" value="1" min="1" /><br />
<button class="ajoutprix" type="button">Acheter</button>
</div>
</div>
<!-- FIN ARTICLE -->
</div>
<div class="contenu_shoponglet" id="contenu_shoponglet_Autre">
</div>
<div class="bottom">
<div class="bottom_top">Mon Panier - <span id="total2">0</span>$</div>
<div id="vuepanier">Mon panier est vide.</div>
</div>
<button id="effacerpanier" type="button" onclick="effacer()">Effacer mon panier</button>
<input type="submit" id="soumettrepanier" value="Soumettre mon panier" name="post" />
<textarea name="message" id="message" style="display:none"></textarea>
<input type="hidden" value="reply" name="mode" />
<input type="hidden" value="70" name="t" />
<a class="credits" href="https://www.never-utopia.com/forum" target="_blank">Never-Utopia</a>
</div>
</div>
</form>
<script type="text/javascript">
//<!--
let totalbase = 0;
$('#total2').html(totalbase);
let totaltotal = 0;
// Quand on ajoute un article au panier
$('.ajoutprix').click(function() {
let prix = parseInt($(this).parent().find('.nbprix:first').html());
let qt = parseInt($(this).parent().find('input:first').val());
let nomarticle = $(this).parent().find('.article_name:first').html();
if ($('#vuepanier').find('.thename:contains("'+nomarticle+'")').length > 0) {
$('#vuepanier').find('.thename:contains("'+nomarticle+'"):first').closest('.article_input').remove();
}
let phrase = "<div class='article_input'>" +
"<button type='button' class='button_delete' onclick='deleteqtarticle(this)'>x</button>" +
"<button type='button' class='button_moins' onclick='removeqtarticle(this)'>-</button>" +
"<input type='text' class='input_nb_object' value='"+qt+"' data-prix='"+prix+"' onchange='calcultotal()'></input>" +
"<button type='button' class='button_plus' onclick='addqtarticle(this)'>+</button>" +
"<span class='articleinsidepanier'><span class='thename'>"+nomarticle+"</span>" +
" à <span class='thepriceinside'>"+prix+"</span>$</div>";
if ($('#vuepanier').html() != "Mon panier est vide.") {
phrase = $('#vuepanier').html() + phrase;
}
$('#vuepanier').html(phrase);
calcultotal();
});
// Ajouter un article déjà dans le panier
function addqtarticle(learticle) {
let articleval = parseInt($(learticle).prev().val());
$(learticle).prev().val((articleval + 1));
calcultotal();
}
// Enlever un article déjà dans le panier
function removeqtarticle(learticle) {
let articleval = parseInt($(learticle).next().val());
$(learticle).next().val((articleval - 1));
if (articleval == 1) {
$(learticle).parent().remove();
}
calcultotal();
}
// Supprimer un article déjà dans le panier
function deleteqtarticle(learticle) {
$(learticle).parent().remove();
calcultotal();
}
// Fonction pour calculer
function calcultotal() {
totaltotal = 0;
$('.article_input').each(function(){
let leprix = parseInt($(this).find('.input_nb_object:first').attr('data-prix'));
let lenb = parseInt($(this).find('.input_nb_object:first').val());
totaltotal = totaltotal + (leprix*lenb);
});
if ($('#vuepanier').html().length < 1) {
$('#vuepanier').html("Mon panier est vide.");
$('#total2').html(totalbase);
}
else {
$('#total2').html(totaltotal);
}
}
// Fonction pour effacer le panier
function effacer() {
$('#vuepanier').html("Mon panier est vide.");
$('#total2').html(totalbase);
}
// Fonction pour poster le message
function CompleteMessage() {
let thetotalprice = totaltotal;
let lemessage = "Bonjour,<br /><br />J'aimerais acheter les articles suivants s'il vous plaît :<br />";
$('.article_input').each(function(){
let theprice = parseInt($(this).find('.input_nb_object:first').attr('data-prix'));
let thesupername = $(this).find('.thename:first').html();
let thequant = parseInt($(this).find('.input_nb_object:first').val());
lemessage = lemessage + "<br /> - "+thequant+" "+thesupername+" à "+theprice+"$";
});
lemessage = lemessage + "<br /><br />Le coût total de ma commande est de : "+thetotalprice+"$.";
$('#message').val(lemessage);
}
//-->
</script>
<script type="text/javascript">
//<!--
// Nombre de catégories
let nbtype = $('#menu').find('ul').length;
// Fonction pour effacer le tri
function notriage() {
$('#menu').find('input:checked').prop('checked', false);
$('#contenu_shoponglet_Tout').css('display', 'flex');
$('#contenu_shoponglet_Autre').css('display', 'none');
}
// Fonction du tri
function triage() {
// On se débarrasse des articles déjà triés
$('#contenu_shoponglet_Autre').html('');
// Si aucune case est cochée, on a l'affichage de base
if ($('#menu').find('input:checked').length < 1) {
notriage();
}
else {
// Tableau qui va contenir toutes les cases cochées
let validation = [];
/// Pour chaque catégorie on regarde s'il y a les cases cochée et on les met dans le tableau par catégorie
for (i=0; i < nbtype; i++) {
validation[i] = [];
let lescases = $('#menu ul').eq(i).find('input:checked');
for (y=0; y < lescases.length; y++) {
validation[i][y] = lescases.eq(y).attr('name');
}
}
// Pour chaque objet, on va faire la validation pour voir si on la prend
let lesarticles = $('#contenu_shoponglet_Tout > div');
// Pour chaque article
for (i=0; i < lesarticles.length; i++) {
let leok = 'No';
let learticle = lesarticles.eq(i);
// On regarde chaque catégorie
for (y=0; y < nbtype; y++) {
// Si la catégorie a des cases cochées, on autorise si l'article a la d'une des class
if (validation[y].length > 0) {
let leok1 = 'No';
for (x=0; x < validation[y].length; x++) {
if (learticle.hasClass(validation[y][x])) {
leok1 = "Oui";
x = validation[y].length;
}
}
if (leok1 == 'No') {
y = nbtype;
leok = 'No';
}
else {
leok = 'Oui';
}
}
}
// L'objet fait partie des options, on l'ajoute dans la liste d'objets triés
if (leok == 'Oui') {
$('#contenu_shoponglet_Autre').append(learticle.clone(true));
}
}
// On fait disparaître la liste des objets pour apparaître celle des objets triés
$('#contenu_shoponglet_Tout').css('display', 'none');
$('#contenu_shoponglet_Autre').css('display', 'flex');
//S'il y a 0 article à droite après le tri, on dit qu'il y a 0 résultat
let pasarticle = $('#contenu_shoponglet_Autre').children().length;
if (pasarticle < 1) {
$('#contenu_shoponglet_Autre').html('Aucun résultat ne correspond à votre recherche.');
}
}
}
//-->
</script>
</body>
</html>
Lorsque vous modifiez votre formulaire, il faut cliquer sur le triple engrenage (
), pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.
), pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.Une fois le code mis et enregistré, vous aurez une petite modification à faire.
Vous devrez créer un sujet, sur votre forum, où les gens pourront passer leurs commandes. Puis, vous regardez l'adresse de la page. Juste après le nom de votre forum, il y aura ceci : "/t" avec un nombre qui suit. Le nombre correspond à l'id spécifique de ce sujet.
Vous devez copier ce nombre et venir remplace le 70 à cet endroit :
- Code:
<input type="hidden" value="70" name="t" />
Cela va permettre que le message des utilisateurs de la boutique soit posté dans le bon sujet.
2. Personnaliser la boutique
Alors, si on résume, la boutique est composé d'une partie "menu", d'une partie "sélection des articles" et d'une partie "panier".
Le menu permet à l'utilisateur de trier les articles pour avoir la sélection d'articles qui l'intéresse (toutes les armes qui coûtes moins de 500$ par exemple). La sélection d'articles est la liste des articles disponibles où vous pouvez indiquer le nombre d'articles à acheter et cliquer sur acheter pour que les articles s'ajoutent à votre panier. Le panier comporte la liste des articles que vous avez choisis ainsi que le total que cela vous coûte. Vous avez l'option de réinitialiser le panier.
Dans le menu, il y a plusieurs catégories et chaque catégorie a un certain nombre d'options.
Voilà un exemple de 1 catégorie avec 5 options :
- Code:
<!-- DÉBUT CATÉGORIE RARETÉ -->
<div class="mlist">
<span>Prix</span>
<ul>
<!-- OPTION #1 -->
<li>
<input type="checkbox" name="Commun" />
Commun
</li>
<!-- OPTION #2 -->
<li>
<input type="checkbox" name="Peucommun" />
Peu commun
</li>
<!-- OPTION #3 -->
<li>
<input type="checkbox" name="Rare" />
Rare
</li>
<!-- OPTION #4 -->
<li>
<input type="checkbox" name="Tresrare" />
Très rare
</li>
<!-- OPTION #5 -->
<li>
<input type="checkbox" name="Unique" />
Unique
</li>
</ul>
</div>
<!-- FIN CATÉGORIE RARETÉ -->
Le premier span est le nom de la catégorie. Ensuite, on a une liste qui contient les options.
Ensuite, chaque option est sous cette forme :
- Code:
<!-- OPTION # -->
<li>
<input type="checkbox" name="Unique" />
Unique
</li>
Dans le "name" du champ à cocher (le "input"), vous avez le mot "Unique".
Ce mot, "Unique", permet d'identifier cette option et permettra aussi d'identifier l'article qui y appartiendra alors il est important de prendre en note comment c'est écrit et de s'assurer que c'est la seule option qui a ce nom.
Le "name" ne peut pas contenir d'espace, de guillemet, d'apostrophe, de ponctuation ou de caractères spéciaux.
Donc si je résume rapidement, chaque option à son propre "name" qui appartient uniquement à cette option et qui ne doit pas se répéter ailleurs.
Ensuie, on passe à la section où il y a tous les articles (contenu d'onlglet "Tout"). Vous y trouverez des articles sous cette forme :
- Code:
<div class="Arme Armure Max99 Commun">
<div class="article_bloc">
<img src="URL_IMAGE" /><br />
<span class="article_name">Nom de l'article</span><br />
Type - Rareté<br />
Prix : <span class="nbprix">400</span>$<br /><br />
<input type="number" value="1" min="1" /><br />
<button class="ajoutprix" type="button">Acheter</button>
</div>
</div>
Vous voyez que la classe de la première div contient plusieurs classes :
- Code:
<div class="Arme Armure Max99 Commun">
Ces classes correspondent aux options auxquelles l'article appartient. Du coup, quand vous créez votre article, vous devez vous rendre dans les options et regarder quel "name" vous avez mis pour identifier les options auxquelles l'article appartient et vous le mettez dans la classe de l'article.
Un article peut appartenir à plusieurs options de catégories différentes et même d'une même catégorie.
Ici, j'ai 3 classes parce que l'article appartient à 4 options, soit "Arme", "Armure", "Max99" et "Commun". Cela veut dire que l'article sera sélectionné si on coche une ou plusieurs des options : "Arme", "Armure", "Moins de 100$" et "Commun".
Vous pouvez changez l'image de l'article en mettant le lien de votre image dans "URL IMAGE".
Vous pouvez également changer le nom de l'article et ses attributs (Type, rareté).
Vous devez remplacer le XXX par le prix individuel (en chiffres, tous collés) de l'article.
Avec ces informations, vous devriez être capable de personnaliser le reste par vous-même, soit optimiser le menu avec les catégories et options que vous voulez ainsi qu'ajouter les articles
3. Activer les formulaires externes
Il y a une vérification par Forumactif qui a pour but d'éviter le spam et qui bloque les messages créés dans des formulaires qui ne sont pas ceux de base de Forumactif. Du coup, si vous ne suivez pas cette étape, le formulaire rempli vous retournera sur une page qui dira "erreur technique n°230" à la place d'envoyer directement le message.
Pour éviter cela, vous devez vous rendre sur :
> Panneau d'administration
> > Général
> > > Forum
> > > > Sécurité
Et vous devez cocher "Non" à la question "Interdire les formulaires non officiels à poster des messages et messages privés sur le forum". Vous enregistrez et c'est fait !
L'erreur n°230 ne devrait maintenant plus vous causer problème ~
4. Mettre la boutique dans un iframe
Maintenant que la page HTML est créée avec la boutique, il faut la mettre accessible aux membres.
Pour cela, vous devez vous rendre là où vous voulez que la boutique soit et y mettre le code suivant :
- Code:
<iframe style="display: block; height: 1000px; width: 850px; margin: auto;" src="LIEN DE LA PAGE HTML" frameborder="0"></iframe>
Comme vous pouvez le deviner, il faut mettre le lien de la page HTML là où c'est écrit. Mais peut-être que vous vous demandez d'où sort ce lien? Ce n'est pas trop compliqué ^^
Quand on va dans la gestion de nos pages HTML, la dernière qui a été enregistrée (donc normalement, votre boutique), se trouve en haut de la liste. Il vous suffit de copier l'url de votre page HTML et de la mettre là où nous l'avons vu ci-haut. C'est vraiment écrit "URL DU LIEN", alors vous ne pouvez pas vous tromper
Il se peut que vous ayez à modifier la largeur (width) ou la hauteur (height) pour éviter qu'il y ait des barres de défilement (scroll)
C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous avez besoin d'aide pour personnaliser le code.
À plus !
Dernière édition par Onyx le Mar 21 Sep 2021 - 5:29, édité 26 fois
J'avais des trucs à faire cet aprem mais au lieu de ça j'ai juste 
