File: /var/www/vhost/disk-apps/pwa.sports-crowd.com/src/app/pages/detail-product/detail-product.html
<ion-header class="ion-no-border">
<ion-toolbar color="primary">
<ion-buttons slot="end">
<ion-button (click)="cancel()" strong color="light">{{ 'all.close' | translate}}</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content no-bounce>
<ion-list>
<ion-slides pager *ngIf="product.product_images.length > 1">
<ion-slide *ngFor="let item of product.product_images">
<img *ngIf="itsImage(item.name)" [src]="cityProvider._urlGallery+'products/'+item.name" #myImage
(click)="previewImage(myImage)" class="imageDetailProduct" valid-url-image />
<img *ngIf="!itsImage(item.name)" src="assets/img/video_icon_default.png"
(click)="playVideo(cityProvider._urlGallery+'products/'+item.name)" class="videoDetailProduct" />
</ion-slide>
</ion-slides>
<ion-item lines="none" *ngIf="product.product_images.length == 1">
<img *ngIf="itsImage(product.product_images[0].name)"
[src]="cityProvider._urlGallery+'products/'+product.product_images[0].name" #myImage
(click)="previewImage(myImage)" class="imageDetailProduct" valid-url-image />
<img *ngIf="!itsImage(product.product_images[0].name)" src="assets/img/video_icon_default.png"
(click)="playVideo(cityProvider._urlGallery+'products/'+product.product_images[0].name)"
class="videoDetailProduct" />
</ion-item>
<ion-item lines="none" *ngIf="product.product_images.length == 0">
<img src="assets/img/default.png" class="imageDetailProduct" />
</ion-item>
<ion-item lines="none" class="ion-text-center ion-text-wrap">
<ion-label class="textItemProduct textNameProduct"> {{ product.name }} </ion-label>
</ion-item>
<!-- precio del producto cuando no tiene descuento porcentaje ni relampago -->
<ion-item lines="none" class="ion-text-center item-primary"
*ngIf="!product.priceAfterSpecialPriceTag && !product.priceAfterFlash && !product.priceAfterDiscount">
<ion-label class="textItemProduct textPriceProduct">
{{ product.price | formatCurrency : currency }}
</ion-label>
</ion-item>
<ion-item lines="none" *ngIf="product.priceAfterSpecialPriceTag" class="align-item-flex item-primary-special">
<ion-label class="priceDiscount marginRight7 ion-text-end">
<ion-text>
<ion-text class="priceTag" color="secondary">
<ion-icon name="pricetag-outline"></ion-icon>
<h5>{{ product.special_tag }}</h5>
</ion-text>
<p class="priceDiscount marginRight7">
{{ product.priceAfterSpecialPriceTag | formatCurrency : currency }}
</p>
</ion-text>
</ion-label>
<ion-label class="priceDecorationThrough marginTop16 ion-text-start">
{{ product.price | formatCurrency : currency }}
</ion-label>
</ion-item>
<ion-item lines="none" *ngIf="product.priceAfterFlash" class="align-item-flex item-primary">
<ion-label class="priceDiscount marginRight7 ion-text-end">
<ion-icon class="ion-text-start" name="flash-outline"></ion-icon>
{{ product.priceAfterFlash | formatCurrency : currency }}
</ion-label>
<ion-label class="priceDecorationThrough ion-text-start">
{{ product.price | formatCurrency : currency }}
</ion-label>
</ion-item>
<ion-item lines="none" *ngIf="product.priceAfterDiscount" class="align-item-flex item-primary">
<ion-label class="priceDiscount marginRight7 ion-text-end">
{{ product.priceAfterDiscount | formatCurrency : currency }}
</ion-label>
<ion-label class="priceDecorationThrough marginTop13 ion-text-start">
{{ product.price | formatCurrency : currency }}
</ion-label>
</ion-item>
<ion-item lines="none" class="ion-text-center item-secondary"
*ngIf="product.productAttributes && product.productAttributes.length == 1 && product.productAttributes[0].pum">
<ion-label class="ion-no-margin textItemProduct">
<app-pum-info [product]="product" [type]="'label'"></app-pum-info>
</ion-label>
</ion-item>
<ion-item lines="none" class="ion-text-center item-secondary" hidden>
<app-coin-info [price]="product.price" class="centerCoin"></app-coin-info>
</ion-item>
<ion-item lines="none" class="ion-text-center item-secondary" *ngIf="product.plu">
<ion-label class="ion-no-margin textItemProduct">{{ 'PLU' | translate }}: {{ product.plu}} </ion-label>
</ion-item>
<ion-item lines="none" class="ion-text-center item-secondary" *ngIf="product.bar_code">
<ion-label class="ion-no-margin textItemProduct">{{ 'BARCODE' | translate }}: {{ product.bar_code}}</ion-label>
</ion-item>
<ion-item lines="none" class="ion-text-center item-secondary" *ngIf="product.brand">
<ion-label class="ion-no-margin textItemProduct">{{ 'BRAND' | translate }}: {{ product.brand.name}}</ion-label>
</ion-item>
<ion-item lines="none" class="ion-text-center item-secondary">
<ion-label class="ion-no-margin textItemProduct">{{ 'AVAILABLE_UNITS' | translate }}: {{ stock }} </ion-label>
</ion-item>
<ion-item lines="none" class="ion-text-center item-secondary" *ngIf="product.max_units_per_order">
<ion-label class="ion-no-margin textItemProduct">{{ 'MAX_UNITS_PER_ATTRIBUTTE' | translate }}:
{{ product?.max_units_per_order}}
</ion-label>
</ion-item>
<ion-item lines="none" class="ion-text-center item-secondary" *ngIf="product.max_units_per_product">
<ion-label class="ion-no-margin textItemProduct">{{ 'MAX_UNITS_PER_PRODUCT' | translate }}:
{{ product?.max_units_per_product}}
</ion-label>
</ion-item>
<div *ngIf="origin == 'orderDetail'">
<div *ngIf="product.order_product_attributes">
<ion-list *ngFor="let items of product.order_product_attributes | groupBy:'attribute_id'">
<ion-list-header>
<ion-label> {{ items.value[0].attribute.display_name }} </ion-label>
</ion-list-header>
<ion-item *ngFor="let attribute of items.value" lines="none">
<ion-label class="displayContents">{{ attribute.value }}
<div class="pickerColor" *ngIf="attribute.attribute.attribute_type_id == 4"
[style.background]="attribute.value"></div>
({{ attribute.quantity ? attribute.quantity : 1 }}) - {{ attribute.price_additional | formatCurrency : currency }}
</ion-label>
</ion-item>
</ion-list>
</div>
<div *ngIf="product.comments">
<ion-item lines="none">
<ion-label text-wrap class="textItemProduct">Comentarios: {{ product.comments }}</ion-label>
</ion-item>
</div>
</div>
<div *ngIf="origin != 'orderDetail' && product.productAttributes.length > 1">
<div *ngFor="let attribute of this.attributes; let i=index">
<ion-label class="ion-text-center textItemProduct" *ngIf="attribute[1][0].attribute.attribute_type_id == 1">{{
attribute[1][0].value }}</ion-label>
<ion-list *ngIf="attribute[1][0].attribute.attribute_type_id == 2">
<ion-radio-group [value]="valueControl[i]" (ionChange)="updateControlRadio($event,i)">
<ion-list-header>
<ion-item lines="none" style="width:100%">
<ion-label slot="start"> {{ attribute[1][0].attribute.display_name }} </ion-label>
<ion-chip color="danger" slot="end" *ngIf="attribute[1][0].attribute.required">
<ion-label color="danger" class="ion-text-capitalize">{{ 'REQUIRED' | translate }}</ion-label>
</ion-chip>
</ion-item>
</ion-list-header>
<ion-item *ngFor="let item of attribute[1]; let j=index">
<ion-radio slot="start" [value]="item.id" mode="md" [disabled]="item.available_units == 0"></ion-radio>
<ion-label class="ion-text-wrap itemAttribute">{{ item.value }}
<app-pum-info *ngIf="item.pum" style="margin-left: 10px;" [attribute]="item"></app-pum-info>
<p *ngIf="!item.pum" style="margin-left: 10px; color: grey; font-size: min(3vw, 10px);">
{{ item.available_units }} {{ 'AVAILABLE_UNITS' | translate }}
</p>
</ion-label>
<ion-label class="ion-text-end" *ngIf="item.price_additional > 0">
{{ item.price_additional | formatCurrency : currency }}
</ion-label>
</ion-item>
</ion-radio-group>
</ion-list>
<ion-list *ngIf="attribute[1][0].attribute.attribute_type_id == 3">
<ion-list-header>
<ion-label>
<ion-item lines="none">
<ion-label slot="start"> {{ attribute[1][0].attribute.display_name }} </ion-label>
<ion-chip color="danger" slot="end" *ngIf="attribute[1][0].attribute.required">
<ion-label color="danger" class="ion-text-capitalize">{{ 'REQUIRED' | translate }}</ion-label>
</ion-chip>
</ion-item>
</ion-label>
</ion-list-header>
<ion-item *ngFor="let item of attribute[1]; let j=index">
<ion-checkbox slot="start" [(ngModel)]="valueControlCheckbox[i][j].status"
(ionChange)="updateCheckedOptions(i)" [disabled]="item.available_units == 0"></ion-checkbox>
<ion-label class="ion-text-wrap zindex">{{ item.value }} ({{ item.available_units }} {{ 'AVAILABLE_UNITS' |
translate }})</ion-label>
<ion-label class="ion-text-end zindex" *ngIf="item.price_additional > 0">{{ item.price_additional | formatCurrency : currency }}</ion-label>
<ion-item lines="none" class="ion-text-end moreOne zindex"
*ngIf="attribute[1][0].attribute.is_more_one && valueControlCheckbox[i][j].status">
<ion-button slot="start" color="secondary" size="small" fill="outline" class="f-s-8"
(click)="removeMoreOne(i,j)">
<ion-icon slot="icon-only" name="remove-outline"></ion-icon>
</ion-button>
<ion-label>{{ valueControlCheckbox[i][j].quantity }}</ion-label>
<ion-button slot="end" color="secondary" size="small" fill="outline" class="f-s-8"
(click)="addMoreOne(i,j)">
<ion-icon slot="icon-only" name="add-outline"></ion-icon>
</ion-button>
</ion-item>
</ion-item>
</ion-list>
<!-- [(colorPicker)]="color"
[cpOutputFormat]="'hex'" -->
<div class="divContainer" margin *ngIf="attribute[1][0].attribute.attribute_type_id == 4">
<ion-fab vertical="bottom" horizontal="start" slot="fixed" class="fabColor">
<ion-fab-button>
<ion-fab-button [style.background]="color" (colorPickerClose)="closePicker()"></ion-fab-button>
</ion-fab-button>
</ion-fab>
<ion-label class="labelColor">Código color: {{ color }}</ion-label>
</div>
<div [style.background]="color" *ngIf="attribute[1][0].attribute.attribute_type_id == 4" class="divSuite">
<img src="assets/img/suite.png" alt="suite" />
</div>
</div>
</div>
<ion-row *ngIf="origin != 'orderDetail'" class="ion-margin-top">
<ion-col>
<ion-label>{{ 'COMMENTS_ADITIONAL' | translate }}</ion-label>
<ion-input [(ngModel)]="comments" debounce="1000" (ionChange)="inputCommentsChange()" type="text"
placeholder="{{ 'COMMENTS_ADITIONAL_2' | translate }}" class="inputComments ion-margin-top"></ion-input>
</ion-col>
</ion-row>
</ion-list>
</ion-content>
<ion-footer class="ion-no-border" *ngIf="origin != 'orderDetail'">
<ion-toolbar color="light">
<ion-grid>
<ion-row class="align-items-center">
<ion-col size="5">
<ion-item lines="none" class="containerQuantity">
<ion-button slot="start" color="secondary" size="small" fill="clear" class="ion-no-margin"
(click)="removeProductCart()"
[disabled]="!quantity || quantity == 0 || (quantity == 1 && product.quantity == 0)">
<ion-icon name="remove-outline" class="ion-no-margin"></ion-icon>
</ion-button>
<ion-label class="ion-text-center">{{ quantity }}</ion-label>
<ion-button slot="end" color="secondary" size="small" fill="clear" class="ion-no-margin"
(click)="addProductCart()" [disabled]="quantity >= maxStock">
<ion-icon name="add-outline" class="ion-no-margin"></ion-icon>
</ion-button>
</ion-item>
</ion-col>
<ion-col size="7">
<ion-button color="{{ propertyButtonAdd.color}}" expand="block" (click)="productChange(propertyButtonAdd.id)">
<ion-label slot="start" class="b-l ion-text-start ion-float-left"> {{ propertyButtonAdd.name }} </ion-label>
<ion-label slot="end" class="b-r ion-text-end ion-float-right">{{ priceTotal | formatCurrency : currency }}</ion-label>
</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</ion-toolbar>
</ion-footer>