gofnnp/h-usersite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dev #12928

Browse Source 
доработки по корзине и отправке заказа, коризна теперь хранится в локалсторедж, а не в куки, адаптировал корзину под новые товары и модификаторы
This commit is contained in:
gofnnp 2022-12-05 08:37:34 +04:00
parent 801f33623b
commit c7db59110e
9 changed files with 226 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
angular/src/app/components/user-data-order/user-data-order.component.html
View File

@ -34,25 +34,17 @@
<div formGroupName="deliveryDataForm"> <div formGroupName="deliveryDataForm">
<p сlass="form-row form-row-wide"> <p сlass="form-row form-row-wide">
<p-dropdown [options]="deliveryTypes" formControlName="deliveryType" placeholder="Доставка" <p-dropdown [options]="deliveryTypes" formControlName="deliveryType" placeholder="Доставка"
optionLabel="title" (onChange)="changeDeliveryType($event)" [disabled]="true"></p-dropdown> optionLabel="title" (onChange)="changeDeliveryType($event)"></p-dropdown>
</p> </p>
<p сlass="form-row form-row-wide"> <p сlass="form-row form-row-wide">
<label id="deliveryDate">Время выдачи</label> <label id="deliveryDate">Время выдачи</label>
<p-calendar <p-calendar formControlName="deliveryDate" [showTime]="true" [showSeconds]="false"
formControlName="deliveryDate" [touchUI]="true" inputId="time" placeholder="Время выдачи" dateFormat="dd.mm.yy"></p-calendar>
[showTime]="true"
[showSeconds]="false"
[disabled]="true"
[touchUI]="true"
inputId="time"
placeholder="Время выдачи"
dateFormat="dd.mm.yy"
></p-calendar>
</p> </p>
<p сlass="form-row form-row-wide"> <p сlass="form-row form-row-wide">
<!-- <p-selectButton [options]="paymentMethods" formControlName="paymentMethod" optionLabel="label"> <p-dropdown [options]="paymentMethods" formControlName="paymentMethod" optionLabel="label" placeholder="Тип оплаты">
</p-selectButton> --> </p-dropdown>
*Оплата бонусами <!-- *Оплата бонусами -->
</p> </p>
<!-- <p сlass="form-row form-row-last"> <!-- <p сlass="form-row form-row-last">
<input [maxLength]="255" id="promo-code" pInputText placeholder="Промокод" type="text"> <input [maxLength]="255" id="promo-code" pInputText placeholder="Промокод" type="text">
@ -62,10 +54,17 @@
rows="1"></textarea> rows="1"></textarea>
</p> </p>
</div> </div>
<button [disabled]="!mainFormGroup.valid" class="elementor-button elementor-button--checkout elementor-size-md" <div class="bootom-info">
(click)="submit()"> <div class="subtotal">
<span class="elementor-button-text">Оформить заказ</span> <span class="products-count">Товаров: {{order.products.length}}</span>
</button> <span class="woocommerce-Price-amount amount"><bdi><span
class="woocommerce-Price-currencySymbol">{{order.products[0].currency_symbol}}</span>{{order.price}}</bdi></span>
</div>
<button
class="elementor-button elementor-button--checkout elementor-size-md">
<span class="elementor-button-text">Оформить заказ</span>
</button>
</div>
<p *ngIf="showMyMessage" style="color: red; font-size: 20px">Такой адрес не найден! Введите правильный адрес</p> <p *ngIf="showMyMessage" style="color: red; font-size: 20px">Такой адрес не найден! Введите правильный адрес</p>
</form> </form>
</div> </div>

71
angular/src/app/components/user-data-order/user-data-order.component.scss
View File

