Sujet Précédent Sujet Suivant

Shopping cart

Fermé
krayem90 Messages postés 5 Date d'inscription samedi 3 novembre 2018 Statut Membre Dernière intervention 3 juillet 2020 - 2 juil. 2020 à 21:57
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 - 4 juil. 2020 à 00:53
Bonjour tout le monde, je veux calculer le total des articles, c'est à dire quand l'utilisateur appuie sur les boutons "+" ou "-" le total varie.
Aussi les boutons + et - ne marche pas correctement.
Merci pour votre aide, je suis vraiment bloqué.
Je vous partage ci-dessous le lien du code (HTML , CSS, et JAVASCRIPT)
https://github.com/KARIMOUESLATI/shopping-cart12

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
3 juil. 2020 à 00:08
Bonjour

Merci de partager ton code directement ici en utilisant les balises de code
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

.
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
3 juil. 2020 à 09:19
Je remarque au passage qu'il nous manque un fichier js 
 <script src="/shopping card/script.js"></script>

Et, à moins que ça ne soit dedans, rien dans ton code ne modifie le total.......
Si tu veux de l'aide, montres nous ce que tu as essayé de faire... sans ça, pas de réponse de notre part ( on ne fourni pas de code tout cuit... )
0
Réponse 2 / 2
krayem90 Messages postés 5 Date d'inscription samedi 3 novembre 2018 Statut Membre Dernière intervention 3 juillet 2020
Modifié le 4 juil. 2020 à 00:50
Merci jordane45, ci-dessous le code javascript , HTML , et css


Le code HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
    <script src="js.js" async></script>
</head>
<body>
    <header><h1>Total : <span id="total">0</span> $</h1></header>
    
    <nav>
<ul>
    <li>like</li>
    <li>product</li>
    <li>quantity</li>
    <li>price</li>
    <li>remove</li>
</ul>
    </nav>
    <section>
        <div>
            <ion-icon id="likes" name="heart"></ion-icon>
          
            <img class="image" src="https://cdn.shoplightspeed.com/shops/619825/files/9115781/768x768x2/cordoba-guitare-classique-cordoba-protege-c1.jpg" alt="Guitar classique"/>
            <p>
                <button class="minus">-</button>
                <span class="counter">0</span>
                <button class="plus">+</button>
              </p>
              <p>100 TND</p>
              <ion-icon name="trash-outline"></ion-icon>

             </div>
        <div>
            <ion-icon id="likes"  name="heart"></ion-icon>
        <img class="image" src="https://d1aeri3ty3izns.cloudfront.net/media/25/251309/1200/preview_2.jpg" alt="Guitar electrique">
        <p>
            <button class="minus">-</button>
            <span class="counter">0</span>
            <button class="plus">+</button>
          </p>
         <span class="price">200</span>  TND
          <ion-icon name="trash-outline"></ion-icon>

          </div>
   
       
     <div>
        <ion-icon id="likes"  name="heart"></ion-icon>
        <img class="image" src="https://www.pmtonline.co.uk/media/catalog/product/cache/1/image/1999x/9df78eab33525d08d6e5fb8d27136e95/5/4/54400-172112-yamaha-trbx604fm-translucent-black-1.jpg" alt="Guitar Bass">
        <p>
            <button class="minus">-</button>
            <span class="counter">0</span>
            <button class="plus">+</button>
          </p>
          <p>300 TND</p>
          <ion-icon name="trash-outline"></ion-icon>

    </div>
    </section>
    
       
    
    <script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
    <script src="/shopping card/script.js"></script>
    </body>
</html>


le code css 

    {

padding: 0;
margin: 0;
box-sizing: border-box;
}
nav ul {
display: flex;
justify-content: space-around;

}
nav ul li {
list-style-type: none;

}

section div{
display: flex;
justify-content: space-around;
margin-bottom: 60px;
align-items: center;


}
section{
margin-top: 30px;


}

.image {
height: 100px;
width: 100px;
}


le code javascript: 


let likes =Array.from(document.querySelectorAll("#likes"))
let minus=Array.from(document.querySelectorAll(".minus"))
let plus=Array.from(document.querySelectorAll (".plus"))






function changeColor(el) {
if (el.target.style.color !== "red") {
el.target.style.color = "red";
} else {
el.target.style.color = "black";
}
}
for (let i = 0; i <likes.length; i++) {
likes[i].addEventListener("click", changeColor);
plus[i].addEventListener("click", increment);
minus[i].addEventListener("click", decrement);
}


function increment(el) {
el.target.previousElementSibling.innerText =
Number(el.target.previousElementSibling.innerText) + 1;
console.log(el)

}
function decrement(el) {
if (Number(el.target.nextElementSibling.innerText) > 0) {
el.target.nextElementSibling.innerText =
Number(el.target.nextElementSibling.innerText) - 1;

}
}


EDIT : Ajout des balises de code
EDIT² : Regroupement de tous les codes dans UN SEUL message !
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
4 juil. 2020 à 00:53
Je ne vois toujours pas dans ton code là où tu modifies le total...

Et on a toujours pas le contenu de ton fichier /shopping card/script.js
0

Discussions similaires

arnaque site factory shop
aligc3s -
Afrikarnak -

2 réponses
Ce site est-il une arnaque ?!?
Doughans -
Gege -

13 réponses
Foot factory shop arnaque ?
Imoreb -
Alex42 -

45 réponses
mondoshopping-boutique
hommedunord50 -
hommedunord50 -

2 réponses
Commande non reçue ONLINE STORE
Pat -
Leo -

4 réponses