Bonjour bonsoir ~
J'espère que c'est bien ici que je dois poster une telle requête .__.
Une explication de votre problème
Tout est dit dans le titre. Ma boutique est une sorte d'animalerie où les players peuvent adopter une créature, j'aimerais qu'au dessus du panier il y est une zone texte où ils pourront inscrire le nom souhaité pour leur animal. J'aimerais donc que lorsqu'ils valident le panier il y est aussi écrit dans le message posté "Nom de la créature : Bla".
Un lien vers la ressource que vous tentez de personnaliser
Système de Boutique avec triage automatique
Vos codes associés au problème (template, css, javascript...)
Voilà j'espère que c'est envisageable, ce serait vraiment super d'ajouter cette petite fonction qui ne m'obligerait pas à demander le nom de la créature par MP après l'adoption, mais que tout soit fait d'un simple clic ! ^^
Merci beaucoup !
J'espère que c'est bien ici que je dois poster une telle requête .__.
Une explication de votre problème
Tout est dit dans le titre. Ma boutique est une sorte d'animalerie où les players peuvent adopter une créature, j'aimerais qu'au dessus du panier il y est une zone texte où ils pourront inscrire le nom souhaité pour leur animal. J'aimerais donc que lorsqu'ils valident le panier il y est aussi écrit dans le message posté "Nom de la créature : Bla".
Un lien vers la ressource que vous tentez de personnaliser
Système de Boutique avec triage automatique
Vos codes associés au problème (template, css, javascript...)
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="Onyx" />
<title>La Valise de Newt Scamander</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;
}
/*Le bloc entier de la boutique*/
#boutique {
position: relative;
padding-bottom: 10px;
margin: auto;
max-width: 3050px;
background-color: #090601;
border: 8px double #090601;
border-left: 1px solid #090601;
border-right: 1px solid #090601;
font-size: 14px;
font-family: 'Times New Roman';
color: #664424;
text-align: center;
}
/*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 #747474;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
}
/*Menu de gauche*/
#menu {
float: left;
text-align: left;
padding-top: 5px;
width: 150px;
height: 2225px;
margin-right: 10px;
padding-left: 5px;
border-right: 1px solid #747474;
}
/*Les boutons de tri*/
#trier, #trier2 {
display: block;
margin: auto;
}
/*Titres des catégories*/
.menu_title {
display: inline-block;
margin-left: 20px;
border-bottom: 1px solid #4A0501;
color: #4A0501;
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: 1050px;
text-align: center;
}
/*Div de un seul item*/
.contenu_shoponglet > div {
display: inline-block;
text-align: center;
margin-bottom: 10px;
padding: 10px;
}
/*Bloc qui contient l'item*/
.item_bloc {
display: inline-block;
vertical-align: top;
background-color: #BAA982;
box-shadow: 0px 0px 10px #0A0701;
width: 150px;
padding: 5px;
color: #0A0701;
}
/*Image de l'item*/
.item_bloc > img:first-child {
display: inline-block;
width: 168px;
height: 300px;
}
/*Nom de l'item*/
.item_name {
padding: 5px;
font-size: 16px;
font-family: 'Cambria';
font-weight: bold;
text-transform: uppercase;
}
/*Input du nombre d'item à acheter*/
input[type="number"] {
display: inline-block;
max-width: 50px;
border: 1px solid #665A3E;
background-color: #B09E73;
text-align: center;
margin-bottom: 2px;
}
input[type="text"] {
display: inline-block;
max-width: 100px;
border: 1px solid #665A3E;
background-color: #B09E73;
text-align: center;
margin-bottom: 2px;
}
/*Partie du panier*/
#bottom {
position: relative;
display: inline-block;
margin: auto;
width: 510px;
background-color: #BAA982;
box-shadow: 0px 0px 0px #B09E73;
color: #4A0501;
text-align: center;
overflow: hidden;
}
/*Titre du panier*/
#bottom_top {
position: relative;
z-index: 2;
font-size: 24px;
font-family: 'Times New Roman', script;
text-align: center;
border-bottom: 1px solid #4A0501;
width: 500px;
padding: 5px;
background-color: #664424;
box-shadow: 0px 0px 10px #0A0701;
color: #0A0701;
}
/*Panier visible*/
#vuepanier {
position: relative;
z-index: 1;
margin: 10px;
margin-right: 0px;
margin-left: 0px;
width: 500px;
height: 100px;
background-color: #BAA982;
padding: 5px;
padding-top: 0px;
padding-bottom: 0px;
color: #0A0701;
text-align: justify;
overflow: auto;
}
/*Bouton effacer et soumettre le panier*/
#soumettrepanier, #effacerpanier {
display: inline-block;
margin: auto;
margin-top: 10px;
margin-bottom: 5px;
}
/*Bouton soumettre le panier*/
#effacerpanier {
margin-right: 15px;
}
/*Credit*/
.credits {
font-size: 11px;
position: absolute;
width: 200px;
bottom: 2px;
left: 2px;
text-align: left;
}
/*Liens*/
a {
text-decoration: none;
color: #454545;
}
a:hover {
color: #000000;
}
/*Bloc objet dans le panier*/
.item_input {
display: inline-block;
margin-bottom: 5px;
background-color: #BAA982;
padding: 2px;
width: 475px;
text-align: left;
}
/*Le bloc du nom et prix de l'objet dans le panier*/
.iteminsidepanier {
margin-left: 5px;
display: inline-block;
text-align: left;
}
/*Les boutons dans le panier*/
.item_input button {
}
/*Le bouton supprimer de l'objet dans le panier*/
.button_delete {
margin-right: 2px;
display: inline-block;
}
/*La quantité de l'objet dans le panier*/
.input_nb_object {
margin: 0px 2px 0px 2px;
display: inline-block;
padding: 2px;
border: 1px solid #665A3E;
background: #B09E73;
width: 45px;
text-align: center;
}
</style>
</head>
<body><br /><br />
<form enctype="multipart/form-data" name="post" method="post" action="/post" id="boutique" onsubmit="CompleteMessage()" target="_blank">
<div class="credits">Merci Onyx de <a href="http://www.never-utopia.com/forum" target="_blank" >Never-Utopia</a>.</div>
<div id="boutique_top"><div id="badam"></div>
<img src="https://i62.servimg.com/u/f62/12/83/72/90/bg13.jpg">
</div>
<center><font color="#9C8D65">Bienvenue dans la valise de Newt Scamander ! <br />
Ici tout pourras adopter une créature qui t'accompagneras dans tes plus folles aventures. <br />
Ce sera à toi de t'occuper de ton animal dans le module d'élevage et ainsi veiller à son bonheur.</font></center>
<div id="middle">
<div class="contenu_shoponglet" id="contenu_shoponglet_Tout">
<!-- DÉBUT ITEM -->
<div class="rat">
<div class="item_bloc">
<img src="https://i62.servimg.com/u/f62/12/83/72/90/rat10.png" /><br /><br />
<span class="item_name">RAT</span><br />
<br />
<span class="nbprix">25 mornilles</span><br /><br />
<input type="number" value="1" min="1" /><br />
<button class="ajoutprix" type="button">Adopter</button>
</div>
</div>
<!-- FIN ITEM -->
<!-- DÉBUT ITEM -->
<div class="chouette">
<div class="item_bloc">
<img src="https://i62.servimg.com/u/f62/12/83/72/90/chouet10.png" /><br /><br />
<span class="item_name">CHOUETTE</span><br />
<br />
<span class="nbprix">30 mornilles</span><br /><br />
<input type="number" value="1" min="1" /><br />
<button class="ajoutprix" type="button">Adopter</button>
</div>
</div>
<!-- FIN ITEM -->
<!-- DÉBUT ITEM -->
<div class="chat">
<div class="item_bloc">
<img src="https://i62.servimg.com/u/f62/12/83/72/90/chat10.png" /><br /><br />
<span class="item_name">CHAT</span><br />
<br />
<span class="nbprix">40 mornilles</span><br /><br />
<input type="number" value="1" min="1" /><br />
<button class="ajoutprix" type="button">Adopter</button>
</div>
</div>
<!-- FIN ITEM -->
<!-- DÉBUT ITEM -->
<div class="lutin">
<div class="item_bloc">
<img src="https://i62.servimg.com/u/f62/12/83/72/90/lutin10.png" /><br /><br />
<span class="item_name">LUTIN DE CORNOUAILLES</span><br />
<br />
<span class="nbprix">110 mornilles</span><br /><br />
<input type="number" value="1" min="1" /><br />
<button class="ajoutprix" type="button">Adopter</button>
</div>
</div>
<!-- FIN ITEM -->
<!-- DÉBUT ITEM -->
<div class="botruc">
<div class="item_bloc">
<img src="https://i62.servimg.com/u/f62/12/83/72/90/botruc10.png" /><br /><br />
<span class="item_name">Botruc</span><br />
<br />
<span class="nbprix">120 mornilles</span><br /><br />
<input type="number" value="1" min="1" /><br />
<button class="ajoutprix" type="button">Adopter</button>
</div>
</div>
<!-- FIN ITEM -->
<!-- DÉBUT ITEM -->
<div class="veaudelune">
<div class="item_bloc">
<img src="https://i62.servimg.com/u/f62/12/83/72/90/veaude10.png" /><br /><br />
<span class="item_name">Veaudelune</span><br />
<br />
<span class="nbprix">150 mornilles</span><br /><br />
<input type="number" value="1" min="1" /><br />
<button class="ajoutprix" type="button">Adopter</button>
</div>
</div>
<!-- FIN ITEM -->
<!-- DÉBUT ITEM -->
<div class="niffleur">
<div class="item_bloc">
<img src="https://i62.servimg.com/u/f62/12/83/72/90/niffle10.png" /><br /><br />
<span class="item_name">NIFFLEUR</span><br />
<br />
<span class="nbprix">160 mornilles</span><br /><br />
<input type="number" value="1" min="1" /><br />
<button class="ajoutprix" type="button">Adopter</button>
</div>
</div>
<!-- FIN ITEM -->
<!-- DÉBUT ITEM -->
<div class="billywig">
<div class="item_bloc">
<img src="https://i62.servimg.com/u/f62/12/83/72/90/billyw10.png" /><br /><br />
<span class="item_name">BILLYWIG</span><br />
<br />
<span class="nbprix">180 mornilles</span><br /><br />
<input type="number" value="1" min="1" /><br />
<button class="ajoutprix" type="button">Adopter</button>
</div>
</div>
<!-- FIN ITEM -->
<!-- DÉBUT ITEM -->
<div class="augurey">
<div class="item_bloc">
<img src="https://i62.servimg.com/u/f62/12/83/72/90/augure10.png" /><br /><br />
<span class="item_name">AUGUREY</span><br />
<br />
<span class="nbprix">240 mornilles</span><br /><br />
<input type="number" value="1" min="1" /><br />
<button class="ajoutprix" type="button">Adopter</button>
</div>
</div>
<!-- FIN ITEM -->
<!-- DÉBUT ITEM -->
<div class="phenix">
<div class="item_bloc">
<img src="https://i62.servimg.com/u/f62/12/83/72/90/phenix10.png" /><br /><br />
<span class="item_name">PHENIX</span><br />
<br />
<span class="nbprix">500 mornilles</span><br /><br />
<input type="number" value="1" min="1" /><br />
<button class="ajoutprix" type="button">Adopter</button>
</div>
</div>
<!-- FIN ITEM -->
</div>
<div class="contenu_shoponglet" id="contenu_shoponglet_Autre">
</div>
</div>
<div id="bottom">
<div id="bottom_top">Mon adoption - <span id="total2">0</span> mornilles</div>
<div id="vuepanier"></div>
</div>
<br />
<button id="effacerpanier" type="button" onclick="effacer()">Effacer</button>
<input type="submit" id="soumettrepanier" value="Valider mon adoption" name="post" />
<textarea name="message" id="message" style="display:none"></textarea>
<input type="hidden" value="reply" name="mode" />
<input type="hidden" value="281" name="t" />
<div style="clear: both;"></div>
</form>
<script type="text/javascript">
//<!--
var totalbase = 0;
$('#total2').html(totalbase);
var totaltotal = 0;
/*Quand on ajoute un item au panier*/
$('.ajoutprix').click(function() {
var prix = parseInt($(this).parent().find('.nbprix').eq(0).html());
var qt = parseInt($(this).parent().find('input').eq(0).val());
var qtprixcalculation = qt * prix;
var nomitem = $(this).parent().find('.item_name').eq(0).html();
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='text' 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>" +
" : " +
" <span class='thetotalinside'>"+qtprixcalculation+"</span> mornilles.</span>";
if ($('#vuepanier').html() == "Mon panier est vide.") {
$('#vuepanier').html(phrase);
}
else {
var ajoutphrase = $('#vuepanier').html();
ajoutphrase = ajoutphrase+phrase;
$('#vuepanier').html(ajoutphrase);
}
calcultotal();
});
/*Ajouter un item déjà dans le panier*/
function addqtitem(bihihi) {
var curritem = parseInt($(bihihi).prev().val());
var curritemafter = curritem + 1;
$(bihihi).prev().val(curritemafter);
calcultotal();
}
/*Enlever un item déjà dans le panier*/
function removeqtitem(bohoho) {
var curratem = parseInt($(bohoho).next().val());
var curratemafter = curratem - 1;
$(bohoho).next().val(curratemafter);
calcultotal();
}
/*Supprimer un item déjà dans le panier*/
function deleteqtitem(bahaha) {
$(bahaha).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 adopter la créature suivante s'il vous plait :<br />";
$('.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;
lemessage = lemessage + "<br /> - "+thesupername+" : "+thequantpricetotal+" mornilles";
});
lemessage = lemessage + "<br /><br />";
$('#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("Recherche infructueuse...");
}
}
}
//-->
</script>
</body>
</html>
Voilà j'espère que c'est envisageable, ce serait vraiment super d'ajouter cette petite fonction qui ne m'obligerait pas à demander le nom de la créature par MP après l'adoption, mais que tout soit fait d'un simple clic ! ^^
Merci beaucoup !
Dernière édition par Noak le Mar 1 Mai 2018 - 3:39, édité 1 fois