@ -25,6 +25,12 @@
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
border-radius: 4px; border-radius: 4px;
&.ng-dirty.ng-invalid {
border-color: red;
}
&.ng-invalid.ng-touched {
border-color: red;
}
} }
p { p {
@ -49,22 +55,6 @@
border-radius: 4px; border-radius: 4px;
} }
form {
&>button {
background-color: #09467f;
color: #fff;
border-radius: 6px;
width: calc(100% - 66px);
display: flex;
justify-content: center;
align-items: center;
border: none;
height: 40px;
width: 100%;
cursor: pointer;
}
}
.terminal-list-container { .terminal-list-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -118,4 +108,53 @@
display: block; display: block;
font-size: 14px; font-size: 14px;
} }
.bootom-info {
position: fixed;
bottom: 58px;
width: 100%;
display: flex;
padding: 12px 18px;
justify-content: space-between;
left: 0;
align-items: center;
background: #fff;
z-index: 9999;
.subtotal {
font-weight: 600;
font-size: 20px;
display: flex;
flex-direction: column;
.products-count {
font-size: 12px;
font-weight: 400;
}
}
.elementor-button--checkout {
background-color: #09467f;
color: #fff;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
border: none;
padding: 12px;
font-size: 12px;
cursor: pointer;
}
}
@media screen and (min-width: 550px) {
.bootom-info {
bottom: 84px;
width: 500px;
left: 50%;
transform: translate(-50%, 0);
border: solid 1px #dfdfdf;
border-radius: 12px;
}
}
} }

83
angular/src/app/components/user-data-order/user-data-order.component.ts
View File

