Salut!
Alors voilà les codes :
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="Onyx" />
<title>Boutique</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
<link href='https://fonts.googleapis.com/css?family=Dancing+Script|Libre+Baskerville' rel='stylesheet' type='text/css' />
<style type="text/css">
/*Corps*/
body {
margin: 0px;
background: url(https://i.servimg.com/u/f96/20/01/80/55/fond2111.jpg) center;
background-attachment: fixed;
}
/*Le bloc entier de la boutique*/
#boutique {
position: relative;
padding-bottom: 10px;
margin: auto;
width: 600px;
font-size: 14px;
font-family: 'Times New Roman';
color: #6d80a7;
text-align: center;
background: #232937;
border-left: 5px solid #6d80a7;
border-right: 5px solid #6d80a7;
box-shadow: 0 0 10px #000;
}
/*Le bloc du titre de la boutique*/
#boutique_top {
padding: 10px;
font-size: 26px;
font-family: 'Dancing Script', script;
text-align: center;
border-bottom: 1px solid #6d80a7;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
}
/*Menu de gauche*/
#menu {
float: left;
text-align: left;
padding-top: 5px;
width: 150px;
height: 430px;
padding-left: 5px;
border-right: 1px solid #6d80a7;
}
/*Les boutons de tri*/
#trier, #trier2 {
display: block;
background: #6d80a7;
border: none;
padding: 5px 10px;
color: #1a1f2a;
margin: auto;
box-shadow: 2px 2px 2px #202020;
cursor: pointer;
border-radius: 2px;
}
/*Les boutons de tri*/
#trier:hover, #trier2:hover {
background: rgba(255,255,255,0.7);
box-shadow: 4px 4px 4px #202020;
}
/*Titres des catégories*/
.menu_title {
display: inline-block;
margin-left: 20px;
border-bottom: 1px solid #6d80a7;
font-size: 16px;
}
/*Liste des options des catégories*/
#menu ul {
margin-top: 5px;
margin-bottom: 10px;
list-style-type:none;
}
/*Option des catégories*/
#menu ul li {
margin-left: -30px;
}
/*Partie de droite*/
#middle {
overflow: auto;
height: 435px;
width: 444px;
text-align: center;
}
/*Les boutons*/
input[type="checkbox" i], input[type="radio" i] {
opacity: 0.75;
}
/*Div de un seul item*/
.contenu_shoponglet > div {
display: block;
margin: 0px 10px;
margin-bottom: 10px;
text-align: center;
}
/*Bloc qui contient l'item*/
.item_bloc {
border: 1px solid #000000;
}
/*Nom de l'item*/
.item_name {
padding: 5px;
background: rgba(0,0,0,0.2);
font-size: 18px;
font-family: 'Cambria';
text-transform: uppercase;
color: #6d80a7;
font-weight: bold;
}
/*Intérieur de l'item*/
.item_in {
display: flex;
width: 100%;
flex-wrap: wrap;
background: rgba(0,0,0,0.2);
}
/*Image de l'item*/
.item_img {
width: 60x;
height: 60px;
padding: 5px;
background: rgba(152,169,204,0.3);
}
.item_desc {
background: rgba(152,169,204,0.1);
padding: 5px;
box-sizing: border-box;
flex-grow: 1;
flex-shrink: 1;
height: 70px;
overflow: auto;
text-align: justify;
}
/*Bloc prix nombre et acheter*/
.item_in > div:nth-child(3) {
width: 100px;
display: flex;
flex-direction: column;
background: rgba(255,255,255,0.1);
}
/*Bloc du prix*/
.item_in > div:nth-child(3) > div:nth-child(1) {
background: rgba(215,228,255,0.3);
flex-grow: 1;
padding: 5px 1px;
color: #1a1f2a;
}
/*Prix*/
.nbprix {
font-weight: bold;
}
/*Input du nombre d'item à acheter*/
.item_in input[type="number"] {
display: block;
width: 100px;
border: none;
background: rgba(215,228,255,0.5);
text-align: center;
box-sizing: border-box;
color: #1a1f2a;
padding: 3px;
}
/*Bouton acheter*/
.item_in button {
display: block;
border: none;
color: #1a1f2a;
background: rgba(215,228,255,0.7);
text-align: center;
box-sizing: border-box;
padding: 3px 5px;
cursor: pointer;
}
/*Bouton survolé*/
.item_in button:hover {
background: rgba(215,228,255,0.9);
}
.choix {
background: rgba(152,169,204,0.2);
padding-bottom: 5px;
width: 100%;
text-align: center;
}
/*Bloc enchantement et perso*/
.enchant, .perso {
display: none;
text-align: left;
background: rgba(152,169,204,0.2);
padding: 5px;
}
/*inptu des Bloc enchantement et perso*/
.enchant input, .perso input {
width: 70%;
border: 0px;
color: #1a1f2a;
background: rgba(215,228,255,0.7);
}
/*Partie du panier*/
#bottom {
position: relative;
display: inline-block;
margin: 20px auto 0px auto;
width: 510px;
background: #343c4c;
text-align: center;
overflow: hidden;
}
/*Titre du panier*/
#bottom_top {
position: relative;
z-index: 2;
font-size: 24px;
font-family: 'Dancing Script', script;
text-align: center;
width: 500px;
padding: 5px;
background: #1c212c;
}
/*Panier visible*/
#vuepanier {
position: relative;
z-index: 1;
margin: 10px;
margin-right: 0px;
margin-left: 0px;
width: 500px;
height: 100px;
padding: 5px;
padding-top: 0px;
padding-bottom: 0px;
text-align: justify;
overflow: auto;
}
/*Bouton effacer et soumettre le panier*/
#soumettrepanier, #effacerpanier {
display: inline-block;
background: #6d80a7;
border: none;
padding: 5px 10px;
color: #1a1f2a;
box-shadow: 2px 2px 2px #202020;
cursor: pointer;
border-radius: 2px;
margin: auto;
margin-top: 10px;
margin-bottom: 5px;
}
/*Bouton soumettre le panier*/
#effacerpanier {
margin-right: 15px;
}
/*Les boutons de tri*/
#soumettrepanier:hover, #effacerpanier:hover {
background: rgba(255,255,255,0.7);
box-shadow: 4px 4px 4px #202020;
}
/*Credit*/
.credits {
font-size: 12px;
position: absolute;
width: 200px;
bottom: 2px;
left: 2px;
text-align: left;
}
/*Liens*/
a {
text-decoration: none;
color: #6b8ac9;
}
a:hover {
color: #b1c0e0;
}
/*Bloc objet dans le panier*/
.item_input {
display: inline-block;
margin-bottom: 5px;
background-color: #1c212c;
padding: 2px;
width: 475px;
text-align: left;
}
/*Input du nombre d'item à acheter*/
#bottom input[type="number"] {
vertical-align: top;
display: inline-block;
background-color: #a6b1c7;
text-align: center;
width: 45px;
padding: 2px;
margin: 0px 2px 0px 0px;
border: 1px solid #000000;
}
/*Les boutons dans le panier*/
.item_input button {
vertical-align: top;
display: inline-block;
padding: 2px 6px;
background-color: #858ea1;
text-align: center;
margin: 0px 2px 0px 0px;
border: 1px solid #000000;
cursor: pointer;
}
/*Les boutons dans le panier*/
.item_input button:hover {
background-color: #a4afc6;
}
/*Le bouton supprimer de l'objet dans le panier*/
.button_delete {
display: inline-block;
}
/*Le bloc du nom et prix de l'objet dans le panier*/
.iteminsidepanier {
margin-left: 5px;
display: inline-block;
text-align: left;
vertical-align: middle;
}
</style>
</head>
<body>
<form enctype="multipart/form-data" name="post" method="post" action="/post" id="boutique" onsubmit="CompleteMessage()" target="_blank">
<div class="credits">Par Onyx de <a href="http://www.never-utopia.com/forum" target="_blank" >Never-Utopia</a>.</div>
<div id="boutique_top"><div id="badam"></div>
La boutique de la Colonie
</div>
<!-- DÉBUT DU MENU POUR TRIER -->
<div id="menu">
<button id="trier2" type="button" onclick="notriage()">Rénitialiser le Tri</button><br />
<button id="trier" type="button" onclick="triage()">Trier les Items</button><br />
<!-- DÉBUT CATÉGORIE TYPE -->
<span class="menu_title">Catégorie</span>
<ul id="Type">
<!-- OPTION #1 -->
<li><input type="checkbox" name="Arme" />
Armes
</li>
<!-- OPTION #2 -->
<li><input type="checkbox" name="Armure" />
Armures
</li>
<!-- OPTION #5 -->
<li><input type="checkbox" name="Pharmacie" />
Pharmacie
</li>
<!-- OPTION #6 -->
<li><input type="checkbox" name="Animaux" />
Animaux
</li>
<!-- OPTION #7 -->
<li><input type="checkbox" name="Autres" />
Autres
</li>
</ul>
<!-- FIN CATÉGORIE TYPE -->
<!-- DÉBUT CATÉGORIE PRIX -->
<span class="menu_title">Prix</span>
<ul id="Prix">
<!-- OPTION #1 -->
<li><input type="checkbox" name="Max49" />
Moins que 50
</li>
<!-- OPTION #2 -->
<li><input type="checkbox" name="50_99" />
Entre 50 et 99
</li>
<!-- OPTION #3 -->
<li><input type="checkbox" name="100_200" />
Entre 100 et 200
</li>
<!-- OPTION #4 -->
<li><input type="checkbox" name="Min2001" />
Plus de 200
</li>
</ul>
<!-- FIN CATÉGORIE PRIX -->
<!-- DÉBUT CATÉGORIE RARETÉ -->
<span class="menu_title">Rareté</span>
<ul id="Rarete">
<!-- OPTION #1 -->
<li><input type="checkbox" name="Commun" />
Commun
</li>
<!-- OPTION #2 -->
<li><input type="checkbox" name="Rare" />
Rare
</li>
<!-- OPTION #3 -->
<li><input type="checkbox" name="Tresrare" />
Très rare
</li>
</ul>
<!-- FIN CATÉGORIE RARETÉ -->
</div>
<!-- FIN DU MENU POUR TRIER -->
<div id="middle">
<div class="contenu_shoponglet" id="contenu_shoponglet_Tout">
<!-- DÉBUT ITEM -->
<div class="Arme Max99 rare Fer stygien">
<div class="item_bloc">
<div class="item_name">Glaive</div>
<div class="item_in">
<img class="item_img" src="https://upload.wikimedia.org/wikipedia/commons/3/38/Crossed_gladii.png" />
<div class="item_desc">Je suis une description quelconque</div>
<div>
<div>Prix : <span class="nbprix" data-prix="50">50</span> Ð</div>
<input type="number" value="1" min="1" />
<button class="ajoutprix" type="button">Acheter</button>
</div>
<div class="choix">
<input type="radio" name="arme1" value="Bronze" checked="checked" onchange="Recalculprix(this);" /> <label>Bronze céleste</label> |
<input type="radio" name="arme1" value="Fer stygien" onchange="Recalculprix(this);" /> <label>Fer stygien (+30)</label> |
<input type="radio" name="arme1" value="Métal Hybride" onchange="Recalculprix(this);" /> <label>Métal Hybride (+40)</label><br />
<input type="checkbox" name="enchant" onchange="ChangeEnchant(this);Recalculprix(this);" /> <label>Enchantement (+20)</label> |
<input type="checkbox" name="perso" onchange="ChangePerso(this);Recalculprix(this);" /> <label>Personnalisation (+30)</label>
</div>
<div class="enchant"><label>Enchantement : </label><input type="text" size="50" /></div>
<div class="perso"><label>Personnalisation : </label><input type="text" size="50" /></div>
</div>
</div>
</div>
<!-- FIN ITEM -->
<!-- DÉBUT ITEM -->
<div class="Arme">
<div class="item_bloc">
<div class="item_name">Rapière</div>
<div class="item_in">
<img class="item_img" src="https://www.comptoir-du-chateau.fr/1463-large_default/slavonne.jpg" />
<div class="item_desc">Je suis une description quelconque</div>
<div>
<div>Prix : <span class="nbprix" data-prix="50">50</span> Ð</div>
<input type="number" value="1" min="1" />
<button class="ajoutprix" type="button">Acheter</button>
</div>
<div class="choix">
<input type="radio" name="arme2" value="Bronze" checked="checked" onchange="Recalculprix(this);" /> <label>Bronze céleste</label> |
<input type="radio" name="arme2" value="Fer stygien" onchange="Recalculprix(this);" /> <label>Fer stygien (+30)</label> |
<input type="radio" name="arme2" value="Métal Hybride" onchange="Recalculprix(this);" /> <label>Métal Hybride (+40)</label><br />
<input type="checkbox" name="enchant" onchange="ChangeEnchant(this);Recalculprix(this);" /> <label>Enchantement (+20)</label> |
<input type="checkbox" name="perso" onchange="ChangePerso(this);Recalculprix(this);" /> <label>Personnalisation (+30)</label>
</div>
<div class="enchant"><label>Enchantement : </label><input type="text" size="50" /></div>
<div class="perso"><label>Personnalisation : </label><input type="text" size="50" /></div>
</div>
</div>
</div>
<!-- FIN ITEM -->
<!-- DÉBUT ITEM -->
<div class="Arme">
<div class="item_bloc">
<div class="item_name">Arc Chasseresse</div>
<div class="item_in">
<img class="item_img" src="http://www.bourges1ere.fr/images/Technique/ArcChasse/Monobloc.gif" />
<div class="item_desc">Je suis une description quelconque</div>
<div>
<div>Prix : <span class="nbprix" data-prix="50">50</span> Ð</div>
<input type="number" value="1" min="1" />
<button class="ajoutprix" type="button">Acheter</button>
</div>
<div class="choix">
<input type="radio" name="arme3" value="Bronze" checked="checked" onchange="Recalculprix(this);" /> <label>Bronze céleste</label> |
<input type="radio" name="arme3" value="Fer stygien" onchange="Recalculprix(this);" /> <label>Fer stygien (+30)</label> |
<input type="radio" name="arme3" value="Métal Hybride" onchange="Recalculprix(this);" /> <label>Métal Hybride (+40)</label><br />
<input type="checkbox" name="enchant" onchange="ChangeEnchant(this);Recalculprix(this);" /> <label>Enchantement (+20)</label> |
<input type="checkbox" name="perso" onchange="ChangePerso(this);Recalculprix(this);" /> <label>Personnalisation (+30)</label>
</div>
<div class="enchant"><label>Enchantement : </label><input type="text" size="50" /></div>
<div class="perso"><label>Personnalisation : </label><input type="text" size="50" /></div>
</div>
</div>
</div>
<!-- FIN ITEM -->
<!-- DÉBUT ITEM -->
<div class="Autres">
<div class="item_bloc">
<div class="item_name">Autre machin</div>
<div class="item_in">
<img class="item_img" src="https://2img.net/u/3814/45/31/77/avatars/1-87.jpg" />
<div class="item_desc">Je suis une description quelconque</div>
<div>
<div>Prix : <span class="nbprix">10</span> Ð</div>
<input type="number" value="1" min="1" />
<button class="ajoutprix" type="button">Acheter</button>
</div>
</div>
</div>
</div>
<!-- FIN ITEM -->
</div>
<div class="contenu_shoponglet" id="contenu_shoponglet_Autre">
</div>
</div>
<div id="bottom">
<div id="bottom_top">Mon Panier - <span id="total2">0</span>Ð</div>
<div id="vuepanier">Mon panier est vide.</div>
</div>
<br />
<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="3" name="t" />
<div style="clear: both;"></div>
</form>
<script type="text/javascript">
//<!--
var totalbase = 0;
$('#total2').html(totalbase);
var totaltotal = 0;
/*Faire apparaître l'enchantement*/
function ChangeEnchant(lacase) {
if ($(lacase).is(':checked')) {
$(lacase).closest('.item_bloc').find('.enchant:first').css('display', 'block');
}
else {
$(lacase).closest('.item_bloc').find('.enchant:first').css('display', 'none');
}
}
/*Faire apparaître la personnalisation*/
function ChangePerso(lacase) {
if ($(lacase).is(':checked')) {
$(lacase).closest('.item_bloc').find('.perso:first').css('display', 'block');
}
else {
$(lacase).closest('.item_bloc').find('.perso:first').css('display', 'none');
}
}
/*Recalcul du prix selon les ajouts*/
function Recalculprix(th) {
var prixitemcase = parseInt($(th).closest('.item_bloc').find('.nbprix:first').data('prix'));
if ($(th).closest('.item_bloc').find('input[type="radio"]').eq(1).is(':checked')) {
prixitemcase = prixitemcase + 30;
}
else if ($(th).closest('.item_bloc').find('input[type="radio"]').eq(2).is(':checked')) {
prixitemcase = prixitemcase + 40;
}
if ($(th).closest('.item_bloc').find('input[name="enchant"]:first').is(':checked')) {
prixitemcase = prixitemcase + 20;
$(th).closest('.item_bloc').find('.enchant:first').css('display', 'block');
}
else {
$(th).closest('.item_bloc').find('.enchant:first').css('display', 'none');
}
if ($(th).closest('.item_bloc').find('input[name="perso"]:first').is(':checked')) {
prixitemcase = prixitemcase + 30;
$(th).closest('.item_bloc').find('.perso:first').css('display', 'block');
}
else {
$(th).closest('.item_bloc').find('.perso:first').css('display', 'none');
}
$(th).closest('.item_bloc').find('.nbprix:first').html(prixitemcase);
}
/*Quand on ajoute un item au panier*/
$('.ajoutprix').click(function() {
var prix = parseInt($(this).closest('.item_bloc').find('.nbprix').eq(0).html());
var qt = parseInt($(this).closest('.item_bloc').find('input[type="number"]').eq(0).val());
var qtprixcalculation = qt * prix;
var nomitem = $(this).closest('.item_bloc').find('.item_name').eq(0).html();
var metalitem = $(this).closest('.item_bloc').find('input[type="radio"]:checked');
var enchantitem = $(this).closest('.item_bloc').find('input[name="enchant"]:checked');
var persoitem = $(this).closest('.item_bloc').find('input[name="perso"]:checked');
var phrase = "<span class='item_input'>" +
"<button type='button' class='button_delete' onclick='deleteqtitem(this)'>x</button>" +
"<button type='button' class='button_moins' onclick='removeqtitem(this)'>-</button>" +
"<input type='number' class='input_nb_object' value='"+qt+"' data-prix='"+prix+"' onchange='calcultotal()'></input>" +
"<button type='button' class='button_plus' onclick='addqtitem(this)'>+</button>" +
"<span class='iteminsidepanier'><span class='thename'>"+nomitem+"</span>";
if (metalitem.length > 0) {
phrase = phrase + " en " + metalitem.val();
var metaloui = true;
}
phrase = phrase + " à <span class='thepriceinside'>"+prix+"</span>Ð pour un total de" +
" <span class='thetotalinside'>"+qtprixcalculation+"</span>Ð.";
if (enchantitem.length > 0) {
phrase = phrase + "<br />Enchantement : " + $(this).closest('.item_bloc').find('.enchant > input:first').val();
var enchantoui = true;
}
if (persoitem.length > 0) {
phrase = phrase + "<br />Personnalisation : " + $(this).closest('.item_bloc').find('.perso > input:first').val();
var persooui = true;
}
phrase = phrase + "</span>";
if ($('#vuepanier').html() == "Mon panier est vide.") {
$('#vuepanier').html(phrase);
}
else {
var ajoutphrase = $('#vuepanier').html();
ajoutphrase = ajoutphrase+phrase;
$('#vuepanier').html(ajoutphrase);
}
if (metaloui == true) {
$('#vuepanier').find('.item_input').last().attr('data-metal', metalitem.val());
}
if (enchantoui == true) {
$('#vuepanier').find('.item_input').last().attr('data-enchant', $(this).closest('.item_bloc').find('.enchant > input:first').val());
}
if (persooui == true) {
$('#vuepanier').find('.item_input').last().attr('data-perso', $(this).closest('.item_bloc').find('.perso > input:first').val());
}
calcultotal();
});
/*Ajouter un item déjà dans le panier*/
function addqtitem(itemchoisi) {
var currentitem = parseInt($(itemchoisi).prev().val());
var currentitemafter = currentitem + 1;
$(itemchoisi).prev().val(currentitemafter);
calcultotal();
}
/*Enlever un item déjà dans le panier*/
function removeqtitem(itemchoisi) {
var currentitem = parseInt($(itemchoisi).next().val());
var currentitemafter = currentitem - 1;
$(itemchoisi).next().val(currentitemafter);
calcultotal();
}
/*Supprimer un item déjà dans le panier*/
function deleteqtitem(itemchoisi) {
$(itemchoisi).parent().remove();
calcultotal();
}
/*Fonction pour calculer*/
function calcultotal() {
totaltotal = 0;
$('.item_input').each(function(){
if (parseInt($(this).find('.input_nb_object:first').val()) < 1) {
$(this).remove();
}
var otherprix = parseInt($(this).find('.input_nb_object:first').attr('data-prix'));
var otherquant = parseInt($(this).find('.input_nb_object:first').val());
$(this).find('.thetotalinside:first').html((otherprix*otherquant));
totaltotal = totaltotal + (otherprix*otherquant);
});
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() {
var thetotalprice = totaltotal;
var lemessage = "Bonjour,<br /><br />J'aimerais acheter les articles suivants s'il vous plaît :<br /><ul>";
$('.item_input').each(function(){
var theprice = parseInt($(this).find('.input_nb_object:first').attr('data-prix'));
var thesupername = $(this).find('.thename:first').html();
var thequant = parseInt($(this).find('.input_nb_object:first').val());
var thequantpricetotal = thequant * theprice;
var postmetal = "";
var checkmetal = $(this).data('metal');
var checkenchant = $(this).data('enchant');
var checkperso = $(this).data('perso');
if (checkmetal) {
postmetal = " en " + checkmetal;
}
var postenchant = "";
if (checkenchant) {
postenchant = "<br />- Enchantement : " + checkenchant + ".";
}
var postperso = "";
if (checkperso) {
postperso = "<br />- Personnalisation : " + checkperso + ".";
}
lemessage =
lemessage + "<li>" + thequant + " " + thesupername + postmetal +
" à " + theprice + " Drachmes pour un total de " + thequantpricetotal + " Drachmes." +
postenchant + postperso + "</li>";
});
lemessage = lemessage + "</ul>Le coût total de ma commande est de : "+thetotalprice+" Drachmes.";
$('#message').val(lemessage);
}
//-->
</script>
<script type="text/javascript">
//<!--
function notriage(){
$('#menu').find('input:checked').prop('checked', false);
$('#contenu_shoponglet_Tout').css("display", "block");
$('#contenu_shoponglet_Autre').html("");
}
/*Nombre de catégories*/
var nbtype = $("#menu").find("ul").length;
/*Fonction triage*/
function triage() {
/*On trouve le nombre de cases cochées*/
var totalcheck = $('#menu').find('input:checked').length;
/*On se débarasse des items déjà triés*/
$('#contenu_shoponglet_Autre').html("");
/*Si aucune case est cochée*/
if (totalcheck < 1) {
/*On garde tous les items*/
$('#contenu_shoponglet_Tout').css("display", "block");
}
/*Sinon*/
else {
/*On fait disparaître la liste complète*/
$('#contenu_shoponglet_Tout').css("display", "none");
/*Tableau qui va contenir toutes les catégories qui ont au moins une case cochée*/
var nomtypech = [];
/*Pour chaque catégorie on regarde si il y a une case cochée et si oui on met son id dans le tableau nomtypech*/
for (i = 0; i < nbtype; i++) {
var nbcatcheckcal = $('#menu').find('ul:eq(' + i + ')').find('input:checked').length;
if (nbcatcheckcal > 0) {
var nomtype = $('#menu').find('ul:eq(' + i + ')').attr('id');
nomtypech.push(nomtype);
}
}
/*Nombre de catégories qui ont une case cochée*/
var qunomtypech = nomtypech.length;
/*Tableau qui contient le nombre de cases cochées par catégories où il y a des cases cochées*/
var nbnomcatch = [];
/*Tableau qui contient le name de chaque case cochée*/
var nomcatch = [];
for (i = 0; i < qunomtypech; i++) {
/*On ajoute le nombre de case cochée de chaque catégories où il y en a au moins une dans le tableau nbnomcatch*/
nbnomcatch[i] = $('#menu').find('#' + nomtypech[i]).find('input:checked').length;
for (y = 0; y < nbnomcatch[i]; y++) {
/*On ajoute le name de chaque case cochée de chaque catégories où il y en a au moins une dans le tableau nomcatch*/
var truc1 = $('#menu').find('#' + nomtypech[i]).find('input:checked:eq(' + y + ')').attr('name');
nomcatch.push(truc1);
}
}
/*Cela va indiquer à case cochée on est rendue. Il commence à 0*/
var banane = 0;
/*Pour chaque catégorie où il y a une case cochée...*/
for (i = 0; i < qunomtypech; i++) {
/*Si on est à la 1ère catégorie*/
if (i < 1) {
/*Pour chaque case cochée de la 1ère catégorie...*/
for (y = 0; y < nbnomcatch[i]; y++) {
/*Si on est la première case cochée de la 1ère catégorie*/
if (banane < 1) {
/*On regarde le nombre de items qui ont le name de la 1ère case de la 1ère catégorie comme classe*/
var machin = $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).length;
/*Pour chacun de ses items on le met dans la partie de droite*/
for (z = 0; z < machin; z++) {
$('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).eq(z).clone(true).appendTo('#contenu_shoponglet_Autre');
}
/*On passe à la case suivante*/
banane = banane + 1;
}
/*Si on est la xème case cochée de la 1ère catégorie*/
else {
/*On regarde le nombre de items qui ont le name de la xème case cochée comme classe*/
var machin = $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).length;
/*Pour chacun de ces items...*/
for (z = 0; z < machin; z++) {
/*Item que on est en train de regarder*/
var bamibam = $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).eq(z);
/*On créer la variable qui va regarder si le item que on regarde a une classe de un name qui a déjà été vérifié*/
var autretruc = 0;
/*Pour chaque name qui est avant le name que on regarde présentement...*/
for (w = 0; w < banane; w++) {
/*Name où on est rendu à vérifier*/
var pamplemousse = nomcatch[w];
/*Si le item que on regarde a comme classe un name que on a déjà regardé...*/
if (bamibam.hasClass(pamplemousse)) {
/*on ajoute 1 à la variable autretruc*/
autretruc = autretruc + 1;
}
}
/*Si autretruc est inférieur a 0 donc si le item que on regarde a pas un name que on a déjà vérifié...*/
if (autretruc < 1) {
/*On ajoute le item à la zone de droite*/
bamibam.clone(true).appendTo('#contenu_shoponglet_Autre');
}
}
/*On passe à la case suivante*/
banane = banane + 1;
}
}
}
/*Si on est pas la 1ère catégorie qui a une case cochée...*/
else {
/*On regarde le nombre de item dans la partie de droite*/
var chose12 = $('#contenu_shoponglet_Autre').children().length;
/*on crée un tableau qui va contenir les items à enlever de la liste de droite*/
var calculenlever = [];
/*Pour chaque item de la liste de droite on met 0 dans le tableau*/
for (z = 0; z < chose12; z++) {
calculenlever[z] = 0;
}
/*Pour chaque case cochée de la catégorie où on est rendue...*/
for (y = 0; y < nbnomcatch[i]; y++) {
/*Pour chaque item qui est dans la liste de droite...*/
for (z = 0; z < chose12; z++) {
/*On regarde le xème item de droite*/
var fraise = $('#contenu_shoponglet_Autre').children().eq(z);
/*Name de la case où on est rendu*/
var tomate = nomcatch[banane];
/*Si le item où on est rendu a cette case on ajoute 1 à sa place dans le tableau calculenlever*/
if (fraise.hasClass(tomate)) {
calculenlever[z] = calculenlever[z] + 1;
}
}
/*On passe à la case suivante*/
banane = banane + 1;
}
/*Si les items de droite on aucune classe de aucune des cases de cette catégorie on leur ajoute la classe Detruire*/
for (y = 0; y < chose12; y++) {
if (calculenlever[y] < 1) {
$('#contenu_shoponglet_Autre').children().eq(y).addClass('Detruire');
}
}
/*On détruit les items à droite qui ont la classe Detruire*/
$('#contenu_shoponglet_Autre').children('.Detruire').remove();
}
}
/*Si il y a 0 item à droite après le tri on dit que il y a 0 résultat*/
var kiwi = $('#contenu_shoponglet_Autre').children().length;
if (kiwi < 1) {
$('#contenu_shoponglet_Autre').html("Aucun résultat ne correspond à votre recherche.");
}
}
}
//-->
</script>
</body>
</html>
Pour les objets simples sans enchantement, personnalisation ou métaux, c'est simplement ce bout de code :
- Code:
<!-- DÉBUT ITEM -->
<div class="Autres">
<div class="item_bloc">
<div class="item_name">Autre machin</div>
<div class="item_in">
<img class="item_img" src="https://2img.net/u/3814/45/31/77/avatars/1-87.jpg" />
<div class="item_desc">Je suis une description quelconque</div>
<div>
<div>Prix : <span class="nbprix">10</span> Ð</div>
<input type="number" value="1" min="1" />
<button class="ajoutprix" type="button">Acheter</button>
</div>
</div>
</div>
</div>
<!-- FIN ITEM -->
Une arme avec différents métaux et la possibilité d'enchantement/personnalisation ressemble à ceci :
- Code:
<!-- DÉBUT ITEM -->
<div class="Arme Max99 rare Fer stygien">
<div class="item_bloc">
<div class="item_name">Glaive</div>
<div class="item_in">
<img class="item_img" src="https://upload.wikimedia.org/wikipedia/commons/3/38/Crossed_gladii.png" />
<div class="item_desc">Je suis une description quelconque</div>
<div>
<div>Prix : <span class="nbprix" data-prix="50">50</span> Ð</div>
<input type="number" value="1" min="1" />
<button class="ajoutprix" type="button">Acheter</button>
</div>
<div class="choix">
<input type="radio" name="arme1" value="Bronze" checked="checked" onchange="Recalculprix(this);" /> <label>Bronze céleste</label> |
<input type="radio" name="arme1" value="Fer stygien" onchange="Recalculprix(this);" /> <label>Fer stygien (+30)</label> |
<input type="radio" name="arme1" value="Métal Hybride" onchange="Recalculprix(this);" /> <label>Métal Hybride (+40)</label><br />
<input type="checkbox" name="enchant" onchange="ChangeEnchant(this);Recalculprix(this);" /> <label>Enchantement (+20)</label> |
<input type="checkbox" name="perso" onchange="ChangePerso(this);Recalculprix(this);" /> <label>Personnalisation (+30)</label>
</div>
<div class="enchant"><label>Enchantement : </label><input type="text" size="50" /></div>
<div class="perso"><label>Personnalisation : </label><input type="text" size="50" /></div>
</div>
</div>
</div>
<!-- FIN ITEM -->
Il y a 2 particularités importantes.
1. Tu dois mettre le prix 2 fois, soit dans le data-prix et aussi dans le span (prix de base d'une arme de bronze sans rien de plus) :
- Code:
<div>Prix : <span class="nbprix" data-prix="50">50</span> Ð</div>
2. Les champs à choix de réponses doivent avoir un "name" différent pour chaque objet. Je parle de cette partie :
- Code:
<input type="radio" name="arme1" value="Bronze" checked="checked" onchange="Recalculprix(this);" /> <label>Bronze céleste</label> |
<input type="radio" name="arme1" value="Fer stygien" onchange="Recalculprix(this);" /> <label>Fer stygien (+30)</label> |
<input type="radio" name="arme1" value="Métal Hybride" onchange="Recalculprix(this);" /> <label>Métal Hybride (+40)</label><br />
Tu remarqueras qu'il y a "arme1" dans le "name" de ces 3 inputs. Pour ta 2e arme (l'arc), c'est "arme2", pour la 3e, "arme3". Alors lorsque tu fais un copié/collé, fais attention à changer le chiffre pour que les 3 inputs aient le même nom et pour que ce nom soit différent des autres armes.
Voilà !
