Interacción entre todos los componentes

Personalmente, resolvi todas las funciones del siguiente modo. Me parece mucho mas sencillo y probe todas las combinaciones de colisiones posibles y funciona todo a la perfeccion. Al principio tenia la duda de que se podria llegar a añadir la clase de inactive mas de una vez a los elementos, rompiendo todo el codigo, pero finalmente pude observar que eso no ocurria.
PD: algunos nombres son diferentes, como el de orderDetail, porque asi fue mi solucion al conflicto de la clase pasada, pero funciona con cualquier nombre.

al principio no me sentia convencido de estar en este curso, pero ahora que he avanzado un poco, solo digo tu eres un maquina.

Esta fue mi solución para abrir y cerrar elementos según fuera el caso. Utilicé una función que recibe como parámetros el principal elemento a abrir (o cerrar), un array de los demás elementos que se deberían cerrar, y por último un valor booleano para indicar si unicamente se quiere abrir el elemento.

function toggleDesktopMenu() {
  toggleDisplayedViews(desktopMenu, [shoppingCartView, productDetailsPanel]);
}

function toggleMobileMenu() {
  toggleDisplayedViews(mobileMenu, [shoppingCartView, productDetailsPanel]);
}

function toggleCartAside() {
  toggleDisplayedViews(shoppingCartView, [desktopMenu, mobileMenu, productDetailsPanel]);
}

function toggleProductDetailsAside(event) {
  var open = event.path[1].classList.contains("product-card");
  toggleDisplayedViews(productDetailsPanel, [desktopMenu, mobileMenu, shoppingCartView], open);
}

function toggleDisplayedViews(elementToDisplay, elementsToHide, onlyOpen = false) {
  for (let element of elementsToHide) {
    const isElementDisplayed = !element.classList.contains("inactive");

    if (isElementDisplayed) {
      element.classList.toggle("inactive");
    }
  }

  if (onlyOpen) {
    elementToDisplay.classList.remove("inactive");
    return;
  }

  elementToDisplay.classList.toggle("inactive");
}

queria que los datos del aside fueran dinamicos y mostraran los datos de cada uno, es decir, si un producto tenia el precio de $20 que mostrara al abrir el aside los $20 y asi con cada uno… entonces ME ROMPI LA CABEZA tratando de hacerlo con el for que utilizo el profe para crear los productos y para mi fue mision imposible ya que siempre me arrojaba los datos del ultimo objeto del arreglo… ENTONCES PROBÉ —> “foreach()” este metodo TE FACILITA LA VIDA… ya que recorre cada elemento de cada arreglo extrayendo los datos que desees de cada uno sin ningun problema y con un codigo super resumido y limpio… asi que mis amigos… les recomiedo al 1000% foreach… les comparto un poco mi codigo