@ -1,6 +1,6 @@
import { Component, EventEmitter, OnInit, Output } from '@angular/core'; import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { DeliveryData, DeliveryType, UserData } from 'src/app/interface/data'; import { DeliveryData, DeliveryType, PaymentMethod, UserData } from 'src/app/interface/data';
import { paymentMethods } from "../../app.constants"; import { paymentMethods } from "../../app.constants";
import { OrderService } from "../../services/order.service"; import { OrderService } from "../../services/order.service";
import { AutocompleteService } from "../../services/autocomplete.service"; import { AutocompleteService } from "../../services/autocomplete.service";
@ -12,6 +12,10 @@ import { WpJsonService } from "../../services/wp-json.service";
import { HttpClient, HttpClientModule } from '@angular/common/http'; import { HttpClient, HttpClientModule } from '@angular/common/http';
import { CookiesService } from 'src/app/services/cookies.service'; import { CookiesService } from 'src/app/services/cookies.service';
import moment from 'moment'; import moment from 'moment';
import { Order } from 'src/app/models/order';
import { Store } from '@ngrx/store';
import * as fromConfig from '../../state/config/config.reducer'
import { lastValueFrom } from 'rxjs';
@ -24,7 +28,7 @@ export class UserDataOrderComponent implements OnInit {
@Output() orderSubmitted = new EventEmitter<void>(); @Output() orderSubmitted = new EventEmitter<void>();
readonly cities = environment.cities; readonly cities = environment.cities;
readonly paymentMethods = paymentMethods; public paymentMethods!: PaymentMethod[];
public loading = false; public loading = false;
public hasError = false; public hasError = false;
public mainFormGroup!: FormGroup; public mainFormGroup!: FormGroup;
@ -34,6 +38,7 @@ export class UserDataOrderComponent implements OnInit {
public new_house!: string | null; public new_house!: string | null;
public checkAddress: boolean = true; public checkAddress: boolean = true;
public showMyMessage: boolean = false; public showMyMessage: boolean = false;
public order!: Order;
public userData: UserData = { public userData: UserData = {
first_name: null, first_name: null,
@ -45,15 +50,18 @@ export class UserDataOrderComponent implements OnInit {
phone: null, phone: null,
}; };
public deliverData: DeliveryData = { public deliverData: DeliveryData = {
deliveryDate: moment().add(1, 'hours').toDate(), deliveryDate: null,
deliveryType: null, deliveryType: null,
paymentMethod: paymentMethods[0], paymentMethod: null,
comment: '', comment: '',
persons: 1 persons: 1
}; };
public terminalList!: any; public terminalList!: any;
public selectedTerminal!: any; public selectedTerminal!: any;
checkoutConfig$ = this.store.select(fromConfig.selectCheckout);
checkoutConfig!: any;
constructor( constructor(
private fb: FormBuilder, private fb: FormBuilder,
private orderService: OrderService, private orderService: OrderService,
@ -64,14 +72,22 @@ export class UserDataOrderComponent implements OnInit {
private wpJsonService: WpJsonService, private wpJsonService: WpJsonService,
private http: HttpClient, private http: HttpClient,
private cookiesService: CookiesService, private cookiesService: CookiesService,
) { private store: Store
} ) { }
ngOnInit(): void { async ngOnInit() {
this._createMainForm(); this._createMainForm();
this.getTerminalList(); this.getTerminalList();
this.selectedTerminal = JSON.parse(this.cookiesService.getItem('selectedTerminal') || '') this.selectedTerminal = JSON.parse(this.cookiesService.getItem('selectedTerminal') || '')
this.checkoutConfig$.subscribe({
next: (value: any) => {
this.checkoutConfig = value
}
})
this.deliverData.deliveryDate = moment().add(this.checkoutConfig.timeDelivery.changeTime.defaultValue, 'minutes').toDate()
this.paymentMethods = this.checkoutConfig.payments.values
this.deliverData.paymentMethod = this.paymentMethods[this.checkoutConfig.payments.default]
} }
getTerminalList() { getTerminalList() {
@ -81,7 +97,7 @@ export class UserDataOrderComponent implements OnInit {
}, },
error: (err) => { error: (err) => {
console.error(err); console.error(err);
} }
}) })
} }
@ -125,21 +141,26 @@ export class UserDataOrderComponent implements OnInit {
if (this.mainFormGroup.invalid) { if (this.mainFormGroup.invalid) {
Object.keys(mainControls).forEach(groupName => { Object.keys(mainControls).forEach(groupName => {
const childGroupControls = (mainControls[groupName] as FormGroup).controls; const childGroupControls = (mainControls[groupName] as FormGroup).controls;
Object.keys(mainControls).forEach(controlName => { Object.keys(childGroupControls).forEach(controlName => {
childGroupControls[controlName].markAsTouched(); childGroupControls[controlName].markAsTouched();
}); });
}); });
this.messageService.add({
severity: 'error',
summary: 'Заполните обязательные поля',
})
return; return;
} }
this.submitOrder(); this.submitOrder();
} }
submitOrder(): void { async submitOrder() {
this.loading = true; this.loading = true;
const userData: UserData = this.mainFormGroup.controls['userDataForm'].value; const userData: UserData = this.mainFormGroup.controls['userDataForm'].getRawValue();
userData.phone = this.userData.phone; userData.phone = this.userData.phone;
this.orderService.setUserData(userData); this.orderService.setUserData(userData);
this.orderService.setDeliveryData(this.mainFormGroup.controls['deliveryDataForm'].value); this.orderService.setDeliveryData(this.mainFormGroup.controls['deliveryDataForm'].getRawValue());
this.orderService.submit().subscribe({ this.orderService.submit().subscribe({
next: (_) => { next: (_) => {
this.loading = false; this.loading = false;
@ -175,43 +196,31 @@ export class UserDataOrderComponent implements OnInit {
} }
private async _createUserDataForm(): Promise<FormGroup> { private async _createUserDataForm(): Promise<FormGroup> {
const order = await this.orderService.getOrder(true); this.order = await this.orderService.getOrder(true);
this.userData = Object.assign({}, this.userData, order.userData); this.userData = Object.assign({}, this.userData, this.order.userData);
this.userData.city = this.cities[0]; this.userData.city = this.cities[0];
this.userData.phone = order.phone; this.userData.phone = this.order.phone;
// await this.autoCompleteService.setCity(this.userData.city); // await this.autoCompleteService.setCity(this.userData.city);
const isSelfDelivery = this.deliverData.deliveryType?.type === "self_delivery"
return this.fb.group({ return this.fb.group({
phone: [this.userData.phone], phone: [this.userData.phone],
first_name: [this.userData.first_name, [Validators.required, Validators.minLength(2), Validators.maxLength(255),]], first_name: [this.userData.first_name, [Validators.required, Validators.minLength(2), Validators.maxLength(255),]],
// last_name: [this.userData.last_name, [Validators.required, Validators.minLength(2), Validators.maxLength(255),]], // last_name: [this.userData.last_name, [Validators.required, Validators.minLength(2), Validators.maxLength(255),]],
street: [this.userData.street, [Validators.required, Validators.minLength(2), Validators.maxLength(255),]], street: [{ value: this.userData.street, disabled: isSelfDelivery }, isSelfDelivery ?? [Validators.required, Validators.minLength(2), Validators.maxLength(255),]],
house: [this.userData.house, [Validators.required, Validators.maxLength(10), Validators.pattern('^\\d+[-|\\d]+\\d+$|^\\d*$')]], house: [{ value: this.userData.house, disabled: isSelfDelivery }, isSelfDelivery ?? [Validators.required, Validators.maxLength(10), Validators.pattern('^\\d+[-|\\d]+\\d+$|^\\d*$')]],
flat: [this.userData.flat, []], flat: [this.userData.flat, []],
// city: [this.userData.city, [Validators.required]], // city: [this.userData.city, [Validators.required]],
}); });
} }
private async _createDeliveryDataForm(): Promise<FormGroup> { private async _createDeliveryDataForm(): Promise<FormGroup> {
this.deliveryTypes = [ this.deliveryTypes = this.checkoutConfig.delivery.values;
{ this.deliverData.deliveryType = this.deliveryTypes[this.checkoutConfig.delivery.default];
"cost": 100,
"title": "Доставка",
"id": 11,
"type": "delivery"
},
{
"cost": 0,
"title": "Самовывоз",
"id": 16,
"type": "self_delivery"
}
];
this.deliverData.deliveryType = this.deliveryTypes[1];
return this.fb.group({ return this.fb.group({
deliveryDate: [this.deliverData.deliveryDate, []], deliveryDate: [{ value: this.deliverData.deliveryDate, disabled: this.checkoutConfig.timeDelivery.changeTime.disabled }, []],
deliveryType: [this.deliverData.deliveryType, [Validators.required]], deliveryType: [{ value: this.deliverData.deliveryType, disabled: this.checkoutConfig.delivery.disabled }, [Validators.required]],
paymentMethod: [this.deliverData.paymentMethod, [Validators.required]], paymentMethod: [{ value: this.deliverData.paymentMethod, disabled: this.checkoutConfig.payments.disabled }, [Validators.required]],
// persons: [this.deliverData.persons, [Validators.required, Validators.minLength(2), Validators.maxLength(255),]], persons: [this.deliverData.persons, [Validators.required, Validators.minLength(2), Validators.maxLength(255),]],
comment: [this.deliverData.comment, [Validators.maxLength(255),]] comment: [this.deliverData.comment, [Validators.maxLength(255),]]
}); });
} }

52
angular/src/app/models/cart-product.ts
View File

@ -1,4 +1,4 @@
import {CartModifier, Modifier, ModifiersGroup, Option} from "../interface/data"; import { CartModifier, Modifier, ModifiersGroup, Option } from "../interface/data";
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
export class CartProduct { export class CartProduct {
@ -9,7 +9,24 @@ export class CartProduct {
this.guid = uuidv4(); this.guid = uuidv4();
this.amount = amount; this.amount = amount;
this.name = name; this.name = name;
this.modifiers = modifiers.map(modifier => ({name: modifier.name, id: modifier.id, options: []})); this.modifiers = modifiers.map(modifier => ({
name: modifier.name,
id: modifier.id,
idLocal: uuidv4(),
options: JSON.parse(JSON.stringify(options)).filter((option: any) => option.groupId === modifier.id),
restrictions: modifier.restrictions,
get allQuantity() {
return this.options.reduce((a: any, b: any) => a + (b['quantity'] || 0), 0)
}
}));
this.modifiers.forEach((modifier) => {
modifier.options.forEach((option) => {
option.idLocal = uuidv4()
if (!option.quantity && option.quantity !== 0) {
option.quantity = option.restrictions.byDefault
}
})
})
} }
id: string; id: string;
@ -18,27 +35,26 @@ export class CartProduct {
name: string; name: string;
modifiers: CartModifier[]; modifiers: CartModifier[];
increment(): void {
increment(): void{
this.amount++; this.amount++;
} }
decrement(): void{ decrement(): void {
if (this.amount > 0){ if (this.amount > 0) {
this.amount--; this.amount--;
} }
} }
addOption(modifier: ModifiersGroup, option: Modifier): void{ // addOption(modifier: ModifiersGroup, option: Modifier): void {
const productModifier = this.modifiers.find(value => value.id === modifier.id); // const productModifier = this.modifiers.find(value => value.id === modifier.id);
if (productModifier){ // if (productModifier) {
const optionIndex = productModifier.options.findIndex(value => value.id === option.id); // const optionIndex = productModifier.options.findIndex(value => value.id === option.id);
if(optionIndex === -1){ // if (optionIndex === -1) {
productModifier.options.push(option); // productModifier.options.push(option);
} // }
else { // else {
productModifier.options.splice(optionIndex, 1) // productModifier.options.splice(optionIndex, 1)
} // }
} // }
} // }
} }

11
angular/src/app/models/order-product.ts
View File

@ -41,7 +41,7 @@ export class OrderProduct implements Product{
get finalPrice(): number{ get finalPrice(): number{
const modifiersPrice = this.modifier_data.reduce<number>((previousValue, currentValue) => { const modifiersPrice = this.modifier_data.reduce<number>((previousValue, currentValue) => {
return previousValue + currentValue.options.reduce<number>((previousOptionValue, currentOptionValue) => { return previousValue + currentValue.options.reduce<number>((previousOptionValue, currentOptionValue) => {
return previousOptionValue + Number(currentOptionValue.price ? currentOptionValue.price : 0); return previousOptionValue + Number(currentOptionValue.price ? currentOptionValue.price * (currentOptionValue.quantity ?? 0) : 0);
}, 0); }, 0);
}, 0); }, 0);
return (Number(this.price) + modifiersPrice) * this.amount; return (Number(this.price) + modifiersPrice) * this.amount;
@ -55,9 +55,14 @@ export class OrderProduct implements Product{
options: this.modifier_data?.map((modifier) => { options: this.modifier_data?.map((modifier) => {
return { return {
option: modifier.name, option: modifier.name,
variant: modifier.options[0]?.name || null variants: modifier.options.map((option) => ({
variant: option.name,
id: option.id,
quantity: option.quantity
})).filter((option) => option.quantity) || null,
id: modifier.id
} }
}), }).filter((modifier) => modifier.variants.length),
quantity: this.amount, quantity: this.amount,
name: this.name, name: this.name,
} }

4
angular/src/app/models/order.ts
View File

@ -38,7 +38,7 @@ export class Order {
const date = moment(this.deliveryData?.deliveryDate ?? Date.now()); const date = moment(this.deliveryData?.deliveryDate ?? Date.now());
return { return {
formname: "Cart", formname: "Cart",
paymentsystem: this.deliveryData?.paymentMethod.type, paymentsystem: this.deliveryData?.paymentMethod?.type,
phone: this.phone, phone: this.phone,
persons: 1, persons: 1,
name: "31", name: "31",
@ -51,7 +51,7 @@ export class Order {
subtotal: this.price, subtotal: this.price,
delivery_comment: this.deliveryData?.comment, delivery_comment: this.deliveryData?.comment,
delivery: this.deliveryData?.deliveryType?.type, delivery: this.deliveryData?.deliveryType?.type,
delivery_address: `${environment.cities[0]}, ул ${this.userData?.street}, ${this.userData?.house}`, delivery_address: this.deliveryData?.deliveryType?.type === "self_delivery" ? null : `${environment.cities[0]}, ул ${this.userData?.street}, ${this.userData?.house}`,
amount: this.price + 100 amount: this.price + 100
}, },
} }

14
angular/src/app/pages/cart/cart.component.html
View File

@ -17,9 +17,9 @@
<dl *ngFor="let modifier of product.modifier_data" class="variation" <dl *ngFor="let modifier of product.modifier_data" class="variation"
[ngStyle]="{margin: !modifier.options.length && 0}"> [ngStyle]="{margin: !modifier.options.length && 0}">
<ng-container *ngFor="let option of modifier.options"> <ng-container *ngFor="let option of modifier.options">
<dt style="max-width: 160px;" class="variation-">{{option.name}}:</dt> <dt *ngIf="option.quantity" style="max-width: 160px;" class="variation-">{{option.name}}:</dt>
<dd style="display: flex; align-items: flex-end; margin-bottom: 0;" class="variation-"> <dd *ngIf="option.quantity" style="display: flex; align-items: flex-end; margin-bottom: 0;" class="variation-">
<p>{{product.currency_symbol}}{{option.price ?? 0}}</p> <p>{{option.quantity}} × {{product.currency_symbol}}{{(option.price ?? 0) * option.quantity}}</p>
</dd> </dd>
</ng-container> </ng-container>
</dl> </dl>
@ -27,7 +27,7 @@
<div class="elementor-menu-cart__product-price product-price" data-title="Price"> <div class="elementor-menu-cart__product-price product-price" data-title="Price">
<span class="quantity"> <span class="quantity">
<span class="product-quantity">{{product.amount}} ×</span> <span class="product-quantity">{{product.amount}} × </span>
<span class="woocommerce-Price-amount amount"> <span class="woocommerce-Price-amount amount">
<bdi> <bdi>
<span class="woocommerce-Price-currencySymbol">{{product.currency_symbol}}</span> <span class="woocommerce-Price-currencySymbol">{{product.currency_symbol}}</span>
@ -58,7 +58,7 @@
</div> </div>
<div *ngIf="order.products.length != 0" class="elementor-menu-cart__bottom-info"> <div *ngIf="order.products.length != 0" class="elementor-menu-cart__bottom-info">
<div class="elementor-menu-cart__subtotal"> <div class="elementor-menu-cart__subtotal">
<strong>К оплате: </strong> <span class="products-count">Товаров: {{order.products.length}}</span>
<span class="woocommerce-Price-amount amount"><bdi><span <span class="woocommerce-Price-amount amount"><bdi><span
class="woocommerce-Price-currencySymbol">{{order.products[0].currency_symbol}}</span>{{order.price}}</bdi></span> class="woocommerce-Price-currencySymbol">{{order.products[0].currency_symbol}}</span>{{order.price}}</bdi></span>
</div> </div>
@ -80,10 +80,10 @@
</div> </div>
<div class="grid p-fluid"> <div class="grid p-fluid">
<div class="col-6"> <div class="col-6">
<button type="button" pButton (click)="onConfirm()" label="Да" class="p-button-success">Да</button> <button type="button" pButton (click)="onConfirm()" label="Да" class="p-button-success"></button>
</div> </div>
<div class="col-6"> <div class="col-6">
<button type="button" pButton (click)="onReject()" label="Нет" class="p-button-secondary">Нет</button> <button type="button" pButton (click)="onReject()" label="Нет" class="p-button-secondary"></button>
</div> </div>
</div> </div>
</div> </div>

29
angular/src/app/pages/cart/cart.component.scss
View File

@ -36,7 +36,7 @@
} }
} }
} }
&__product-image { &__product-image {
grid-row-start: 1; grid-row-start: 1;
grid-row-end: 3; grid-row-end: 3;
@ -44,6 +44,7 @@
img { img {
border-radius: 6px; border-radius: 6px;
object-fit: cover;
} }
} }
@ -62,7 +63,7 @@
grid-column-end: 3; grid-column-end: 3;
-ms-flex-item-align: var(--price-quantity-position--align-self, end); -ms-flex-item-align: var(--price-quantity-position--align-self, end);
align-self: var(--price-quantity-position--align-self, end); align-self: var(--price-quantity-position--align-self, end);
font-weight: 300; font-weight: 400;
} }
&__product-remove { &__product-remove {
@ -126,16 +127,23 @@
left: 0; left: 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: center;
bottom: 0; bottom: 58px;
padding: 18px; padding: 18px;
background: #fff; background: #fff;
border-top: solid #d9d9d9 1px;
z-index: 3; z-index: 3;
} }
&__subtotal { &__subtotal {
font-weight: 600; font-weight: 600;
font-size: 20px;
display: flex;
flex-direction: column;
& .products-count {
font-size: 12px;
font-weight: 400;
}
} }
&__footer-buttons { &__footer-buttons {
@ -212,4 +220,15 @@
margin: 32px auto; margin: 32px auto;
display: block; display: block;
} }
@media screen and (min-width: 550px) {
.elementor-menu-cart__bottom-info {
bottom: 84px;
width: 500px;
left: 50%;
transform: translate(-50%, 0);
border: solid 1px #dfdfdf;
border-radius: 12px;
}
}
} }

