Fusión de los componentes de la vista principal #2221
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…l código de los diferentes componentes
…s interactividad con JavaScript para que cada menú aparezca o desaparezca cuando le demos click al email o al menú amburguesa de la navbar. Modifiqué el media query que oculta el contenido para desktop y aparece el contenido para mobile de la navbar a un max-width: 780px porque en 640px quedaba contenido por fuera.
…on JavaScript que aparezca o desaparezca cuando le den click al icono del carrito de compras que está en la navbar. Tambien programé que cuando le den click a dicho icono, se le aplique la clase inactive (en caso de que la tenga) al menú mobile, para que no salgan ambos juntos. También le apliqué lo mismo aside del carrito de compras.
…información hardcodeada de las cards de los productos que estaba en el html y creé la estructura de card del producto con un template string desde JavaScript para insertar cada producto de forma dinámica en el html. Ovbiamente, La información ahora está hardcodeada en JavaScript pero eso se soluciona cuando conectemos el frontend con el backend mediante una API para traer información y construir los productos en base a ella. Utilicé el ciclo 'for (elemento of array)' para recorrer la lista de productos.
…n producto salga el aside que tiene los detalles del producto correspondiente, esto lo hice recorriendo la lista de pruductos para encontrar el que tuviera el mismo id que el input checkeado y creando un template string del product detail en base al producto correspondiente. Para ello, tuve que modificar la estructura html interna del aside, cambiando el <div> que representa la card por un <label> seguido de un <input> de tipo radio relacionado con el <label>. Razones por las cuales coloqué el input después del label y no dentro, y por qué le escuché el evento click al input y no al label: - Porque los <input> deberían ir a la misma altura de los label. - Como al principio era el label el que tenía el evento click, si colocaba el input adentro iba a generar problemas de propagación de eventos, ya que cuando seleccionamos un input dándole click a él directamente o dándole click a su label asociado esto dispara su evento de click, por ende, la función de mostrar el aside se ejecutaría dos veces, cuando cliqueara el label y cuando se checkeara automaticamente el input. - Le agregué el escuchador de eventos al input en vez del label porque la función del evento click del label se ejecutaba antes de que el input se marcara como checkeado, por lo que cuando intentaba verificar qué input estaba checkeado no me aparecía ninguno. De esta manera, cuando le demos click al label ya no ejecutaremos ninguna función directamente sino que esperaremos que el input asociado a ese label se marque automaticamente como checkeado, lo cual dispara su evento click y ahí sí se ejecuta nuestra función de mostrar aside del product detail. Otros inconvenientes que tuve pero pude solucionar: - En la función renderProducts(), el ciclo 'for (product of arr)' que recorre la lista de productos para crear las cards dinamicamente me generó un problemita jodón en primera instancia, debido a que no especifiqué el tipo de variable que sería product, JavaScript la estaba creando como variable global (con var), lo cual generó conflictos con otra variable que tiene el mismo nombre en otra función. Esto lo solucioné declarando product con let para que solo existiera en esa función, así: for (let product of arr).
… que se haga, pero creo que puedo optimizar esta parte con una función para reducir la redundancia. Tambien debo arreglar el scroll horizontal que se generó por darle un width de 100% al mobile-menu, debido a que está posicionado de forma absoluta y no tiene ningún ancestro posicionado, ocupó todo el ancho del viewport superando la barra lateral de scroll.
…width del 100% ocupaba todo el ancho de la pantalla del navegador sin tener en cuenta la barra de escroll de la parte derecha, sino que su tamaño aumentaba con el padding debido a que no tenía un box-sizing: border-box.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Creé el archivo index.html para unificar la estructura de todos los componentes de la vista principal y creé el archivo styles.css para unificar sus estilos. También creé el archivo script.js y lo enlace con el index.html para agregarle interactividad a la vista principal, de tal manera que cada componente aparezca o desaparezca dependiendo de lo que haga el usuario.
Los componentes fusionados fueron: