Orden de compra

Clase 24 de 30 • Curso de React 17 con Webpack 5 y Sass

Manuel Valencia Londoño

student•

En la clase agregamos algunos estilos al componente MyOrder. Una de ellas fue:

.MyOrder {
    bottom: 0;
}

Pero al agregar muchos elementos a nuestro carrito y ver la orden no se ve muy bien… Por ende recomiendo modificarlo de la siguiente manera:

.MyOrder {
    bottom: auto;
}

Luis Alejandro Vera Hernandez

student•

Graciias Manuel, de verdad estaba feo cuando se agregaba muchos elementos :D

Luciano Cavallo

student•

Gracias por el aporte Manuel!

Joseph Manuel Salen Pantoja

student•

A los estilos de MyOrder.js yo le agregué los siguientes estilos para darle un poquito de animación :D al hacer click ahora la barra lateral "crece" de derecha a izquierda.

@keyframes swipeLeft {
  0% {
    width: 0;
  }
  100% {
    width: 360px;
  }
}

.MyOrder {
  ...
  ...
    animation: swipeLeft 0.26s ease;
}

Luis Alejandro Vera Hernandez

student•

Super chevere, se nota que ahora tiene una entrada mucho mas suave !

Iván Rodríguez

student•

Si no se les ve, ojo cuando escriban en la iteración. Si ponen la arrow function con " { } " tienen que poner el return, y si lo hacen con " ( ) " pos si el return. Lo digo pq me acaba de pasar xd

Emmanuel Gutierrez

student•

Hace 20 minutos estoy con eso y no me di cuenta, gracias jaja

Adalberto Zanabria Castro

student•

x3 me fui con esa finta jajaja

JOSE MARIO ANGEL GARCIA SANDOVAL

student•

<code> 
Recomiendo agregar scroll
.MyOrder {
overflow-y: auto;
height: 350px;
}

Juan Andrade

student•

Thanks bro, me sirvio un monton!

Diego Cortés Fuentes

student•

Con relación al error del setToggleOrders con ( ) => o sin el, encontré un enlace muy bueno que lo explica (Está en inglés) Aquí

Ariadna Angélica Guemes Estrada

student•

Gracias! me ayudó a entender mejor la clase :)

Juan Jose Herrera Mendoza

student•

Muchas gracias! Muy útil

Eduardo Rafael Romero Bernal

student•

Claro se ve perfectamente como va cambiando la numeración del carrito. Genial.

Paniagua Cesar

student•

Leonardo Gabriel Puebla

student•

hahahaha

Braulio Rivas Abad

student•

En esta clase, implementaremos una manera para poder desplegar nuestro carrito de compras. Para ello, debemos acceder primero a Header.jsx, donde está el ícono del carrito de compras

//Header.jsx
import MyOrder from '@containers/MyOrder';

const Header = () => {
	const { state } = useContext(AppContext);
	const [toggleOrders, setToggleOrders] = useState(false);	

	const handleToggle = () => {
		setToggle(!toggle);
	}

	return (
			<div className="navbar-right">
				<ul>
					<li className="navbar-shopping-cart" onClick={() => setToggleOrders(!toggleOrders)}>
						<img src={shoppingCart} alt="shopping cart" />
						{state.cart.length > 0 ? <div>{state.cart.length}</div> : null}
					</li>
				</ul>
			</div>
			{toggleOrders && <MyOrder />}
		</nav>
	);
}

export default Header;

Ahora, para poder mostrar el carrito de compras, añadimos otra variable de estado en el componente llamada toggleOrders. Esta se inicializa en falso para indicar que no queremos mostrar el carrito. Para ello, añadimos 2 expresiones. Una en donde solamente se añadira el nodo MyOrder si toggleOrders es verdadero. Por eso se inicia en falso. El evento que se ejecuta cuando damos click esta en el carrito de compras. Añadimos un onClick, el cual ejecuta una función anónima en la que cambia el valor booleano de toggleOrders. Así, cada vez que demos click, alterna en visibilidad. Para que se pueda ver bien el elemento, editamos el css.

// MyOrder.scss
.MyOrder {
	top: 60px;
	bottom: auto; // créditos => @Manuel Valencia Londoño
	border-radius: 6px;
	border: 1px solid var(--very-light-pink);
}

