No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
22H
11M
21S

SideMenu del carrito de compras

16/31
Recursos

Aportes 14

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Cada dia esta mas rara la FakeApi XD

Recomiendo que cuando se abra el aside de checkout y despu茅s que le das click a alguna tarjeta de nuevo, cerrar el aside de chekout porque sigue quedando abierto por debajo

No s茅 si a alguien m谩s le pase como a m铆, la Card de 鈥楳y order鈥 no se mostraba por un problema de estilos, pero s铆 era renderizada en el navegador.
Solamente le agregu茅 un top-20 a las clases de tailwind:

<aside
      className={`${context.IsCheckoutSideMenuOpen ? 'flex' : 'hidden'} checkout-side-menu flex-col fixed top-20 right-0 border border-black rounded-lg bg-white`}
    >

驴Por qu茅 no me aparece el componente CheckoutSideMenu en Home?

Una posible causa. Seg煤n lo que estuve viendo, parece ser un problema con el enrutamiento y la forma en que se renderiza el componente. Es posible que el componente CheckoutSideMenu est茅 oculto por <AppRouters />

Posible soluci贸n 1:

Un compa帽ero en los comentarios de estudio de Platzi sugiere agregarle top-20 y as铆 deber铆a funcionar.

Posible soluci贸n 2:

Otra posible soluci贸n sugerida por otro compa帽ero es colocar el componente CheckoutSideMenu en el componente Home, pero le argumentan lo siguiente:

El problema es que si luego quieres abrir el componente desde otra p谩gina, no se va a poder si est谩 solo en Home.

Posible soluci贸n 3:

Mi posible soluci贸n es agregar el componente en el componente Layout, ya que se puede compartir con otras p谩ginas y no ser铆a necesario agregarle top-20.

Resultado:

Cuando apretamos el signo + , le a帽ad铆 esta notificacion/alerta:

Sugerencia:

A los 11鈥 del video se incluye el componente 鈥淐heckoutSideMenu鈥 en el App.
Veo que el compnente 鈥淐heckoutSideMenu鈥 puede ser incluido dentro del componente 鈥淗ome鈥 en vez de que sea incluido dentro del App.
Entonces solo dentro del App tendr铆amos 3 elementos:

  • Context provider

  • Router

  • NavBar

Aqu铆 va el c贸digo incluido dentro del componente Home:

import { useState, useEffect } from 'react'
import Layout from '../../components/layout/Layout'
import Card from '../../components/card/Card'

import ProductDetail from '../../components/productdetail/ProductDetail'

import CheckoutSideMenu from '../../components/checkoutsidemenu/CheckoutSideMenu'

const url = 'https://api.escuelajs.co/api/v1/products'

function Home() {
    const [items, setItems] = useState(null)

    useEffect(() => {
        fetch(url)
        .then(response => response.json())
        .then(datita => {
            setItems(datita)
            console.log(datita.length)
            console.log('datita', datita)
        })
    }, [])

    return (
        <Layout>
            Home
            <div className='grid gap-4 grid-cols-4 w-full max-w-screen-lg'>
                {
                items?.map((item) =>{
                            return   <Card key={item.id} item={item} />
                        })
                }
            </div>
            <ProductDetail/>
            <CheckoutSideMenu/>
        </Layout>
    )
  }
  
  export default Home

Si tienen alguna observaci贸n, bienvenida sea.


creo que vieron openheimer

Seria recomendable cerrar el addProductToCart con la sentencia
context.closeCheckoutSideMenu() para cuando se clickea en la tarjeta?

Tal vez ya muchos lo sepan y sea un poco tarde decirlo pero
si en vez de crear carpeta escriben 鈥楴ombreCarpeta/index.jsx鈥 se crean la carpeta y contendr谩 el nombre del archivo que pusieron en este caso index

se cay贸 la API

Les comparto mi avance

En el minuto 8:30 menciona el error que existe en los 2 botones donde se traslapan el ProductDetail y el CheckoutSideMenu lo que hice para solucionarlo fue cambiar el orden de las etiquetas <figure/> ,<p> ,<button> y algunas modificaciones m铆nimas en el css

El orden y el ccs destacado para que nos se traslapen los eventos y se mantenga todo en su lugar es el siguiente:

<div className='relative'>
	<figure className='relative'
		onClick={() => showProductDetail(data)}>
		<span className='absolute'>Categoria</span>
		<img src='....' alt='..'/>
		<p>
			<span>Titulo</span>
			<span>Precio</span>
		</p>
	</figure>

	<button className='absolute top-0 right-0'>
		+
	</button>
</div>

Como se podr谩n dar cuenta met铆 la etiqueta <p> dentro de <figure> y saque de <figure> el <button>
El primer <div> se pone tambi茅n en relative y el Button en absolute.
Y queda todo separado 馃槂

Aun as铆 les dejo captura de mi c贸digo por si quedo alguna duda.

Hay una extensi贸n que me ayuda a cuando agrego propiedades o un usestate, este se agrega con un tab.

Te comparto lo comparto:
https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode

import { useContext } from 'react鈥
import { OrderContext } from '鈥/鈥/Context鈥
import BuildingStorefrontIcon from 鈥楡heroicons/react/24/outline/BuildingStorefrontIcon鈥

const Card = (data) => {
//Order . count items
const context = useContext(OrderContext)
//funcion para agregar items a la orden
const addItemsToOrder = (itemData) => {
context.setCount(context.count +1)
context.setOrders([鈥ontext.ordersItems, itemData])
}
return(
<div
className=鈥榞rid place-items-center鈥>
<div className=鈥榖g-gradient-to-br from-sky-700 鈥 w-56 h-30 rounded-2xl鈥>
<figure className=鈥榬elative mb-3 w-full鈥>
<div
className='text-black text-lg font-bold absolute py-2 bottom-2 right-2 flex justify-center items-center bg-white w-8 h-8 p-1 rounded-full鈥
onClick={() => addItemsToOrder(data.data)}>
<BuildingStorefrontIcon></BuildingStorefrontIcon>
</div>
<h1 className=鈥榯ext-center py-2 text-3xl鈥>{data.data.nombre}</h1>
<h1 className=鈥榯ext-center py-2 text-2xl font-bold鈥>Gs.: {data.data.precio.toLocaleString()}</h1>
</figure>
</div>
</div>
)
}

export default Card