Candle/store.js

170 lines
4.8 KiB
JavaScript

var warenkorb = [];
if (window.location.pathname.includes("/buecher.html")) {
document.addEventListener("DOMContentLoaded", function () {
$(window).on('load',function() {
var addItemButton = document.getElementsByClassName("binPicture");
//Dieser Code Block gehört zur Warenkorb Datei
for(var i = 0;i<addItemButton.length;i++)
{
var button = addItemButton[i]
button.addEventListener('click', addtoCartClick)
}
}
);
});
}
if (window.location.pathname.includes("/warenkorb.html")) {
document.addEventListener("DOMContentLoaded", function () {
// prüfe, ob der Benutzer sich auf der warenkorb.html-Seite befindet und erstelle das DIV
// convert JSON string to relevant object
var warenkorby = localStorage.getItem("items") || [];
const parsedArray = JSON.parse(warenkorby)
addingAll(parsedArray)
}
);}
//headerinItem
//discinItem
function addtoCartClick(event)
{
var button = event.target
var shopItem = button.parentElement.parentElement
var title = shopItem.getElementsByClassName('headerinItem')[0].innerHTML
var desc = shopItem.getElementsByClassName('discinItem')[0].innerHTML
var image = shopItem.getElementsByClassName('buecherImages')[0].src
var buttonColor = shopItem.getElementsByTagName('a')[1].innerHTML
//Split the description
var firstName = desc.split(' ')[1];
var lastName = desc.split(' ')[2];
console.log(firstName)
console.log(lastName)
var description = 'von ' + firstName +' ' + lastName;
addItemToCart(title,description,image,buttonColor)
}
function addItemToCart(title,desc,image,buttonColor)
{
var cartRow = document.createElement('div')
// var cartItems = document.getElementsByClassName('containerofbuecher')[0]
var cartRowConetent = ` <div class="items" >
<img src="${image}" width="125" height="200"/>
<h3 class="headerinItem">
${title}
</h3>
<p class="discinItem">${desc}</p>
<a class="greenbutton" href="percy.html">Verfügbar</a>
<!--Buttons-->
<div class="inputPlusMinus">
<div class="input-group plus-minus-input">
<div class="input-group-button">
<button type="button" class="button hollow circle" id="minusButton" data-quantity="minus" data-field="quantity">
<i class="fa fa-minus" style="opacity: 0.7;" aria-hidden="true"></i>
</button>
</div>
<input class="input-group-field" type="number" onkeydown="return false" name="quantity" value="0">
<div class="input-group-button">
<button type="button" class="button hollow circle" id="plusButton" data-quantity="plus" data-field="quantity">
<i class="fa fa-plus" style="opacity: 0.7;" aria-hidden="true"></i>
</button>
</div>
</div>
<a class="binPicture" ><img src="pictures/bin.png" width="25" height="25"></a>
</div>
<hr style="width: 96%;">
</div>
`
try {
var warenkorby = localStorage.getItem("items") || [];
var parsedArray = JSON.parse(warenkorby)
} catch (error) {
warenkorb.push(cartRowConetent)
// convert array to JSON string using JSON.stringify()
const jsonArray = JSON.stringify(warenkorb);
// save to localStorage using "array" as the key and jsonArray as the value
localStorage.setItem('items', jsonArray);
return ;
}
var existAlready = false;
cartRow.innerHTML = cartRowConetent;
for(var j = 0;j<parsedArray.length;j++)
{
if(parsedArray[j] == cartRowConetent)
{
existAlready = true;
}
}
if(buttonColor.includes("ab"))
{
existAlready = true;
}
if(!existAlready){
var warenkorbying = localStorage.getItem("items") || [];
warenkorb = JSON.parse(warenkorbying)
warenkorb.push(cartRowConetent)
// convert array to JSON string using JSON.stringify()
const jsonArray = JSON.stringify(warenkorb);
// save to localStorage using "array" as the key and jsonArray as the value
localStorage.setItem('items', jsonArray);
// localStorage.setItem("items",warenkorb)
// cartItems.append(cartRow);
}
}
function addingAll(wat) {
// var cartItems = document.getElementsByClassName('containerOfAll')[0];
for (var i = 0; i < wat.length; i++) {
/* var cartRow = document.createElement('div');
cartRow.insertAdjacentHTML('beforeend', wat[i]);
cartItems.appendChild(cartRow);
*/
insertHTMLStringToContainer(wat[i],"containerOfAll")
}
}
function insertHTMLStringToContainer(htmlString, containerId) {
var container = document.getElementsByClassName(containerId)[0];
container.insertAdjacentHTML('beforeend', htmlString);
}