Creación de Página de Detalle de Producto en eCommerce
Resumen
Es momento de hacer un repaso de todo lo aprendido hasta aquí.
Creación de rutas
Creación de rutas con parámetros
Redirección a otras rutas con RouterLink
Destacar ruta actual con RouterActive
Ruta 404
El desafío para ti es avanzar con tu aplicación para fortalecer los conocimientos. Crea una barra de navegación que te permita navegar por tu app. Crea rutas dinámicas que reciban parámetros por URL para capturarlos y hacer solicitudes a una API. Además, customizar una página 404 para las rutas no definidas.
Qué API de prueba usar para practicar
Si aún no iniciaste tu propio proyecto de prueba o no sabes qué hacer, existen muchas APIs gratuitas que puedes utilizar para practicar y construir aplicaciones. Te comparto las más populares para que las investigues:
Sugiero utilizar la dependencia router en vez de location. Utilizando el método back de la dependencia location te devuelve a la página anterior que se encuentre en el historial de tu navegador, es decir si alguien te envía el link o ingresas directamente a el, te devolverá a la página donde estabas anteriormente o sea es posible que te saque de la app si no estabas navegando en ella. Utilizando la dependencia router puedes utilizar dos métodos y pasarle específicamente la URL a la que deseas que navegue cuando se ejecute la acción, estos dos métodos son navigate() y navigateByUrl().
Que buen dato, gracias
Ya se porque cuando alguien me envia un link y doy hacia atrás me saca de la app :D
es impresionante como piensan en todo los que desarrollaron angular
Es cierto, ya llevan varios años desarrollándolo y perfeccionándolo.
hace uso de window.location de JavaScript. Nos llevaría a la página anterior sin importar cual sea. Si añadimos la ruta al navegador esta podría sacarnos de la aplicación o incluso no existir.
El uso de router nos llevaría de vuelta a una ruta en concreto. Por lo que si venimos del home nos llevará a la categoría del producto.
les recomiendo nistalar el plugin de vscode path intellisense, sirve para el autocompletado de rutas
muy buena recomendacion
SwiperSlide not work
Lastimosamente, los desarrolladores del módulo Swiper eliminaron en su última versión (https://swiperjs.com/changelog#9-0-0-2023-02-01) todos los componentes de Angular. Sin embargo, en la versión 8 (usada en este curso) aún posee los componentes, pero por alguna razón no están funcionando correctamente.
La solución que proponen los desarrolladores de Swiper es hacerlo a través de la documentación que brindan para el framework Element (https://swiperjs.com/element) que al parecer de esa manera es posible reemplazar el Slide para las imágenes.
En mi caso no logre que este funcionara de dicha manera. Por tanto, opte por buscar otra opción que permitiera implementar el Slide, como resultado encontré un módulo llamado angular-image-slider, la cual funciona bien y es fácil de utilizar. Este es el enlace de la librería en npmjs: https://www.npmjs.com/package/angular-image-slider.
Espero que les fusioné para solucionar el problema y puedan seguir aprendiendo.
Les paso los estilos que hice. Están un poco más estéticos, en espacial el botón de Back, y ya tienen el responsive:
Resulta que la función switchMap siempre debe de devolver uno de 3 valores:
Una Subscribable o una Promise
Un array
Un iterable
entonces, si se encuentra el producto con el metodo getOne este devuelve el observableInput, pero si no entonces debemos devolver un Array o un Iterable.
Te dejo lo que debe de devolver:
export declare type ObservableInput<T>=SubscribableOrPromise<T>|ArrayLike<T>|Iterable<T>;
Saludos!
Actualmente el SwiperSlide no está funcionando correctamente con el Angular, sugiero trabajarlo con Boostratap 5.0
Pagina HTML
<div class="page-product"><button(click)="onToBack()">Back</button><div class="detail"*ngIf="product"></div><div class="gallery"><div *ngIf="product"class="product-detail"><div id="carouselExampleIndicators"class="carousel slide" data-bs-ride="carousel"><div class="carousel-indicators"><button type="button"*ngFor="let img of product.images; index as i"class="carousel-item"[class.active]="i === indexImgActivate" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"class="active" aria-current="true" aria-label="Slide 1"></button></div><div class="carousel-inner"><div *ngFor="let img of product.images; index as i"class="carousel-item"[class.active]="i === indexImgActivate"><img [src]="img"class="d-block w-100" alt="..."></div></div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"(click)="onPrevImage()"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"(click)="onNextImage()"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></button></div></div></div><div><h2>{{ product.title}}</h2><h3>{{ product.price| currency }}</h3><h3>{{ product.description}}</h3></div></div>
Adicional tendran que adicionar dos eventos en el ts.
Y pero que pasaria si vengo de otra página y toco back? me redireccionaria a otra página cierto? JAJAJ
Hola, si estas en lo correcto te retorna a la pagina anterior tambien puedes validar y ver si el historial no pertenece tu app no haga un goBack si no que vaya al home de la pagina.
Al parecer la nueva versión de swiper no tiene doc para angular, dejo enlace a la versión anterior para que puedan usarlo: https://v8.swiperjs.com/angular
Un compañero lo paso en cursos anteriores. Ahora lo paso para que puedas probarlo.
En caso que quiera mandar mas parámetros, como va en website-routing?
En 2023 swiper ya no se implementa de la manera en que se muestra en el curso. Utilicen esta forma:
<div class="detail"*ngIf="product"><div class="gallery"><swiper-container><swiper-slide *ngFor="let img of product?.images"><img [src]="img" alt=""></swiper-slide></swiper-container></div>
ActivatedRouteparamMap: Observable que contiene un mapa de los parámetros obligatorios y opcionales específicos de la ruta. El mapa admite la recuperación de valores únicos y múltiples del mismo parámetro.
