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-10-31 09:31:52 +04:00
parent d9836f2b40
commit 352986de93
3 changed files with 54 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,51 +1,57 @@
<div class="cart" *ngIf="!loading && order && !orderConfirmed" [ngStyle]="{margin: !order.products.length && 0}"> <div class="cart" *ngIf="!loading && order && !orderConfirmed" [ngStyle]="{margin: !order.products.length && 0}">
<div class="widget_shopping_cart_content" style="opacity: 1;"> <div class="widget_shopping_cart_content" style="opacity: 1;">
<div class="elementor-menu-cart__products woocommerce-mini-cart cart woocommerce-cart-form__contents" [ngStyle]="{margin: !order.products.length && 0}"> <div class="elementor-menu-cart__products woocommerce-mini-cart cart woocommerce-cart-form__contents"
<div *ngFor="let product of order.products" [ngStyle]="{margin: !order.products.length && 0}">
class="elementor-menu-cart__product woocommerce-cart-form__cart-item cart_item" <div *ngFor="let product of order.products; let last = last">
style="grid-template-columns: 70px auto;"> <div
class="elementor-menu-cart__product woocommerce-cart-form__cart-item cart_item"
style="grid-template-columns: 70px auto;">
<div class="elementor-menu-cart__product-image product-thumbnail"> <div class="elementor-menu-cart__product-image product-thumbnail">
<img *ngIf="product.image" width="70" height="70" src="{{product.image}}" <img *ngIf="product.image" width="70" height="70" src="{{product.image}}"
class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="{{product.name}}" loading="lazy"> class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="{{product.name}}" loading="lazy">
<img *ngIf="!product.image" width="70" height="70" src="./assets/no-image.png" <img *ngIf="!product.image" width="70" height="70" src="./assets/no-image.png"
class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="{{product.name}}" loading="lazy"> class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="{{product.name}}" loading="lazy">
</div> </div>
<div class="elementor-menu-cart__product-name product-name" data-title="Product"> <div class="elementor-menu-cart__product-name product-name" data-title="Product">
<span>{{product.name}}</span> <span>{{product.name}}</span>
<dl *ngFor="let modifier of product.modifier_data" class="variation" [ngStyle]="{margin: !modifier.options.length && 0}" > <dl *ngFor="let modifier of product.modifier_data" class="variation"
<ng-container *ngFor="let option of modifier.options"> [ngStyle]="{margin: !modifier.options.length && 0}">
<ng-container *ngFor="let option of modifier.options">
<dt style="max-width: 160px;" class="variation-">{{option.name}}:</dt> <dt style="max-width: 160px;" class="variation-">{{option.name}}:</dt>
<dd style="display: flex; align-items: flex-end; margin-bottom: 0;" class="variation-"><p>{{product.currency_symbol}}{{option.price ?? 0}}</p> <dd style="display: flex; align-items: flex-end; margin-bottom: 0;" class="variation-">
<p>{{product.currency_symbol}}{{option.price ?? 0}}</p>
</dd> </dd>
</ng-container> </ng-container>
</dl> </dl>
</div> </div>
<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>
{{product.finalPrice}} {{product.finalPrice}}
</bdi> </bdi>
</span>
</span> </span>
</span> <div class="product-change-amount">
<div class="product-change-amount"> <div class="product-change-amount__symbol" (click)="setAmount(product, 'minus')">
<div class="product-change-amount__symbol" (click)="setAmount(product, 'minus')"> -
- </div>
</div> <div class="product-change-amount__symbol" (click)="setAmount(product, 'plus')">
<div class="product-change-amount__symbol" (click)="setAmount(product, 'plus')"> +
+ </div>
</div> </div>
</div> </div>
</div>
<div class="elementor-menu-cart__product-remove product-remove"> <div class="elementor-menu-cart__product-remove product-remove">
<a href="#" class="remove_from_cart_button" aria-label="Remove this item" <a href="#" class="remove_from_cart_button" aria-label="Remove this item"
(click)="removeFromCart($event, product.guid)"></a> (click)="removeFromCart($event, product.guid)"></a>
</div>
</div> </div>
<hr *ngIf="!last">
</div> </div>
</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">

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

@ -2,6 +2,9 @@
.cart { .cart {
margin-top: 16px; margin-top: 16px;
margin-bottom: 100px; margin-bottom: 100px;
max-width: 400px;
margin-left: auto;
margin-right: auto;
} }
.elementor-menu-cart { .elementor-menu-cart {
@ -10,7 +13,7 @@
grid-template-rows: var(--price-quantity-position--grid-template-rows, auto auto); grid-template-rows: var(--price-quantity-position--grid-template-rows, auto auto);
position: relative; position: relative;
display: grid; display: grid;
padding-bottom: 20px; padding-bottom: 0;
padding-right: 30px; padding-right: 30px;
.variation { .variation {
@ -193,4 +196,10 @@
text-align: center; text-align: center;
margin-top: 16px; margin-top: 16px;
} }
hr {
width: 80%;
margin: 14px auto;
border-top: solid #d1d1d1 1px;
}
} }

2
angular/src/app/pages/products/products.component.scss
View File

@ -21,7 +21,7 @@
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
gap: 16px; gap: 16px;
max-width: 700px; max-width: 648px;
margin: 0 auto; margin: 0 auto;
} }