|
@@ -394,12 +394,13 @@ store.subscribe(() => {
|
|
|
if (catById?.payload && route === "category") {
|
|
|
const { name, goods, subCategories } = catById?.payload;
|
|
|
categoryName.innerHTML = `<h1>${name}</h1>`;
|
|
|
-
|
|
|
var element = document.getElementById("productBlock");
|
|
|
while (element.firstChild) {
|
|
|
element.removeChild(element.firstChild);
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+
|
|
|
if (subCategories) {
|
|
|
for (let { name, _id } of subCategories) {
|
|
|
const link = document.createElement("a");
|
|
@@ -409,23 +410,31 @@ store.subscribe(() => {
|
|
|
productBlock.append(link);
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- for (let { _id, name, price, images } of goods) {
|
|
|
+
|
|
|
+ for (let { _id, name, price, images, } of goods) {
|
|
|
+ // console.log()
|
|
|
const description = document.createElement("div");
|
|
|
const textBlock = document.createElement("div");
|
|
|
const imgProduct = document.createElement("img");
|
|
|
const a = document.createElement("p");
|
|
|
const productPrice = document.createElement("p");
|
|
|
const linkCard = document.createElement("a");
|
|
|
+ const addToCartButton = document.createElement('button')
|
|
|
+
|
|
|
+ addToCartButton.innerHTML = "add to cart"
|
|
|
+ addToCartButton.id = "addToCartButtonn"
|
|
|
|
|
|
- productBlock.append(linkCard);
|
|
|
+ linkCard.innerHTML = "About the product"
|
|
|
linkCard.href = `#/good/${_id}`;
|
|
|
+
|
|
|
+ linkCard.className = "linkCard"
|
|
|
|
|
|
- linkCard.append(description);
|
|
|
+ productBlock.append(description);
|
|
|
description.setAttribute("class", "card");
|
|
|
description.id = "card";
|
|
|
|
|
|
description.append(imgProduct);
|
|
|
+
|
|
|
|
|
|
imgProduct.src = `${backendURL}/${images[0].url}`;
|
|
|
|
|
@@ -437,10 +446,13 @@ store.subscribe(() => {
|
|
|
productPrice.innerHTML = "price: " + price;
|
|
|
textBlock.append(productPrice);
|
|
|
|
|
|
- const addToCartButton = document.createElement("p");
|
|
|
- addToCartButton.innerText = "click to buy";
|
|
|
- addToCartButton.className = "addToCartButton";
|
|
|
- textBlock.append(addToCartButton);
|
|
|
+ textBlock.append(linkCard);
|
|
|
+ textBlock.append(addToCartButton)
|
|
|
+
|
|
|
+ addToCartButton.onclick = () => {
|
|
|
+ store.dispatch(actionCartAdd({_id, name, price, images,}));
|
|
|
+ };
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
});
|
|
@@ -454,6 +466,7 @@ const goodFineOneImg = document.createElement("img");
|
|
|
const goodFineOnePrice = document.createElement("p");
|
|
|
const goodFineOneDescription = document.createElement("p");
|
|
|
const goodFineOneAddToCartButton = document.createElement("button");
|
|
|
+
|
|
|
const buttonPlus = document.createElement("button");
|
|
|
const buttonMinus = document.createElement("button");
|
|
|
buttonPlus.innerHTML = "+";
|
|
@@ -487,6 +500,12 @@ store.subscribe(() => {
|
|
|
goodFineOneAddToCartButton.onclick = () => {
|
|
|
store.dispatch(actionCartAdd(GoodFineOne.payload));
|
|
|
};
|
|
|
+
|
|
|
+ // const a = document.getElementById(addToCartButtonn)
|
|
|
+ // a.onclick = () => {
|
|
|
+ // store.dispatch(actionCartAdd(GoodFineOne.payload));
|
|
|
+ // };
|
|
|
+
|
|
|
}
|
|
|
});
|
|
|
|
|
@@ -542,18 +561,20 @@ store.subscribe(() => {
|
|
|
|
|
|
divToCardBlock.id = "divToCartBlock";
|
|
|
const divToCart = document.createElement("div");
|
|
|
-
|
|
|
const goodByIdImage = document.createElement("img");
|
|
|
const goodByIdName = document.createElement("h2");
|
|
|
const goodByIdCount = document.createElement("h2");
|
|
|
const buttonPlus = document.createElement("button");
|
|
|
const buttonMinus = document.createElement("button");
|
|
|
+ const removePosition = document.createElement("button")
|
|
|
|
|
|
buttonBuy.style.display = "block";
|
|
|
buttonBuy.innerHTML = "Buy";
|
|
|
|
|
|
goodByIdPrice.innerHTML = "Total: " + priceSum;
|
|
|
|
|
|
+ removePosition.innerHTML = "Remove"
|
|
|
+ removePosition.id = "removePosition"
|
|
|
buttonPlus.innerHTML = "+";
|
|
|
buttonMinus.innerHTML = "-";
|
|
|
buttonPlus.id = "buttonPlus";
|
|
@@ -567,6 +588,7 @@ store.subscribe(() => {
|
|
|
divToCart.append(goodByIdCount);
|
|
|
divToCart.append(buttonPlus);
|
|
|
divToCart.append(buttonMinus);
|
|
|
+ divToCart.append(removePosition)
|
|
|
bPoputContainer.append(buyBlock);
|
|
|
buyBlock.append(goodByIdPrice);
|
|
|
buyBlock.append(buttonBuy);
|
|
@@ -586,6 +608,8 @@ store.subscribe(() => {
|
|
|
store.dispatch(actionCartDelete(value.good));
|
|
|
console.log(value.good, "this");
|
|
|
};
|
|
|
+
|
|
|
+ removePosition.onclick = () => store.dispatch(actionCartRemove(value.good))
|
|
|
}
|
|
|
|
|
|
shoppingCart.innerHTML = "Cart: " + countSum;
|
|
@@ -733,13 +757,22 @@ store.subscribe(() => {
|
|
|
|
|
|
for (let [key, value] of Object.entries(history.payload)) {
|
|
|
const { _id, createdAt, total, orderGoods } = value;
|
|
|
- const h2 = document.createElement("h2");
|
|
|
- h2.className = "h2History"
|
|
|
- const dateOfOrder = new Date(+createdAt);
|
|
|
- h2.innerHTML = `${dateOfOrder.toLocaleDateString()} ${dateOfOrder.toLocaleTimeString()}
|
|
|
- Order ID: ${_id} от , c ${orderGoods.length} goods worth: ${total}`;
|
|
|
- bPopupContent.append(h2);
|
|
|
-
|
|
|
+ const historyDiv = document.createElement("div")
|
|
|
+ historyDiv.style = 'padding-right: 100px'
|
|
|
+ bPopupContent.append(historyDiv)
|
|
|
+ const card = document.createElement('div')
|
|
|
+ card.style = 'width: 100%;border-style: groove;border-color: #black;padding: 10px;border-radius: 10px;margin: 5px;'
|
|
|
+ card.innerHTML = `<h3>Order: ${createdAt}</h3>`
|
|
|
+ for (const {count, good} of orderGoods){2
|
|
|
+ const divGood = document.createElement('div')
|
|
|
+ divGood.style= "display:flex;margin-bottom: 20px;"
|
|
|
+
|
|
|
+ divGood.innerHTML += `<div>Product: <b>${good.name}</b><br> Price: <b>${good.price}</b><br> Count: <b>${count} </b></b></div><img style="max-width: 80px;margin-right: 20px;display: block;margin-left: auto;" src="http://shop-roles.node.ed.asmer.org.ua/${good.images[0].url}"/><br><br>`
|
|
|
+ card.append(divGood)
|
|
|
+ }
|
|
|
+ card.innerHTML += 'Date: <b>'+new Date(+createdAt).toLocaleString().replace(/\//g, '.')+'</b>'
|
|
|
+ card.innerHTML += `<br>Total: <b style="color:red;">${total}</b>`
|
|
|
+ historyDiv.append(card)
|
|
|
|
|
|
}
|
|
|
|
|
@@ -757,6 +790,31 @@ store.subscribe(() => {
|
|
|
};
|
|
|
});
|
|
|
|
|
|
+// store.subscribe(() => {
|
|
|
+// const {orderFind} = (store.getState()).promise
|
|
|
+// const [,route, _id] = location.hash.split('/')
|
|
|
+
|
|
|
+// if (orderFind?.payload && route === 'orderFind'){
|
|
|
+// main.innerHTML='<h1>История заказов</h1>'
|
|
|
+
|
|
|
+// for (const {_id, createdAt, total,orderGoods} of orderFind.payload.reverse()){
|
|
|
+// const card = document.createElement('div')
|
|
|
+// card.style = 'width: 100%;border-style: groove;border-color: #ced4da17;padding: 10px;border-radius: 10px;margin: 5px;'
|
|
|
+// card.innerHTML = `<h3>Заказ: ${createdAt}</h3>`
|
|
|
+// for (const {count, good} of orderGoods){2
|
|
|
+// const divGood = document.createElement('div')
|
|
|
+// divGood.style= "display:flex;margin-bottom: 20px;"
|
|
|
+
|
|
|
+// divGood.innerHTML += `<div>Товар: <b>${good.name}</b><br> Цена: <b>${good.price} грн.</b><br> Количество: <b>${count} шт.</b></b></div><img style="max-width: 80px;margin-right: 20px;display: block;margin-left: auto;" src="http://shop-roles.node.ed.asmer.org.ua/${good.images[0].url}"/><br><br>`
|
|
|
+// card.append(divGood)
|
|
|
+// }
|
|
|
+// card.innerHTML += 'Дата: <b>'+new Date(+createdAt).toLocaleString().replace(/\//g, '.')+'</b>'
|
|
|
+// card.innerHTML += `<br>Всего: <b style="color:red;">${total} грн.</b>`
|
|
|
+// main.append(card)
|
|
|
+// }
|
|
|
+// }
|
|
|
+// })
|
|
|
+
|
|
|
login.onclick = () => {
|
|
|
bPopupCreate(buttonLogin);
|
|
|
buttonLogin.onclick = () => {
|