Open github-learning-lab[bot] opened 3 years ago
:white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Getting the file
:white_check_mark: Code compilation
:white_check_mark: Make the correct color changes
:white_check_mark: Change the heading 1 size to 2.5rem
Ajustando layout de página de búsqueda
:sparkles: Branch: search2
Introducción
En el último step conocimos la página de búsqueda y sus componentes principales. También aprendimos que el layout de search funciona como cualquier otro bloque, por lo que tiene toda la flexibilidad a su alcance. En este step crearemos algunas líneas y columnas para mejorar el aspecto de la búsqueda creada.
Actividad
En el archivo
search.jsonc
, eliminetotal-products.v2
yorder-by.v2
delsearch-result-layout.desktop
.Reemplace los dos anteriores con una línea top que incluya los bloques eliminados:
Elimine el
search-content
y elfilter-navigator.v3
delsearch-result-layout.desktop
y cree una línea de resultado.En la línea de resultado, coloque otras dos columnas:
Configure la prop
width
de la columnafilter
en20%
.En la columna de la izquierda incluya el
filter-navigator.v3
nuevamente y, en la de la derecha, incluya elsearch-content
.Para finalizar, usaremos el mismo Resumen de Produto (
product-summary
) que usamos en el shelf para mostrar los resultados de búsqueda.Defina su
search-content
con los bloquesgallery
ynot-found
:Use el
product-summary.shelf
en las props de Gallery:En el bloque
product-summary.shelf
que se encuentra en el archivodefault.jsonc
, incluyaproduct-summary-sku-selector
arriba deproduct-summary-buy-button
.:information_source: Recuerde acceder a la documentación del Flex Layout si tiene alguna duda durante la actividad.
:no_entry_sign: ¿Perdido?
¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? :pray:
Crear feedback
Si aún tiene alguna duda sobre cómo enviar su respuesta, puede revisar aquí.