мелкие правки
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

View File

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

View File

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

View File

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