No, I think he wants to render either div.container-products or div.empty-cart right? You could achieve this by setting the display css property of both HTML elements (one to none and one to e.g. inline) depending on the length of cartItems. Look here for how you can set css properties: https://www.w3schools.com/js/js_htmldom_css.asp
Solution 1 :
Solution 2 :
Try with below code , you need to add let emptycart= document.querySelector('.empty-cart'); in javascript and then in else condition you can set design
function displayCart() {
let cartItems = localStorage.getItem('productsInCart');
cartItems = JSON.parse(cartItems);
let cart = localStorage.getItem("totalCost");
// cart = parseInt(cart);
let productContainer = document.querySelector('.products');
let emptycart= document.querySelector('.empty-cart');
let cartCost = localStorage.getItem('totalCost');
if( cartItems && productContainer ) {
productContainer.innerHTML = '';
Object.values(cartItems).map( (item, index) => {
productContainer.innerHTML +=
`<div class="product"><ion-icon name="close-circle"></ion-icon><img src="assets/images/${item.title}.jpg" width=200px height=150px/>
<span class="sm-hide">${item.title}</span>
</div>
<div class="price sm-hide">₹${item.price}.00</div>
<div class="quantity">
<ion-icon class="decrease " name="arrow-dropleft-circle"></ion-icon>
<span>${item.inCart}</span>
<ion-icon class="increase" name="arrow-dropright-circle"></ion-icon>
</div>
<div class="total">₹${item.inCart * item.price}.00</div>`;
});
productContainer.innerHTML += `
<div class="basketTotalContainer">
<h4 class="basketTotalTitle">
Basket Total
</h4>
<h4 class="basketTotal">
₹${cartCost}.00
</h4>
`;
}
else
{
emptycart.innerHTML = '
<div lass="empty-cart">
<h1>Cart Empty </h1>
<p>You Haven t Ordered a pizza yet. To order a pizza go to the main page.</p>
<img src="assets/images/empty-cart.png" alt="">
</div>'
}
deleteButtons();
manageQuantity();
}
Solution 3 :
Now is better ?
html
<div class="container-products">
<div class="product-header">
<h5 class="product-title">PRODUCT</h5>
<h5 class="price sm-hide">PRICE</h5>
<h5 class="quantity">QUANTITY</h5>
<h5 class="total">TOTAL</h5>
</div>
<div class="products">
</div>
<div class="emtyproducts">
</div>
js
function displayCart() {
let cartItems = localStorage.getItem('productsInCart');
cartItems = JSON.parse(cartItems);
let cart = localStorage.getItem("totalCost");
// cart = parseInt(cart);
let productContainer = document.querySelector('.products');
let cartCost = localStorage.getItem('totalCost');
let containerPoduct = document.querySelector('.container-products');
containerPoduct.style.display ='none';
let emptyPoduct = document.querySelector('.emtyproducts');
emptyPoduct.style.display ='none';
if( cartItems.length === 0 && productContainer ) {
containerPoduct.style.display ='';
productContainer.innerHTML = '';
Object.values(cartItems).map( (item, index) => {
productContainer.innerHTML +=
`<div class="product"><ion-icon name="close-circle"></ion-icon><img src="assets/images/${item.title}.jpg" width=200px height=150px/>
<span class="sm-hide">${item.title}</span>
</div>
<div class="price sm-hide">₹${item.price}.00</div>
<div class="quantity">
<ion-icon class="decrease " name="arrow-dropleft-circle"></ion-icon>
<span>${item.inCart}</span>
<ion-icon class="increase" name="arrow-dropright-circle"></ion-icon>
</div>
<div class="total">₹${item.inCart * item.price}.00</div>`;
});
productContainer.innerHTML += `
<div class="basketTotalContainer">
<h4 class="basketTotalTitle">
Basket Total
</h4>
<h4 class="basketTotal">
₹${cartCost}.00
</h4>
`;
}
else
{
emptyPoduct.innerHTML = '<div lass="empty-cart"> <h1>Cart Empty </h1> <p>You Haven t Ordered a pizza yet. To order a pizza go to the main page.
</p> <img src="assets/images/empty-cart.png" alt="">
</div>';
emptyPoduct.style.display ='';
}
}
Solution 4 :
Use this example:
<html>
<body>
<div id="empty">Empty</div>
<div id="not-empty">Not Empty</div>
<script>
const empty = document.getElementById("empty");
const notEmpty = document.getElementById("not-empty");
// const array = [];
const array = ['element'];
if (array.length === 0) {
empty.style.display = 'inline';
notEmpty.style.display = 'none';
} else {
empty.style.display = 'none';
notEmpty.style.display = 'inline';
}
</script>
</body>
</html>
Problem :
I created a shopping cart using Javascript. I’m trying to output a “Your cart is empty.” with an image message when the shopping cart is empty. This is my displayCart
function displayCart() {
let cartItems = localStorage.getItem('productsInCart');
cartItems = JSON.parse(cartItems);
let cart = localStorage.getItem("totalCost");
// cart = parseInt(cart);
let productContainer = document.querySelector('.products');
let cartCost = localStorage.getItem('totalCost');
if( cartItems && productContainer ) {
productContainer.innerHTML = '';
Object.values(cartItems).map( (item, index) => {
productContainer.innerHTML +=
`<div class="product"><ion-icon name="close-circle"></ion-icon><img src="assets/images/${item.title}.jpg" width=200px height=150px/>
<span class="sm-hide">${item.title}</span>
</div>
<div class="price sm-hide">₹${item.price}.00</div>
<div class="quantity">
<ion-icon class="decrease " name="arrow-dropleft-circle"></ion-icon>
<span>${item.inCart}</span>
<ion-icon class="increase" name="arrow-dropright-circle"></ion-icon>
</div>
<div class="total">₹${item.inCart * item.price}.00</div>`;
});
productContainer.innerHTML += `
<div class="basketTotalContainer">
<h4 class="basketTotalTitle">
Basket Total
</h4>
<h4 class="basketTotal">
₹${cartCost}.00
</h4>
`;
}
deleteButtons();
manageQuantity();
}
This is my products div
<div class="container-products">
<div class="product-header">
<h5 class="product-title">PRODUCT</h5>
<h5 class="price sm-hide">PRICE</h5>
<h5 class="quantity">QUANTITY</h5>
<h5 class="total">TOTAL</h5>
</div>
<div class="products">
</div>
</div>
I want to display this when my cart is empty. How can i do this .Help me please
<div class="empty-cart">
<h1>Cart Empty </h1>
<p>You Haven't Ordered a pizza yet.
To order a pizza go to the main page.
</p>
<img src="assets/images/empty-cart.png" alt="">
</div>
Comments
Comment posted by Tarmo
Your items are in an array called
Comment posted by Anshuman Mishra
Yes I want to display either .div.container-products or div.empty-cart.
Comment posted by Peter Holzer
Ok, than as I said you could simply adjust the css properties:
Comment posted by Peter Holzer
Can you again post what you have written?
Comment posted by Anshuman Mishra
This works but I want to hide .div.container-products and only show the empty-cart. But by doing above code it shows both divs.