Help ! Recupérer des variables JS

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Yo21
Messages : 1
Enregistré le : 08 nov. 2020, 19:47

Help ! Recupérer des variables JS

Message par Yo21 » 08 nov. 2020, 19:58

Bonjour tout le monde,
tout d'abord je tiens a préciser que je suis débutant en js.

Voila mon soucis est que j'essaye de mettre en place un systeme interne de selection de produits (uniquement accessible par moi). Dans mon code tout fonctionne bien sauf qu'il me manque la partie Checkout. Je souhaiterais simplement quand je clique sur valider le panier, pouvoir récuperer les infos et les envoyer dans une autre page php. Ce qui me permettrais de pouvoir traiter et inserer le détail du panier dans ma base sql.

Merci d'avance pour vos conseils.

Voici le code complet :
----------------------------
<html lang="en" >
<head>
<meta charset="UTF-8">

<title>Boutique</title>

<style>
.btn-add-cart {
position: absolute;
left: 15px;
top: 0px;
}
</style>

<script>
window.console = window.console || function(t) {};
</script>



<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>


</head>

<body translate="no" >
<html>
<head>
<meta charset="utf-8">
<title>Boutique HILS 4810</title>
</head>
<body>
<div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
Ajouter des options
</a>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col col-sm-9 col-xs-6">
<h1>Le Coin Apéritif</h1>
<div class="row">
<? while($donnees1 = mysqli_fetch_assoc($res1))
{
echo '<div class="col col-xs-12 col-md-6 col-lg-3 item">
<div class=\'img-container\'>
<img src="images/options/'.$donnees1['type_option'].'.jpg">
</div>
<h4>'.$donnees1['nom_option'].'</h4>
<p>'.$donnees1['descriptif_option'].'</p>
<p>€'.$donnees1['tarif_option'].'</p>
</div>';
} ?>
</div>
<h1>Le Coin Repas</h1>
<div class="row">
<? while($donnees2 = mysqli_fetch_assoc($res2))
{
echo '<div class="col col-xs-12 col-md-6 col-lg-3 item">
<div class=\'img-container\'>
<img src="images/options/'.$donnees2['type_option'].'.jpg">
</div>
<h4>'.$donnees2['nom_option'].'</h4>
<p>'.$donnees2['descriptif_option'].'</p>
<p>€'.$donnees2['tarif_option'].'</p>
</div>';
} ?>
</div>
<h1>Le Coin des Fleurs</h1>
<div class="row">
<? while($donnees3 = mysqli_fetch_assoc($res3))
{
echo '<div class="col col-xs-12 col-md-6 col-lg-3 item">
<div class=\'img-container\'>
<img src="images/options/'.$donnees3['type_option'].'.jpg">
</div>
<h4>'.$donnees3['nom_option'].'</h4>
<p>'.$donnees3['descriptif_option'].'</p>
<p>€'.$donnees3['tarif_option'].'</p>
</div>';
} ?>
</div>
<h1>Le Coin des Plaisirs</h1>
<div class="row">
<? while($donnees4 = mysqli_fetch_assoc($res4))
{
echo '<div class="col col-xs-12 col-md-6 col-lg-3 item">
<div class=\'img-container\'>
<img src="images/options/'.$donnees4['type_option'].'.jpg">
</div>
<h4>'.$donnees4['nom_option'].'</h4>
<p>'.$donnees4['descriptif_option'].'</p>
<p>€'.$donnees4['tarif_option'].'</p>
</div>';
} ?>
</div>




</div>
<div class="col col-sm-3 col-xs-6">
<div id = 'cart-container' data-spy="affix" data-offset-top="10">
<h1>Mon panier <span class="badge" id='cartItems'></span></h1>
<div class="cart" id = 'cart'>
Votre panier est vide,<br>Ajoutez un bon cadeau 🎁
</div>
<div id = 'prices'></div>
</div>
</div>
</div>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Votre panier</h4>
</div>
<div class="modal-body">
<div class = 'row'>
<div class = 'col-xs-12' id = 'cartContentsModal'> </div>
</div>
<div class = 'row'>
<div class = 'col-xs-12' id = 'cartForm'>
<!-- FORM -->
<form>
<div class="form-group">
<label for="formName">Name</label>
<input type="text" class="form-control" id="formName" placeholder="Your name" required>
</div>

<div class="form-group">
<label for="formAddress">Address</label>
<input type="text" class="form-control" id="formAddress" placeholder="Your address" required>
</div>

</form>

</div>
</div>
</div>
<div class="modal-footer centered">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
<button type="button" class="btn btn-primary" id='submit'>Valider votre commande</button>
</div>
</div>
</div>
</div>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstr ... ap.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ ... te.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstr ... "></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ ... "></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ ... rt.min.css">

</body>
</html>



<script id="rendered-js" >
var itemsInCart = 0;
var subTotal = 0;
const tax = 0; // 0%
var totalPrice = 0;