Ahora, una vez tenemos la lógica para mostrar el elemento de MyOrder, con todas las ordenes correspondientes, debemos editar este mismo componente, para que se muestren tantos elementos en el carrito como diga el contexto. Es decir, si en el carrito hay 5 productos, después en el menu de MyOrder deberían haber 5 elementos. Para ello, editamos MyOrder.jsx

// MyOrder.jsx
import React, { useContext } from 'react'; // añadimos useContext
import AppContext from '@context/AppContext'; // añadimos AppContext

const MyOrder = () => {
	const { state } = useContext(AppContext);

	return (
			<div className="my-order-content">
				{state.cart.map(product => (
					<OrderItem product={product} key={`orderItem-${product.id}`}/>
				))}
			</div>
		</aside>
	);
}

export default MyOrder;

Ahora, lo que hacemos es traer las herramientas necesarias para poder trabajar con contexto. En el componente, traemos el valor de state y lo guardamos como contexto para poder acceder a dicho estado.

Este es un ejemplo perfecto del uso de context, donde simplemente cada componente accede a las variables si es necesario o no. No hay que trasladar estos datos de manera tediosa y repetitiva

Como en state tenemos un array, por ello creamos una lógica con map. Al ejecutar state.cart.map estaremos recorriendo cada elemento de state (es decir, del array de los elementos del carrito) Y regresamos un nodo llamado OrderItem. En orderItem le pasamos un valor product y key, en el cual podrán guardar cada componente un elemento product y un key identificador único. Simplemente editamos de tal manera que el key sea totalmente único, por ello usamos templateliterals.

Patrick Jhonatan Hernandez Blanco

student•

Siento que se ve un poco fea la sección de MyOrder con todo amontonado sin un scroll escribí este código, espero les sea de utilidad

jsx:

<div className="seccion-scroll">
					{
						estadoApp.cart.map( product => (
							<OrderItem 
								key={ `orderItem-${ product.id }` } 
								product={ product } 
							/>
						) )
					}
				</div>

css:

.seccion-scroll::-webkit-scrollbar {
	width: 0.8rem;
}
.seccion-scroll::-webkit-scrollbar-track {
background: var( --very-light-pink );
border-radius: 1rem;
}
.seccion-scroll::-webkit-scrollbar-thumb {
background-color: var( --hospital-green );
border-radius: 20px;
}
.seccion-scroll {
	height: 300px;
	overflow-y: scroll !important;
	overflow-x:hidden !important;
}

obteniendo como resultado algo asi:

Jhoan Isaac Garcia Buitrago

student•

Quedo elegante, gracias por compartirlo

Ariadna Barreto

student•

Gracias, me sirvió! Solo le sumé un margin-right al icono de close para que no quede tan cerca de la barra de scroll.

Sergio Lopez

student•

Seguro que a más de una persona le parece muy fea la barra de scroll. Aquí dejo como lo he quitado de mi MyOrders mediante CSS.

Eriksen Lezama

student•

Respecto al **key **igual habrá un warning usando el nombre sugerido. Recuerden que el id es el mismo si agregas al carrito un mismo producto más de una vez. No soy fan de usar el index pero en este caso lo usé para evitar el error/warning.

{state.cart.map((product, index) => (
	<OrderItem
		key={`orderItem-${index}-${product.id}`}
		product={product}
	/>
))}

Diego Fernando Caviedes Camaho

student•

Buen dato gracias

Ariadna Barreto

student•

excelente aporte, gracias!

Orlando Díaz Torrealva

student•

Para que quede más conciso se pueden agregar los siguientes estilos:

/*Header.scss*/

nav {
	position: sticky;
	top: 0;
	background-color: white;
}

/*MyOrder.scss*/

.MyOrder {
	position: fixed;
	top: 60px;
	bottom: 0;
	overflow-y: auto;
	background-color: white;
}

Jesus Ivan Villalobos de la Cruz

student•

Le agregué una validación extra para mostrar un mensaje si no tienes ningun producto en el carrito:

{state.cart.length > 0 ? (
          state.cart.map((product) => (
            <OrderItem product={product} key={`orderItem-${product.id}`} />
          ))
        ) : (
          <div className="cart-empty"> No tienes productos Agregados :( </div>
        )}

css:

.cart-empty {
  color: var(--hospital-green);
  text-align: center;
  font-weight: bold;
}

Luis Diego Aguilar Ruiz

student•

Hola amigos, una consulta, alguien sabe por que en el minuto 8:00 al 8:12 el profesor utiliza un parentesis en el arrow function en vez de corchetes justo luego de la flecha?

{state.cart.map( item => ( <OrderItem product={product} key={orderItem-${product.id}} /> ))}

De antemano, muchas gracias

Carlos Zabala Roqueme

student•

Es una forma de omitir el return, con esa sintaxis se hace implícito.

Es lo mismo de hacer esto:

state.cart.map( item => {
	return <OrderItem product={product} key={orderItem-${product.id}} />
})

Edwin Torres

student•

Cuando veas un paréntesis después de la función flecha es xq te va a retornar un objeto

JOSE RANGEL

student•

Una nota 😎 . El efecto toggle también se puede realizar con useRef. En teoría se produce el mismo efecto solo que es mucho más optimo para el performance de la app, ya que con el ref no se re-renderiza la app, caso contrario sí se usa useState.

Jhonatan Alexander Victorio Galvez

student•

Wenas wenas, si han notado, la estilización del componente de "MyOrder.jsx" no se termina de ver del todo bien, Asi que agregué una clase y le hice unas modificaciones a un par de clases.

Aqui tienen el codigo:

Clase agregada en el documento de MyOrder.jsx:

<div className="container-total">
	<div className="order">
		<p>
			<span>Total</span>
		</p>
		<p>$560.00</p>
	</div>
	<button className="primary-button">
		Checkout
	</button>
</div>

Clases Modificadas y agregadas al My Order.scss:

.MyOrder {
	width: 360px;
	padding: 24px;
	box-sizing: border-box;
	position: absolute;
	right: 0;
	top: 60px;
	background-color: var(--white);
	border-radius: 6px;
	bottom: 0;
	overflow: auto;
}

.my-order-content{
	max-height: 60%;
	overflow: auto;
}


.container-total{
	width: 85%;
	position: absolute;
	top: 75%;
}

Pablo Andres Fajardo Ruano

student•

Si al darle click al icono del carrito y se les rompe la aplicación es decir se pone todo en blanco es porq en el archivo MyOrder.jsx les falta importar este componente q estamos utlizando mas no importando :

import OrderItem from "../components/OrderItem"

Luis Fernando Morla Mora

student•

estas ultimas clases con Oscar han sido un deleite, hasta cuando el se equivoca te deja JOYITAS de experiencia!!!!

Ariadna Angélica Guemes Estrada

student•

Alguien sabe que sucede con el atributo 'key' si se añade al carrito el mismo elemento multiples veces?

Se repetiría key en varios elementos no? Eso estaría en contra del propósito de key, no?

Francisco Murillo

student•

si, lo que puedes hacer es crear un identificar para cada item, asi cuando tengas varios item del mismo producto no se repetira, y ese idetificador se lo pasas como key a cada item

David Castro

student•

Por qué llama múltiples veces a la función cuando es anónima, en el onClick?

JOSE RANGEL

student•

Hola David, puedes ser más específico?

Anthony Quintero

student•

cómo hago para que la flecha que está dentro también me cierre el toggle? que puedo usar?

JOSE RANGEL

student•

Hola Antonhy, básicamente debes ponerle a la flecha el onClick para que ejecute el setToggleOrder (creo que así ses llama) y lo pase a false. Saludos!

Anthony Quintero

student•

muchas gracias José! creo que lo resolví de otra manera (mucho más complicada) pero te agradezco amigo.

Orden de compra

Introducción a React

¿Qué es React.js?

Conceptos fundamentales de React

Configurando el entorno de desarrollo para React

Análisis de dependencias en proyectos de React

Instalación de React y React DOM

Configuración de Webpack y Babel

Cambios en tiempo real con Webpack

React con CSS y Sass

Maquetación en React

Transformando HTML y CSS en componentes de React

Estilos en los componentes de React

Páginas, rutas y componentes

React Router DOM

Navegación entre rutas

Header en todas las rutas

¿Qué es Atomic Design? Conoce los beneficios

Solución al reto: componentes y rutas de React Shop

Tipos de componentes en React: stateful vs. stateless

Imágenes y alias en Webpack

Lógica con React Hooks

React.useState

Toggle del menú

useEffect y consumo de APIs

Custom Hooks para la tienda

useRef y formularios

React Context

Completando el carrito de compras

Orden de compra

Calculando el precio total

Eliminando productos del carrito

Deploy

Cómo comprar tu dominio y conexión con Cloudflare

Automatizando el despliegue con GitHub Actions

Próximos pasos

Retos de React.js (bug hunters)

Continúa con el Curso Práctico de Next.js