const showProductsOnScreen= (lista)=>{ //crea los productos en el menu
    
    lista.forEach(product => { //recorre cada elemento del arreglo
        const productCard= document.createElement('div');
        productCard.classList.add('product-card');

        productCard.addEventListener('click',()=>{ //evento de escucha
            openProductInfo(product); //llamo a la funcion

        })

        const image = document.createElement('img');
        image.src= product.img;
        
        const infoProduct = document.createElement('div');
        infoProduct.classList.add('product-info');
        
        const div = document.createElement('div');
        const infoPrice = document.createElement('p');
        infoPrice.innerHTML = '$'+ product.price;
        
        const infoName = document.createElement('p');
        infoName.innerHTML= product.name;
        const figure = document.createElement('figure');
        const figureImg = document.createElement('img');
        figureImg.src= "./icons/bt_add_to_cart.svg";
        
        
        //AGREGAR HTML
        div.appendChild(infoPrice);
        div.appendChild(infoName);
        figure.appendChild(figureImg);
        infoProduct.appendChild(div);
        infoProduct.appendChild(figure);
        productCard.appendChild(image);
        productCard.appendChild(infoProduct);
        cardsContainer.appendChild(productCard);
        mainContainer.appendChild(cardsContainer);
        
    });

const openProductInfo = (product)=>{ //muestra el aside con la info del producto seleccionado
    const aside = document.querySelector('.product-detail-main');
    const productImg = document.querySelector('.product-detail-main-img');
    const productPrice = document.querySelector('.product-info .product-price');
    const productName= document.querySelector('.product-info .product-name');
        aside.classList.remove('inactive');
        productImg.setAttribute('src',product.img);
        productPrice.textContent= product.price;
        productName.textContent= product.name;


}

De igual forma, considero que se puede cerrar y abrir los elementos de esta forma:

Yo me percate que esta el icono de volver (como para quitar el menu del carrito de compras) y lo que hice fue lo siguiente:
HTML
<img src="./icons/flechita.svg" alt=“arrow” class=“icon1”>
JS
const iconCarritoBack = document.querySelector(".icon1");
iconCarritoBack.addEventListener(“click”, closeCarritoAside);
function closeCarritoAside () {
shoppingCartContainer.classList.add(“inactive”);
}

Buenas amigos, encontré un error debido a que agregué 15 elementos a la lista de productos, en el cual me di cuenta que el aside del detalle de producto tenía una falla entre el botón y el contenido, me salía de esta forma![](

Entonces me puse a revisar un poco mi css y primero intenté agregarle un background y no me funcionó, entonces revisando el propio contenedor en donde los tenía vi que tenía un margin ![](

Entonces pensé, y si en lugar de ponerle margin, le pongo un padding y de esa forma agarro el contenedor completo? y así lo hice, le agregué a mis estilos de ese contenedor estas clases

    padding: 24px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    background: var(--white);

y con eso logré resolverlo
![](

Yo traté de reducir el código y me quedó de la siguiente forma:

import products from '../data.js';

const menuEmail = document.querySelector('.navbar-email');
const desktopMenu = document.querySelector('.desktop-menu');
const burgerMenuIcon = document.querySelector('.menu-hamburger');
const mobileMenu = document.querySelector('.mobile-menu');
const menuCartIcon = document.querySelector('.navbar-shoping-cart');
const asideCartList = document.querySelector('.product-detail-shopping-cart');
const cardContainer = document.querySelector('.cards-container');
const asideProductDetail = document.querySelector('.aside-product-detail');
const closeProductDetail = document.querySelector('.product-detail-close');

function toggleItem(showElement, hideElement1, hideElement2, hideElement3) {
  showElement.classList.toggle('inactive');
  hideElement1?.classList.add('inactive');
  hideElement2?.classList.add('inactive');
  hideElement3?.classList.add('inactive');
}
function openAsideProductDetail(
  openElement,
  hideElement1,
  hideElement2,
  hideElement3
) {
  openElement.classList.remove('inactive');
  hideElement1?.classList.add('inactive');
  hideElement2?.classList.add('inactive');
  hideElement3?.classList.add('inactive');
}
function closeAsideProductDetail(closeElement) {
  closeElement.classList.add('inactive');
}

menuEmail.addEventListener('click', () =>
  toggleItem(desktopMenu, asideCartList, mobileMenu, asideProductDetail)
);
burgerMenuIcon.addEventListener('click', () =>
  toggleItem(mobileMenu, asideCartList, desktopMenu, asideProductDetail)
);
menuCartIcon.addEventListener('click', () =>
  toggleItem(asideCartList, desktopMenu, mobileMenu, asideProductDetail)
);
closeProductDetail.addEventListener('click', () => {
  closeAsideProductDetail(asideProductDetail);
});

// index products

function renderPRoducts(arr) {
  for (let product of arr) {
    const productCard = document.createElement('div');
    productCard.classList.add('product-card');

    const productImg = document.createElement('img');
    productImg.setAttribute('src', product.image);
    productImg.setAttribute('alt', product.name);
    productImg.addEventListener('click', () =>
      openAsideProductDetail(
        asideProductDetail,
        desktopMenu,
        asideCartList,
        mobileMenu
      )
    );

    const productInfo = document.createElement('div');
    productInfo.classList.add('product-info');

    const productInfoDiv = document.createElement('div');
    const productPrice = document.createElement('p');
    productPrice.innerText = `$${product.price}`;
    const productName = document.createElement('p');
    productName.innerText = `${product.name}`;

    productInfoDiv.appendChild(productPrice);
    productInfoDiv.appendChild(productName);

    const productInfoFigure = document.createElement('figure');
    const productImgCart = document.createElement('img');
    productImgCart.setAttribute('src', './assets/icons/bt_add_to_cart.svg');
    productImgCart.setAttribute('alt', 'cart-icon');

    productInfoFigure.appendChild(productImgCart);
    productInfo.append(productInfoDiv, productInfoFigure);
    productCard.append(productImg, productInfo);

    cardContainer.append(productCard);
  }
}
renderPRoducts(products);

hay cosas que se pueden mejorar como cuando se selecciona un producto y que en el aside aparezca la info del producto seleccionado, ya que siempre sale el mismo, eso lo pude lograr usando un metodo del curso de programacion basica, forEach en vez del for, tambien icertando el html del aside completo desde java scrip con un inner.html:

function renderProducts(arr) {
  arr.forEach((product) => {
    const productCard = document.createElement('div');
    productCard.classList.add('product-card');
    
    productCard.addEventListener('click',()=>{
            openProductDetailAside(product);
    })

    // product= {name, price, image} -> product.image
    const productImg = document.createElement('img');
    productImg.setAttribute('src', product.image);       
      
    const productInfo = document.createElement('div');
    productInfo.classList.add('product-info');
  
    const productInfoDiv = document.createElement('div');
  
    const productPrice = document.createElement('p');
    productPrice.innerText = '$' + product.price;
    const productName = document.createElement('p');
    productName.innerText = product.name;
  
    productInfoDiv.appendChild(productPrice);
    productInfoDiv.appendChild(productName);
  
    const productInfoFigure = document.createElement('figure');
    const productImgCart = document.createElement('img');
    productImgCart.setAttribute('src', './icons/bt_add_to_cart.svg');
  
    productInfoFigure.appendChild(productImgCart);
  
    productInfo.appendChild(productInfoDiv);
    productInfo.appendChild(productInfoFigure);
  
    productCard.appendChild(productImg);
    productCard.appendChild(productInfo);
  
    cardsContainer.appendChild(productCard);
  })
}
renderProducts(productList);

function selectedProduct(product) {
  const productoSeleccionado = `
  <div class="product-detail-close">
            <img src="./icons/icon_close.png" alt="close">
          </div>
      <img src=${product.image} alt=${product.name}>
      <div class="product-info">
        <p>$${product.price}</p>
        <p>${product.name}</p>
        <p>With its practical position, this ${product.name} also fulfills a decorative function, add your hall or workspace.</p>
        <button class="primary-button add-to-cart-button">
          <img src="./icons/bt_add_to_cart.svg" alt="add to cart">
          <img>/   Add to cart
        </button> 
      </div>
    `
    productDetailContainer.innerHTML = productoSeleccionado
    const productDetailCloseIcon = document.querySelector('.product-detail-close')
    productDetailCloseIcon.addEventListener('click', closeProductDetailAside);

}

tuve que hacer muchos cambios ya que se alteraban los estilos y salian errores asi que mi solucion esta un poco extensa tal vez haya una manera mas practica de hacerlo pero no supe como mas, asi quedo la funcion de open aside:

function openProductDetailAside(product) {
  console.log(product)
  desktopMenu.classList.add('inactive');
  shoppingCartContainer.classList.add('inactive');
  selectedProduct(product);
  productDetailContainer.classList.remove('inactive');
}

tambien se puede mejorar con esa misma logica el carrito de ordenes para que solo salgan los productos agregados al carrito, agregando un event listener a este boton en el forEach y guardando en un arreglo los seleccionados.

adjunto una imagen donde se ve el resultado y como con el forEach podemos obtener en la consola los valores del objeto clickeado:

Así le hice para que al momento de mostrar el product info, muestre la imagen del producto seleccionado, tambien se podria hacer lo mismo con el precio nombre y descripción

Quería que los productos del aside mostraran los datos de cada producto al cual le daba click, aquí dejo la solución que le di al problema.

Cree la funcion displayInfoInProductDetail , la cual recibe como parámetro un evento(en este caso el evento resultado del click) , la cual llamo en openProductDetailAside

function openProductDetailAside(event){    

    displayInfoInProductDetail(event);

    desktopMenu.classList.add('inactive');
    shoppingCartContainer.classList.add('inactive');
    
    productDetailContainer.classList.remove('inactive');
}

La función displayInfoInProductDetail quedo de la siguiente forma, tratare de explicarlo lo mejor que pueda.

function displayInfoInProductDetail(event){
    
    const new_img_product_detail = event.path[0].src;

    const product_info = event.path[1].childNodes[1];

    const price = product_info.querySelector('div p:first-child');
    const name = product_info.querySelector('div p:nth-child(2)');

    const product_detail_img = productDetailContainer.querySelector('img:nth-child(2)');
    product_detail_img.setAttribute('src', new_img_product_detail);
    product_detail_img.setAttribute('alt', name.textContent);

    const product_detail_price = productDetailContainer.querySelector('.product-info p:nth-child(1)');
    product_detail_price.innerText = price.textContent;

    const product_detail_name = productDetailContainer.querySelector('.product-info p:nth-child(2)');
    product_detail_name.innerText = name.textContent;
    
}

si hacemos un console.log(event), veriamos lo siguiente

si lo desplegamos y hacemos scroll hasta hasta el elemto path, y tambien desplegamos este veremos lo siguente:

si pasamos el mouse sobre cada elemento que se encuentra dentro del path veremos lo que selecciona en pantalla.

entonces como vemos lo que haría la primera linea de la función displayInfoInProductDetail , es obtener el valor del atributo src de la imagen

const new_img_product_detail = event.path[0].src;

Luego si desplegamos el elemento de la posición 1 de path, buscamos el elemento childNodes veremos que el elemto de la posicion 1 en childNotees es el <div> con la clase product-info, una vez selecionado, usando el querySelector accedemos a las dos <p> correspondientes al precio y nombre del producto.

una vez selecionados y almacenos(en varibles) estos elemtos, los asignarimos en los lugares correnpodientes del productDetailContainer

Esta es mi solución:

Yo cuando vi que ahora necesitabamos jugar con las combinaciones para hacer cerrar y abrir los elementos me puse como reto hacerlo sin ver cómo lo hacía Juan. Como igual ya era algo que hemos hecho me pareció sencillo y me quedó funcionando al 1000% ya después me salte hasta que ví que Juan lo había concluido y era el fin de la clase 😄 Muy feliz. Saludos!

Fui resolviendo de esta manera, aparentemente todo funciona y los colapsos se mantienen bien. Cuantas formas de hacer lo mismo pueden pensar?

Que tremendo curso!
Bueno, en mi caso, yo intenté hacerle así a la creación del contenedor principal.

function renderProducts (arr) {

var contador = 0;

for(product of arr){

    stringHTML = `<div class='product-card'>
    <img src="` + product.img + `" id="imagen-`+contador+`" alt="Imagen del producto">
    <div class="product-info">
    <div>
        <p>` + product.price+ `</p>
        <p>` + product.name + `</p>
        </div>
        <figure>
            <img src="./icons/bt_add_to_cart.svg" alt="">
        </figure>
    </div>
    </div>
    `;

    cardsContainer.innerHTML += stringHTML;
    contador++;

}

}

Éntonces, decidí trabajar con el mismo paradigma de realizar un for y asignar a cada imagen un id diferente con un contador numérico…solo por reto…

function renderProductsForImg(arr){
var contador = 0;
for(product of arr){
const imgProduct = document.querySelector(’#imagen-’+contador+’’);
imgProduct.addEventListener(‘click’,openProductDetailAside);

    const detailMenu = document.querySelector('#product-detail');
    function openProductDetailAside() {
        detailMenu.classList.remove('inactive');

        if(!shoppingMenu.classList.contains('inactive')){
            shoppingMenu.classList.add('inactive');
        }

    }

    const closeDetailMenu = document.querySelector('.product-detail-close, .title-container');
    closeDetailMenu.addEventListener('click',closeProductDetailAside);

    function closeProductDetailAside() {
        detailMenu.classList.add('inactive');

        if(!shoppingMenu.classList.contains('inactive')){
            shoppingMenu.classList.add('inactive');
        }

    }

    contador++;

}

}

Y si me pregunta, no sé si sea una buena práctica o no xD pero no me arrepiento xD

Hola.

Comparto mi solución para la creación del aside(detalles del producto).
Recordando que la variable ‘producto’ guarda la lista de productos definida anteriormente.

Cuando el usuario da click a una imagen de un producto invocará una única función que abre, ycrea el aside con los datos, también cierra los menús abiertos.

Buenas, faltó cerrar el menú desktop al abrir el product detail y vice versa, aqui esta mi solución.

function toggleDesktopMenu() {
    const isCarritoComprasClosed = carritoDeCompras.classList.contains('inactive');

    if (!isCarritoComprasClosed) {

            carritoDeCompras.classList.add("inactive");
       
    }
    //mando cerrar el produtc detail siempre antes de abrir el menu desktop
 productDetailContainer.classList.add('inactive');
 
desktopMenu.classList.toggle('inactive');
}

y vice versa 

function openProductDetailContainer() {
    desktopMenu.classList.toggle('inactive');
    carritoDeCompras.classList.toggle("inactive")
    productDetailContainer.classList.remove('inactive');

    
}

Debo mejorar mi orden del código, tengo un desmaaaye. Y debo manejar mejor el nombre de las variables, creo que desde la maquetacion y estilos podemos mejorar por mucho eso.

Me encantaaaaaaaa

Lo hice sin usar condicionales, funciona todo correctamente 😄

opcEmail?.addEventListener("click", showHideMenuDesktop);
iconMenu?.addEventListener("click", showHideMenuMobile);
iconShopping?.addEventListener("click", showHideShoppingCar);
btnClose?.addEventListener('click', hideDetailProduct)

function showHideMenuDesktop() {
  desktopMenu?.classList.toggle("inactive");
  productShopping?.classList.add("inactive");
  showDetail?.classList.add("inactive");
}
function showHideMenuMobile() {
  mobileMenu?.classList.toggle("inactive");
  productShopping?.classList.add("inactive");
  showDetail?.classList.add("inactive");
}
function showHideShoppingCar() {
  productShopping?.classList.toggle("inactive");
  mobileMenu?.classList.add("inactive");
  desktopMenu?.classList.add("inactive");
  showDetail?.classList.add("inactive");
}
function showDetailProduct(){
  showDetail?.classList.remove('inactive');
  productShopping?.classList.add("inactive");
  mobileMenu?.classList.add("inactive");
  desktopMenu?.classList.add("inactive");
}

function hideDetailProduct(){
  showDetail?.classList.add("inactive");
}

Asi quedo mi solución

function toggleDesktopMenu()
{
    mobileMenu.classList.add('inactive');
    aside.classList.add('inactive');
    productDetailContainer.classList.add('inactive');
    desktopMenu.classList.toggle('inactive');
}

function toggleMobileMenu()
{
    desktopMenu.classList.add('inactive');
    aside.classList.add('inactive');
    productDetailContainer.classList.add('inactive');
    mobileMenu.classList.toggle('inactive');
}

function toggleCartAside()
{
    desktopMenu.classList.add('inactive');
    mobileMenu.classList.add('inactive');
    productDetailContainer.classList.add('inactive');
    aside.classList.toggle('inactive');
}

function openProductDetail()
{
    desktopMenu.classList.add('inactive');
    mobileMenu.classList.add('inactive');
    aside.classList.add('inactive');
    productDetailContainer.classList.remove('inactive');
}

function closeProductDetail()
{
    productDetailContainer.classList.add('inactive');
} 

Esta es la forma que lo hice yo, funciona todo

navmenu.addEventListener("click", toggleMenuDesktop);
burguerMenu.addEventListener("click", toggleMenuMobile);
menuCarritoIcon.addEventListener("click", toggleCarrito);
closeMenuInfo.addEventListener("click", removeMenuInfo);
function toggleMenuDesktop() {
  aside.classList.add("inactive");
  productDetailsContainer.classList.add("inactive");
  desktopMenu.classList.toggle("inactive");

}

function toggleMenuMobile() {
  aside.classList.add("inactive");
  productDetailsContainer.classList.add("inactive");
  menuMobile.classList.toggle("inactive");

}

function toggleCarrito() {
  menuMobile.classList.add("inactive");
  desktopMenu.classList.add("inactive");
  productDetailsContainer.classList.add("inactive");
  aside.classList.toggle("inactive");
}
function openProductDetails(){
    productDetailsContainer.classList.remove("inactive");
    menuMobile.classList.add("inactive");
    desktopMenu.classList.add("inactive");
    aside.classList.add("inactive");

}

function removeMenuInfo(){
    productDetailsContainer.classList.add("inactive");
}

Acá mi planteamiento. Gracias a un compañero que en clases anteriores me hizo ver la luz 🙏🏼❤️

yo lo resolvi sin condicionales solo agregando a cada funcion classList.add(‘inactive’); de cada componente

const menuEmail = document.querySelector('.navbar-email');
const desktopMenu = document.querySelector('.desktop-menu');
const mobileMenu = document.querySelector('.mobile-menu');
const menuHamIcon = document.querySelector('.menu');
const menuCarIcon = document.querySelector('.navbar-shopping-cart');
const productDetailCloseIcon = document.querySelector('.product-detail-close');
const shoppingCartContainer = document.querySelector('#shoppingCartContainer');
const cardsContainer = document.querySelector('.cards-container');
const productDetailContainer = document.querySelector('#productDetail');


menuEmail.addEventListener('click', toggleDesktopMenu);
menuHamIcon.addEventListener('click', toggleMobilepMenu);
menuCarIcon.addEventListener('click', toggleCarritoAside);
productDetailCloseIcon.addEventListener('click', closeProductDetailAside )

function toggleDesktopMenu(){
    productDetailContainer.classList.add('inactive');
    shoppingCartContainer.classList.add('inactive');
    mobileMenu.classList.add('inactive');
    desktopMenu.classList.toggle('inactive');//classList.toggle, quita o pone una clase dependiendo si la tiene o no
}

function toggleMobilepMenu(){
    productDetailContainer.classList.add('inactive');
    desktopMenu.classList.add('inactive'); 
    shoppingCartContainer.classList.add('inactive');
    mobileMenu.classList.toggle('inactive');

}

function toggleCarritoAside(){
    productDetailContainer.classList.add('inactive');
    mobileMenu.classList.add('inactive');
    desktopMenu.classList.add('inactive');
    shoppingCartContainer.classList.toggle('inactive');
    
}
function openProductDetailAside(){
    productDetailContainer.classList.remove('inactive');
    mobileMenu.classList.add('inactive');
    desktopMenu.classList.add('inactive');
    shoppingCartContainer.classList.add('inactive');
}
function closeProductDetailAside(){
    productDetailContainer.classList.add('inactive');

}

En mi caso me faltaba “arreglar” el menu para acceder a la cuenta desde desktop menuEmail

Una manera de manejar los commits es usando VS CODE
Cuando abres VS desde el comando

code ./ -r

Nos va mostrar la siguiente opción

La cual va detectar cada vez que haga un cambio en algun archivo.
Una vez dentro solo tendras que escribir el mensaje del commit.

Pense que con un ciclo seria mas escalable a futuro asi que para las funciones use SWITCH y DO WHILE en la funcion openProductDetail

function toggleMenuDesktop () {
  switch (menuDesktop.classList.toggle('inactive')) {
    //agregar inactive
    case menuMobile.classList.add('inactive'):
          break;
          case productDetail.classList.add('inactive'):
            break;
            case shoppingCartContainer.classList.add('inactive'):
            break;
}
  
}

function toggleMenuMobile () {
  switch (menuMobile.classList.toggle('inactive')) {
    //agregar inactive
    case menuDesktop.classList.add('inactive'):
          break;
          case productDetail.classList.add('inactive'):
            break;
            case shoppingCartContainer.classList.add('inactive'):
            break;
}
    
    }

    function openShopppingCart () {
      switch (shoppingCartContainer.classList.toggle('inactive')) {
        //agregar inactive
        case menuMobile.classList.add('inactive'):
        break;
        case menuDesktop.classList.add('inactive'):
          break;
          case productDetail.classList.add('inactive'):
            break;
      }
      
     }
      
    
        function openProductDetailAside () {
          //agregar inactive
          do {menuMobile.classList.add('inactive');
              menuDesktop.classList.add('inactive');
            }
       while (productDetail.classList.remove('inactive'))
             
        }

        function closeProductDetailAside () {
          productDetail.classList.add('inactive');
        
          }