67
angular/src/app/services/cart.service.ts
View File

@ -1,9 +1,9 @@
import {Injectable} from '@angular/core'; import { Injectable } from '@angular/core';
import {CookiesService} from "./cookies.service"; import { CookiesService } from "./cookies.service";
import {Cart} from "../interface/data"; import { Cart } from "../interface/data";
import {isEqual} from 'lodash/fp'; import { isEqual } from 'lodash/fp';
import {CartProduct} from "../models/cart-product"; import { CartProduct } from "../models/cart-product";
import {Subject} from "rxjs"; import { Subject } from "rxjs";
import { update } from 'lodash'; import { update } from 'lodash';
import { WpJsonService } from './wp-json.service'; import { WpJsonService } from './wp-json.service';
@ -20,7 +20,7 @@ export class CartService {
constructor( constructor(
private cookieService: CookiesService, private cookieService: CookiesService,
private wpJsonService: WpJsonService, private wpJsonService: WpJsonService,
) { } ) { }
private cart!: Cart; private cart!: Cart;
@ -29,65 +29,64 @@ export class CartService {
public selectedTerminal$ = new Subject<Object>(); public selectedTerminal$ = new Subject<Object>();
getCart(){ getCart() {
return this._getCartProducts(); return this._getCartProducts();
} }
addToCart(product: CartProduct): void{ addToCart(product: CartProduct): void {
const cart = this._getCartProducts(); const cart = this._getCartProducts();
cart.products = cart.products ?? []; cart.products = cart.products ?? [];
const sameProduct = cart.products.find((value) => value.id === product.id && isEqual(value.modifiers, product.modifiers)); const sameProduct = cart.products.find((value) => value.id === product.id && isEqual(value.modifiers, product.modifiers));
if(sameProduct){ if (sameProduct) {
sameProduct.amount ++; sameProduct.amount++;
} }
else { else {
cart.products.push(product); cart.products.push(product);
this.cartCount$.next(cart.products.length); this.cartCount$.next(cart.products.length);
} }
this.cookieService.setCookie('cart', JSON.stringify(cart)); localStorage.setItem('cart', JSON.stringify(cart));
} }
removeFromCart(guid: string): void{ removeFromCart(guid: string): void {
const cart = this._getCartProducts(); const cart = this._getCartProducts();
if(!cart.products){ if (!cart.products) {
return; return;
} }
cart.products = cart.products.filter((value) => value.guid !== guid); cart.products = cart.products.filter((value) => value.guid !== guid);
this.cookieService.setCookie('cart', JSON.stringify(cart)); localStorage.setItem('cart', JSON.stringify(cart));
this.cartCount$.next(cart.products.length); this.cartCount$.next(cart.products.length);
} }
updateProductFromCart(product: CartProduct): void{ updateProductFromCart(product: CartProduct): void {
// const cart = this._getCartProducts(); // const cart = this._getCartProducts();
// if(!cart.products){ // if(!cart.products){
// return; // return;
// } // }
// const updateProduct = cart.products.find((value) => Number(value.id) === product.id) // const updateProduct = cart.products.find((value) => Number(value.id) === product.id)
// if (updateProduct) { // if (updateProduct) {
// updateProduct.modifiers = JSON.parse(JSON.stringify(product.modifiers)) // updateProduct.modifiers = JSON.parse(JSON.stringify(product.modifiers))
// } // }
// this.cookieService.setCookie('cart', JSON.stringify(cart)); // localStorage.setItem('cart', JSON.stringify(cart));
} }
changeAmountProduct(productTempId: string,action: ProductAmountAction): void{ changeAmountProduct(productTempId: string, action: ProductAmountAction): void {
const cart = this._getCartProducts(); const cart = this._getCartProducts();
if(!cart.products){ if (!cart.products) {
return; return;
} }
const product: CartProduct | undefined = cart.products.find((value) => value.guid === productTempId); const product: CartProduct | undefined = cart.products.find((value) => value.guid === productTempId);
if(product && action === ProductAmountAction.increment){ if (product && action === ProductAmountAction.increment) {
product.amount++ product.amount++
// product.increment(); // product.increment();
} }
else if(product && action === ProductAmountAction.decrement){ else if (product && action === ProductAmountAction.decrement) {
product.amount-- product.amount--
// product.decrement(); // product.decrement();
} }
this.cookieService.setCookie('cart', JSON.stringify(cart)); localStorage.setItem('cart', JSON.stringify(cart));
this.cartCount$.next(cart.products.length); this.cartCount$.next(cart.products.length);
} }
@ -96,23 +95,23 @@ export class CartService {
this.selectedTerminal$.next(terminal) this.selectedTerminal$.next(terminal)
} }
clearCart(){ clearCart() {
this.cart = {products: []}; this.cart = { products: [] };
this.cookieService.setCookie('cart', JSON.stringify(this.cart)); localStorage.setItem('cart', JSON.stringify(this.cart));
this.cartCount$.next(0); this.cartCount$.next(0);
} }
_getCartProducts(): Cart{ _getCartProducts(): Cart {
if(this.cart){ if (this.cart) {
return this.cart; return this.cart;
} }
const cartJson = this.cookieService.getItem('cart'); const cartJson = localStorage.getItem('cart');
this.cart = cartJson ? JSON.parse(cartJson) : {products: []}; this.cart = cartJson ? JSON.parse(cartJson) : { products: [] };
return this.cart; return this.cart;
} }
get cartCount(): number{ get cartCount(): number {
return this._getCartProducts().products.length; return this._getCartProducts().products.length;
} }
} }