Producto - Item

Instrucciones detalladas para trabajar con el componente donde mostramos la información del producto

En este apartado os mostraré todas las configuraciones que tenemos disponibles en este componente, que lo que hará será mostrar la información del producto como puede ser el nombre, precio (en la divisa seleccionada), precio con descuento (si se da el caso), valoraciones del producto y mucho más.

Lo primero que necesitamos es importar el módulo que tenemos para utilizar el componente y visualizar toda la información del producto.

Módulo

// your.module.ts
import { NgModule } from '@angular/core';
import {  ProductItemModule } from '@mugan86/ng-shop-ui';

@NgModule({
  declarations: [YourComponent],
  imports: [
    ...
     ProductItemModule
  ]
})
export class YourModule { }

Componente

Si no tenemos ningún dato a mano, podemos utilizar esta referencia para hacernos a la hora de hacer el primer uso de este elemento de la librería.

La estructura de los productos deberá de ser la siguiente:

export interface IProduct {
    id: string;                 // Identificador del product de la tienda
    slug?: string;              // Slug del producto
    name: string;               // Nombre
    img: string;                // Imagen del producto
    stock: number;              // Cantidad de unidades en el stock
    discount?: number;          // Porcentaje de descuento que se aplicará
    price: number;              // Precio real
    priceDiscount?: number;     // Nuevo precio con descuento, si discount tiene valor
    description: string;        // Descripción del producto
    qty?: number;               // Cantidad de unidades que se van a adquirir
    rating?: IRatingItem;       // Información sobre las reseñas
}

Teniendo en cuenta esta estructura, tenemos que usarla dentro del componente, añadiendo la lista de productos.

export class YourComponent implements OnInit {
  productsList;

  ngOnInit(): void {
    this.productsList = // Traer los valores cargados en el products.json u otros
  }

  addToCart($event: IProduct) {
    // Usar la información del producto pasado para llevarlo al carrito de compra
    console.log($event);
  }

  showProductDetails($event: IProduct) {
    console.log($event);
  }
}

Pasar / Recibir la información

Tenemos varias opciones para poder personalizar mucho más nuestro componente, para poder adaptarse mejor a nuestros gustos / necesidades.

A continuación os dejo un ejemplo básico con un producto único y creando una lista de productos con la estructura del componente <shop-product-item></shop-product-item>.

Si queremos personalizarlo más, como por ejemplo añadiendo la divisa con la que trabajamos (por defecto está en Euros), seguimos los pasos de este apartado.

// Un elemento
<shop-product-item
          [showDesc]="false"
          [product]="productDataObject"
          (add)="addToCart($event)"
          (itemDetails)="showProductDetails($event)"
        ></shop-product-item>

// Una lista de elementos
<div class="row">
      <div
        class="col-lg-3"
        *ngFor="let p of productsList"
        style="margin-bottom: 12px;"
      >
        <shop-product-item
          [showDesc]="false"
          [product]="p"
          (add)="addToCart($event)"
          (itemDetails)="showProductDetails($event)"
        ></shop-product-item>
      </div>
</div>

Moneda

Si deseamos seleccionar una moneda que no sea EURO (la que es por defecto), tenemos que añadir la información para pasar la moneda mediante el input. Si no lo hacemos, se mostrará en Euros (€).

Las monedas y los símbolos disponibles, serán los siguientes. Si por casualidad queréis añadir una nueva moneda, os agradecería que contataséis conmigo solicitando la divisa, con su referencia y su símbolo para ir completando:

Para poder añadir la configuración de la manera, en el componente padre, tenemos que crear una propiedad y tenemos que seleccionar el símbolo, haciendo la siguiente combinación:

CURRENCIES_SYMBOL = Lista de símbolos CURRENCY_LIST = Referencia de la moneda (por ejemplo EUR para hacer referencia al Euro.

Teniendo en cuenta esa información, creamos una propiedad donde tenemos la lista de símbolos seleccionamos su símbolo añadiendo en las propiedades la referencia de ese idioma con el "CURRENCY_LIST". Os dejo varios ejemplos para que lo veáis.

import { CURRENCIES_SYMBOL, CURRENCY_LIST } from '@mugan86/ng-shop-ui';
...
export class YourComponent implements OnInit {
  productsList;
  // Seleccionando Dolar Americano (USD)
  myCurrency = CURRENCIES_SYMBOL[CURRENCY_LIST.USD] // $
  // Seleccionando Dolar Peso Mexicano (MXN)
  myCurrency = CURRENCIES_SYMBOL[CURRENCY_LIST.MXN] // $
  // Seleccionando Libra Esterlina (GBP)
  myCurrency = CURRENCIES_SYMBOL[CURRENCY_LIST.GBP] // £
  ...
}

Pasamos desde el input la información para especificar la configuración del la moneda seleccionada donde "selectCurrency" es el nombre de la propiedad (y tiene que ser así, si o si) donde vamos a asignar la propiedad "myCurrency" del componente padre.

<shop-product-item          
    [selectCurrency] ="myCurrency"          
    [showDesc]="false"          
    [product]="productDataObject"          
    (add)="addToCart($event)"          
    (itemDetails)="showProductDetails($event)"></shop-product-item>

Con esto, obtendriamos nuestro producto con la información correcta.

Eventos de salida

Tenemos dos eventos de salida, donde en los dos casos obtenemos la información del producto, para poder hacer la acción requerida

Evento que se ejecuta para poder obtener el producto y dentro de la función poder usarlo para enviar esa información al carrito.

AnteriorCarouselSiguienteRating - Valoraciones

Última actualización