I need that it pass image and audio of product to checkout page,I already did that with price of product name and licence I really dont know how , without hardcoding it please can you help me!
heres product page
<header>
<!--Nav-->
<div class="nav container">
<a href="">Deni Beatz</a>
<!--Cart Icon-->
<i class="bx bx-shopping-bag" id="cart-icon"></i>
<div class="notification" id="cart-notification">0</div>
<!--Cart-->
<div class="cart">
<h2 class="cart-title">Your Cart</h2>
<!--Content-->
<div class="cart-content">
<div class="cart-content">
</div>
</div>
<!--Total-->
<div class="total">
<div class="total-title">Total</div>
<div class="total-price" id="total-price total">$0</div>
</div>
<!--Buy Button-->
<form action="checkout.html">
<button type="button" class="btn-buy" onclick="window.location.href = 'checkout.html';">Continue to purchase</button>
</form>
<!--Cart Close-->
<i class="bx bx-x" id="close-cart"></i>
<!-- Continue to purchase button moved here -->
</div>
</div>
</header>
<section id="prodetails" class="section-p1">
<div class="productcontainer" id="enjoy">
<div class="single-pro-image">
<img src="../data/high.png" width="100%" id="product-image" class="product-img">
</div>
<div class="single-pro-details" action="C:sstarter-rubyclientcheckout.html">
<h4 class="product-title" id="title">Enjoy</h4>
<h2 id="price" class="price">$20</h2>
<select id="select" class="licence">
<option>Select Licence</option>
<option>MP3</option>
<option>Tagged Wav</option>
<option>Un-Tagged Wav</option>
<option>Stems</option>
<option>Exlusive</option>
</select>
<script>
let select = document.getElementById('select');
let price = document.getElementById('price');
// Prices
let prices = {
"Select Licence": '$20',
"MP3": '$20',
"Tagged Wav": '$27',
"Un-Tagged Wav": '$30',
"Stems": '$120',
"Exlusive": '$300'
}
// When the value of select changes, this event listener fires and changes the text content of price to the coresponding value from the prices object
select.addEventListener('change', () => {
price.textContent = prices[select.value];
});
</script>
<button class="add-cart">Add To Cart <i class='bx bx-cart-add add-cart'></i></button>
<h4>Product Details</h4>
<span>Lil Tjay x Trap Type Beat - "Enjoy" in key D# Minor and 160 BPM,It has vibe of Lil Tjay , Pop Smoke and more , Prices are great for this type of beat;Tagged Mastered MP3 for $25,$27 for Tagged Unmastered Wav,$30 for Untagged unmastered Wav,$70 for Stems and $120 for Exlusive</span>
</div>
<div id="audio">
<audio controls style="width:100%;" id="audio-clip">
<source src="Audio/Enjoy 160 x D sharp minor.mp3" type="audio/mp3">
</audio>
</div>
</section>
<script>
var selectedItems = [];
const addToCartButton = document.querySelector('.add-cart');
if (addToCartButton) {
addToCartButton.addEventListener('click', () => {
const productTitle = document.querySelector('#title').textContent;
const productPrice = document.querySelector('#price').textContent;
const selectedLicense = document.querySelector('#select').value;
const cartItem = {
title: productTitle,
price: productPrice,
license: selectedLicense,
};
selectedItems.push(cartItem);
console.log(selectedItems);
localStorage.setItem('selectedItems', JSON.stringify(selectedItems));
});
}
</script>
and heres checkout page
<h2 style="text-align:center;">Checkout</h2>
<div id="cart-items">
<p style="text-align:center;">YOU ADDED THIS PRODUCTS</p>
<hr />
<div class="product-container">
<div class="cart-items"></div>
</div>
</div>
<div class="total">
<h3 style="text-align:center;">Tax: <br><span id="tax"></span></h3>
<h3 style="text-align:center;">Subtotal: <br><span id="subtotal"></span></h3>
<h3 style="text-align:center;">Total: <br><span id="total"></span></h3>
<a href="http://localhost:4242"><button style="display:block;">Continue to payment</button></a>
<a href="http://localhost:4242"><button style="display:block; background-color: rgb(216, 4, 4);">Cancel</button></a> <!--Make next to eachself and red and blue color for button-->
</div>
<script>
const cartItemsDiv = document.querySelector(".cart-items");
const storedCartItem = localStorage.getItem("selectedItems");
const taxRate = 0.1; // 10% tax rate
let subtotal = 0;
if (storedCartItem) {
const cartItem = JSON.parse(storedCartItem); // Parse the storedCartItem string into an array
for (let i = 0; i < cartItem.length; i++) {
const cartItemElement = document.createElement("div");
cartItemElement.innerHTML = `
<h3>${cartItem[i].title}</h3>
<p>Price: ${cartItem[i].price}</p>
<p>License: ${cartItem[i].license}</p>
`;
cartItemsDiv.appendChild(cartItemElement);
const price = Number(cartItem[i].price.replace("$", "")); // Parse price as a number and remove dollar sign
subtotal += price;
}
const subtotalElement = document.querySelector("#subtotal");
subtotalElement.textContent = `$${subtotal.toFixed(2)}`;
const taxElement = document.querySelector("#tax");
const tax = subtotal * taxRate;
taxElement.textContent = `$${tax.toFixed(2)}`;
const totalElement = document.querySelector("#total");
const total = subtotal + tax;
totalElement.textContent = `$${total.toFixed(2)}`;
}
</script>
It display name licence and price of added products but now i need that it display image and audio of added product without hardcoding it !