window.onload = function () {
$('img').addClass('img-responsive');

$('.img-container').append('<button class="btn btn-success btn-add-cart"><span class="glyphicon glyphicon-shopping-cart"></span> ajouter</button>');

$('.btn-add-cart').click(e => {
//animation
$(e.target).animateCss('pulse');
// find out which item is clicked
// if 'span' with cart symbol is clicked, then navigate one level up to the button
let eventTarget;
if ($(e.target).is('span')) eventTarget = $(e.target).parent();else
eventTarget = $(e.target);
let itemName = eventTarget.parent().parent().find('h4')[0].textContent;
let itemPrice = eventTarget.parent().parent().find('p')[1].textContent;
addToCart(itemName, itemPrice);
});

$('#submit').click(() => {
formSubmitted();
});

setRandomPrices();
};

//function setRandomPrices() {
// just for fun
// let items = document.querySelectorAll('.item');
// for (let item of items) {
// $(item).find('p')[1].textContent = '€' + (Math.floor(Math.random() * (199 - 0)) + 0) + '.' + (Math.floor(Math.random() * (99 - 10)) + 10);
// }
//}

function addToCart(name, price) {
let priceNumber = parseFloat(price.slice(1));
if (itemsInCart === 0) $('#cart').text(" ");
let newDiv = $('<div class="cart-item"></div>');
newDiv.text(name + ' ... ' + price + ' ');
newDiv.append('<button class="btn btn-danger btn-xs" onclick="deleteItem(this)">X</button>');
newDiv.append('<hr>');
newDiv.attr('name', name);
newDiv.attr('price', priceNumber);
$('#cart').append(newDiv);
newDiv.animateCss('bounceInRight');
itemsInCart++;
$('#cartItems').text(itemsInCart);
subTotal += priceNumber;
updatePrice();
}

function deleteItem(e) {
let price = $(e.parentElement).attr('price');
subTotal -= price;
$(e.parentElement).animateCss('bounceOutRight');
$(e.parentElement).remove();
itemsInCart--;
$('#cartItems').text(itemsInCart);
updatePrice();
cartLonelyText();
}

function cartLonelyText() {
if (itemsInCart === 0)
$('#cart').append('Votre panier est vide,<br>Ajoutez un bon cadeau 🎁 ');
}

function updatePrice() {
$('#prices').empty();
if (itemsInCart === 0) return;
let newDiv = $('<div></div>');
newDiv.append('<strong>Total HT: €' + subTotal.toFixed(2) + '<br>');
newDiv.append('<strong>TVA: ' + tax * 100 + '%<br>');
newDiv.append('<strong>Total TTC: €' + (subTotal + subTotal * tax).toFixed(2) + '</strong>');

newDiv.append('<button class="btn btn-info btn-block" onclick="openModal()">Continuer</button>');

$('#prices').append(newDiv);
newDiv.animateCss('bounceInRight');
}


function cartToString() {
let itemsString = "<small><p><strong>Votre commande:</strong><br>";
let cartItems = document.querySelectorAll('.cart-item');
for (let item of cartItems) {
itemsString = itemsString + item.getAttribute('name') + " .. €" + item.getAttribute('price') + "<br>";
};
itemsString += '</p><p>Total HT: €' + subTotal.toFixed(2) + '<br>';
itemsString += 'TVA: ' + tax * 100 + '%<br>';
itemsString += 'Total TTC: <mark><strong>€' + (subTotal + subTotal * tax).toFixed(2) + '</strong></mark></p></small>';
return itemsString;

}

function openModal() {
$('#cartContentsModal').html(cartToString());
$('#myModal').modal('show');
}


function formSubmitted() {
if (!checkEmptyFields()) {// if the fields arent empty
sweetAlert("Merci!", "Merci pour votre commande!", "success");
window.document.location = "resultatoptions.php?w="+totalPrice+"";
} else {return;}
// clear cart and do other cleaning if order is OK
$('#myModal').modal('hide');
totalPrice = 0;subTotal = 0;itemsInCart = 0;
$('#cart').empty();
$('#prices').empty();
$('#cartItems').text(itemsInCart);

cartLonelyText();
}

function checkEmptyFields() {
let somethingEmpty = false;

if (!$.trim($('#formName').val()).length) {
$('#formName').animateCss('animated jello');
somethingEmpty = true;
}

if (!$.trim($('#formAddress').val()).length) {
$('#formAddress').animateCss('animated jello');
somethingEmpty = true;
}

return somethingEmpty;
}

$.fn.extend({
// https://github.com/daneden/animate.css
animateCss: function (animationName) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
this.addClass('animated ' + animationName).one(animationEnd, function () {
$(this).removeClass('animated ' + animationName);
});
return this;
} });
//# sourceURL=pen.js
</script>



</body>

</html>

Avatar du membre
webmaster
Administrateur du site
Messages : 396
Enregistré le : 28 févr. 2017, 15:19

Re: Help ! Recupérer des variables JS

Message par webmaster » 09 nov. 2020, 17:10

Bonjour,

Il faudrait publier l'ensemble en ligne pour voir ce qui se passe...
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Répondre