Implementación de Productos Relacionados en Angular eCommerce

La implementación de productos relacionados en un eCommerce es una estrategia fundamental para mejorar la experiencia del usuario y aumentar las ventas cruzadas. En este artículo, exploraremos cómo desarrollar esta funcionalidad en Angular, aprovechando características avanzadas como el lazy loading a nivel de componentes y el uso eficiente de endpoints de API.

¿Cómo implementar productos relacionados en un eCommerce con Angular?

Cuando desarrollamos un sitio de comercio electrónico, mostrar productos relacionados en la página de detalle de un producto es una característica que puede incrementar significativamente la tasa de conversión. Esta funcionalidad no solo mejora la experiencia del usuario al ofrecerle alternativas relevantes, sino que también aumenta el tiempo de permanencia en el sitio y las posibilidades de venta.

Para implementar esta característica en Angular, necesitamos entender primero cómo funciona nuestra API y qué endpoints nos proporciona para obtener productos relacionados.

Entendiendo los endpoints de la API

Nuestra API nos ofrece varios endpoints para trabajar con productos:

• Un endpoint para obtener todos los productos
• Un endpoint para obtener un producto específico por ID
• Un endpoint para obtener productos relacionados

Para obtener productos relacionados, podemos usar la siguiente estructura:

/products/{id}/related

Este endpoint nos devolverá todos los productos de la misma categoría que el producto especificado, excluyendo el producto original.

Sin embargo, como estamos trabajando con URLs amigables para SEO, utilizaremos el slug del producto en lugar del ID:

/products/{slug}/related

Este enfoque nos permite mantener la consistencia en nuestra estrategia de SEO mientras obtenemos los productos relacionados.

Creando el componente de productos relacionados

El primer paso es generar un nuevo componente que se encargará de mostrar los productos relacionados:

ng generate component domains/products/components/related

Este comando creará los archivos necesarios para nuestro componente. Como estamos utilizando Tailwind CSS para los estilos, podemos eliminar el archivo CSS generado automáticamente.

Ahora, vamos a configurar nuestro componente para recibir el slug del producto como input:

import { Component, Input } from '@angular/core';
import { inject } from '@angular/core';
import { ProductService } from '../../services/product.service';
import { ProductComponent } from '../product/product.component';

@Component({
  selector: 'app-related',
  templateUrl: './related.component.html',
  standalone: true,
  imports: [ProductComponent]
})
export class RelatedComponent {
  private productService = inject(ProductService);
  
  @Input({ required: true, alias: 'slug' }) slug!: string;
  
  relatedProducts = this.productService.getRelatedProducts({
    slug: this.slug
  });
}

Es importante notar que estamos utilizando la inyección de dependencias para obtener el servicio de productos y configurando un input para recibir el slug del producto.

Implementando el servicio para obtener productos relacionados

Ahora, necesitamos añadir un método en nuestro servicio de productos para obtener los productos relacionados:

getRelatedProducts(params: { slug: string }) {
  return this.http.get<Product[]>(`${this.apiUrl}/products/${params.slug}/related`);
}

Este método utilizará el endpoint que mencionamos anteriormente para obtener los productos relacionados basados en el slug proporcionado.

Creando la plantilla HTML

Para mostrar los productos relacionados, utilizaremos una plantilla HTML que incluya un grid para organizar los productos:

<div class="mt-8">
  <h2 class="text-2xl font-bold mb-4">Productos relacionados</h2>
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
    @for (product of relatedProducts(); track product.id) {
      <app-product [product]="product"></app-product>
    }
  </div>
</div>

Esta plantilla utiliza un componente reutilizable app-product para mostrar cada producto, lo que demuestra la reutilización de código en nuestra aplicación.

Integrando el componente en la página de detalle

Finalmente, necesitamos integrar nuestro componente de productos relacionados en la página de detalle del producto:

import { RelatedComponent } from '../../components/related/related.component';

// En el template
<app-related [slug]="product().slug"></app-related>

Al añadir este componente a nuestra página de detalle, pasamos el slug del producto actual como input, lo que permite al componente obtener y mostrar los productos relacionados.

¿Qué ventajas ofrece esta implementación?

Esta implementación de productos relacionados ofrece varias ventajas:

• Reutilización de código: Utilizamos componentes existentes para mostrar los productos.
• Carga eficiente: Los productos relacionados se cargan solo cuando se necesitan.
• Mantenimiento sencillo: La lógica está encapsulada en componentes específicos.
• Experiencia de usuario mejorada: Los usuarios pueden descubrir productos similares fácilmente.

La implementación de esta característica nos permite también explorar conceptos avanzados de Angular, como la carga diferida de componentes, que puede mejorar significativamente el rendimiento de nuestra aplicación.

Esta técnica de mostrar productos relacionados no solo mejora la experiencia del usuario, sino que también puede aumentar las ventas al presentar alternativas relevantes a los visitantes de tu tienda en línea. ¿Has implementado características similares en tus proyectos? Comparte tu experiencia en los comentarios.