Skip to content

Commit 1926f52

Browse files
proger-coderproger-coder
committed
to fix: CartRoute, glasses,About bottom figures, vert long tablet overflow
1 parent 4f191c6 commit 1926f52

File tree

6 files changed

+96
-92
lines changed

6 files changed

+96
-92
lines changed

‎Classes/Cart.js

+26-38
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,47 @@
11
export class Cart{
2-
cartBox = this.getFromLS() || []; //объекты {item:{item}, S:3}
3-
//надо в объекты {item:{item}, sizes:{S:3, M:2}}
2+
cartBox = this.getFromLS() || []; //массив объектов [{item:{},size:S,amount:1}},{item:{},size:M,amount:4}} ]
43

5-
addToCart(item = {name:'defName',price:999}, sizes = {XXL:1}){
6-
7-
if(this.cartBox.length === 0){ //массив пуст - смело пушим!! 1 товар - 1 строка. item, sizes
8-
this.cartBox.push({item,sizes})
4+
addToCart(orderedList = [{item:{id:"default"}, size:"RR", amount:99}]){
5+
if(_.isEmpty(this.cartBox)){ // для лодаша, подключенного через <script>
6+
this.cartBox = orderedList
97
}
10-
else{ //массив не пуст
11-
let matchItem = this.cartBox.find(el => el.item.name === item.name) //предполагаемое совпадение
12-
13-
if(!matchItem){ //совпадения по имени нет - пушим
14-
this.cartBox.push({item,sizes})
15-
}
16-
else { //есть совпадение по имени. Сращиваем объекты размеров у входящего item и match
17-
18-
Object.keys(sizes).forEach(incomSize => { //для каждого входящего размера
19-
if (matchItem.sizes[incomSize]){ //...если в размерах совпавшего есть такой ключ, то...
20-
matchItem.sizes[incomSize] += sizes[incomSize] //..плюсуем! и выходим досрачно
21-
return
8+
else{
9+
orderedList.forEach(order => { //для очередного входящего
10+
let match = false; //флаг)) по умолчанию совпадений нет
11+
this.cartBox.find(yetItem => { //Чтобы не городить двойной цикл - поиск функцией
12+
if (yetItem.item.id === order.item.id && yetItem.size === order.size){
13+
yetItem.amount += order.amount
14+
match = true //...было дело, значит ))
2215
}
23-
matchItem.sizes[incomSize] = sizes[incomSize] //а раз не вышли, то ключа не было - присваиваем новый ключ
2416
})
25-
}
17+
if(!match){ // а раз не нашлось совпадений - пушим
18+
this.cartBox.push(order)
19+
}
20+
})
2621
}
2722
console.log('this CartBox = ',this.cartBox)
2823
}
2924

30-
//убавить на 1 позицию данного товара - продумать, как быть с галками
31-
removeOneLine(i){
32-
this.cartBox = this.cartBox.filter(el => el !== this.cartBox[i])
33-
};
3425

35-
//сложить счётчики у всех товаров в корзине
26+
//сложить счётчики у всех товаров в корзине. ЙЕЕЕЕЕЕЕЕЕЕЕЕЕЕЕЕ
3627
totalItems(){
37-
return this.cartBox.reduce((initial,cartString) => {
38-
let amountForString = 0;
39-
Object.values(cartString.sizes).forEach(amountOfSize => {
40-
amountForString += amountOfSize
41-
})
42-
return initial + amountForString;
43-
},0);
28+
return this.cartBox.reduce((initial, cartString) => {
29+
return initial + cartString.amount
30+
},0)
4431
};
4532

4633
//сложить цены у всех товаров в корзине, перемножив сумму размеров в ordered на цену товара
4734
totalPrice(){
48-
return this.cartBox.reduce((initial,cartString) => {
49-
let amountForString = 0;
50-
Object.values(cartString.sizes).forEach(amountOfSize => {
51-
amountForString += amountOfSize
52-
})
53-
return initial + amountForString * cartString.item.price;
35+
return this.cartBox.reduce((initialPrice, cartString) => {
36+
return initialPrice + cartString.item?.price * cartString.amount
5437
},0)
5538
};
5639

40+
//убавить на 1 позицию данного товара - продумать, как быть с галками
41+
removeOneLine(i){
42+
this.cartBox = this.cartBox.filter(el => el !== this.cartBox[i]);
43+
};
44+
5745
saveToLS(){
5846
localStorage.setItem('Clothery',JSON.stringify(this.cartBox));
5947
}

‎Routes/CartRoute.js

+54-47
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,60 @@
1+
// рефакторить КартРОУТ - чтобы выводило по размерам + рефекторить Карт, чтобы удаляло по размеру
12
export const CartRoute = {
23
props:['items',`cart`],
34
template:`
4-
<div class="CartRoute-main-container" >
5-
<h4 class="CartRoute-header-info">Корзина
6-
<span v-if="totalItems > 0">: всего товаров {{cart.totalItems()}} на сумму {{cart.totalPrice()}} руб</span>
7-
<span v-if="cart.totalItems() === 0">пуста...</span>
8-
</h4>
9-
<div v-if="cart.totalItems() > 0" class="CartRoute-allRows-container">
10-
<div v-for="(position,i) in cart.cartBox" class="CartRoute whole-row-container">
11-
<div class="row pic-name-container">
12-
<router-link :to="'/item/' + position.item.id">
13-
<div class=""> {{position?.item.name?.slice(9)}} <br>
14-
<img :src="position.item?.media?.images[0].image160pxUrl" alt="160">
15-
</div>
16-
</router-link>
17-
</div>
18-
<div class="row-info-container">
19-
Кол-во:
20-
<select class="row-info-container-select"
21-
:id="size(position)"
22-
:name="size(position)"
23-
:selectedIndex="amount(position)-1"
24-
@change="refresher(position)">
25-
<option v-for="i in amount(position)+5"
26-
:value="i"
27-
class="item size-amount-selector" >{{ i }}</option>
28-
</select>
29-
<div class>Размер: {{ size(position) }}</div>
30-
<div class="">На сумму {{ amount(position) * position.item.price }} р</div>
31-
<div class="row-delete-item-x" :data="i" @click="cart.removeOneLine(i),cart.saveToLS()"> X </div>
32-
</div>
33-
</div>
34-
</div>
5+
<div class="CartRoute-main-container">
6+
<h4 class="CartRoute-header-info">Корзина
7+
<span v-if="totalItems > 0">: всего товаров {{ cart.totalItems() }} на сумму {{ cart.totalPrice() }} руб</span>
8+
<span v-if="cart.totalItems() === 0">пуста...</span>
9+
</h4>
10+
<div v-if="cart.totalItems() > 0" class="CartRoute-allRows-container">
11+
3512
36-
<div class="CartRoute-order-button"
37-
v-if="cart.totalItems() > 0"
38-
id="orderRequestButton"
39-
@click="showDialog(),cart.clearLS()">Оформить заказ</div>
40-
41-
<dialog class="cart-route-dialog">Поздравляем с покупкой! <br>
42-
<p v-if="cart.totalPrice() >= 15000">Ваш промокод на скидку в 15%: <span>{{cart.promoCodeGen(15)}}</span></p> <br>
43-
<p v-if="cart.totalPrice() >= 10000 && cart.totalPrice() < 15000">Ваш промокод на скидку в 10%: <span>{{cart.promoCodeGen(10)}}</span></p> <br>
44-
<router-link to="/">
45-
<p class="close-dialog-red-x" @click="hideDialog(),cart.cartBox=[]">Закрыть</p>
46-
</router-link>
47-
</dialog>
48-
</div>`,
13+
<div v-for="(position,i) in cart.cartBox" class="CartRoute whole-row-container">
14+
<div class="row pic-name-container">
15+
<router-link :to="'/item/' + position.item.id">
16+
<div class=""> {{ position?.item.name?.slice(9) }} <br>
17+
<img :src="position.item?.media?.images[0].image160pxUrl" alt="160">
18+
</div>
19+
</router-link>
20+
</div>
21+
<div class="row-info-container">
22+
Кол-во:
23+
<select class="row-info-container-select"
24+
:id="size(position)"
25+
:name="size(position)"
26+
:selectedIndex="amount(position)-1"
27+
@change="refresh(position)">
28+
<option v-for="i in amount(position)+5"
29+
:value="i"
30+
class="item size-amount-selector">{{ i }}
31+
</option>
32+
</select>
33+
<div class>Размер: {{ size(position) }}</div>
34+
<div class="">На сумму {{ amount(position) * position.item.price }} р</div>
35+
<div class="row-delete-item-x" :data="i" @click="cart.removeOneLine(i),cart.saveToLS()"> X</div>
36+
</div>
37+
</div>
38+
</div>
39+
40+
<div class="CartRoute-order-button"
41+
v-if="cart.totalItems() > 0"
42+
id="orderRequestButton"
43+
@click="showDialog(),cart.clearLS()">Оформить заказ
44+
</div>
45+
46+
<dialog class="cart-route-dialog">Поздравляем с покупкой! <br>
47+
<p v-if="cart.totalPrice() >= 15000">Ваш промокод на скидку в 15%: <span>{{ cart.promoCodeGen(15) }}</span></p>
48+
<br>
49+
<p v-if="cart.totalPrice() >= 10000 && cart.totalPrice() < 15000">Ваш промокод на скидку в 10%:
50+
<span>{{ cart.promoCodeGen(10) }}</span></p> <br>
51+
<router-link to="/">
52+
<p class="close-dialog-red-x" @click="hideDialog(),cart.cartBox=[]">Закрыть</p>
53+
</router-link>
54+
</dialog>
55+
</div>`,
4956
methods:{
5057
size(position){
51-
5258
return Object.keys(position)[1];
5359
},
5460
amount(position){
@@ -68,8 +74,9 @@ export const CartRoute = {
6874
return start + item
6975
})
7076
},
71-
refresher(position){
72-
position[this.size(position)] = +event.target.value
77+
refresh(position,size){
78+
//position[this.size(position)] = +event.target.value
79+
position.sizes[size] = +event.target.value
7380
}
7481
},
7582
data(){

‎Routes/Item.js

+10-6
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export const Item = {
6868
</div>
6969
</fieldset>
7070
<div v-if="!ordered"
71-
@click="cart.addToCart(item, orderedSizes()),
71+
@click="cart.addToCart(orderedList()),
7272
cart.saveToLS(),
7373
ordered=true,
7474
clearFlags()"
@@ -122,17 +122,21 @@ export const Item = {
122122
}
123123
},
124124
//работа с выбранными чекбоксами - а если размеров нет? как у очков
125-
orderedSizes(){
126-
let ordered = {}
125+
orderedList(){
126+
let orderedList = []
127127
let selects = document.querySelectorAll('select')
128128

129129
selects.forEach(el =>{ //чтобы нули не улетали в корзину
130130
if(el.value !== '0'){
131-
ordered[el.id] = +el.value;
131+
orderedList.push(
132+
{item:this.item,
133+
size:el.id,
134+
amount:+el.value}
135+
)
132136
}
133137
})
134-
console.log(ordered)
135-
return ordered //массив вида {S:1,M:0,L:1}
138+
console.log('orderedList = ',orderedList)
139+
return orderedList //массив вида [{item:{},size:S,amount:1}, {item:{},size:M,amount:3}]
136140
},
137141
//назначение большого рисунка
138142
dynamicBigImage(i=0){

‎package-lock.json

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"name": "Clothery",
33
"version": "1.0.0",
44
"dependencies": {
5+
"lodash": "^4.17.21",
56
"swiper": "^7.3.2"
67
},
78
"devDependencies": {}

‎script.js

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import {Cart} from "./Classes/Cart.js"
22
const cart = new Cart();
33

4-
54
import {getAPIdata} from "./Classes/GetRemoteData.js";
65
import {Home} from "./Routes/Home.js";
76
import {About} from "./Routes/About.js";

0 commit comments

Comments
 (0)