Closed github-learning-lab[bot] closed 4 years ago
:white_check_mark::x::x::x:
:white_check_mark: Code compilation
:x: Home block doesn't have info-card#button-right or info-card#button-left
:x: Your blocks.jsonc
file is missing either info-card#button-right or info-card#button-left
:x: You didn't use the info-card properties we're expecting
:white_check_mark::white_check_mark::white_check_mark::x:
:white_check_mark: Code compilation :white_check_mark: Define two info cards in the home block :white_check_mark: Declare info-card#button-right and info-card#button-left :x: You didn't use the info-card properties we're expecting
:white_check_mark::white_check_mark::white_check_mark::x:
:white_check_mark: Code compilation :white_check_mark: Define two info cards in the home block :white_check_mark: Declare info-card#button-right and info-card#button-left :x: You didn't use the info-card properties we're expecting
:white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Code compilation :white_check_mark: Define two info cards in the home block :white_check_mark: Declare info-card#button-right and info-card#button-left :white_check_mark: Define the correct info card properties
Info Card: el call to action de Store Framework
:sparkles: Branch: infocard
Introducción
Una tienda necesita un buen home page para mantener la atención del usuario, aumentando el tiempo de sesión y, por lo tanto, aumentando las posibilidades de conversión. Para que esto sea posible, se pueden usar varios elementos, como: banners promocionales, estantes de destaque, contenidos institucionales.
Crearemos el siguiente bloque en el home page usando un Call to Action. En el Store Framework, tenemos un bloque que sirve para este propósito llamado Info Card.
Info Card
Con el Info Card, es posible crear imágenes con enlaces y botones (en la parte superior o lateral del bloque) que dirigen el flujo del usuario (Call to Action).
Revisando la documentación es posible ver que:
isFullModeStyle
define si el Call to Action (CTA) debe estar arriba del banner.textPosition
definirá la posición del texto.textAlignment
definirá el alineamiento del texto.imageUrl
definirá cuál imagen será usada como banner.headline
determinará cuál es el texto que será usado de título.callToActionMode
permitirá elegir el CTA como un enlace o un botón.callToActionText
definirá el texto del CTA.callToActionUrl
determinará el enlace al que será dirigido.Así, quedamos con las siguientes props:
Instanciando bloques
Puede ser que usted se haya preguntado:
Esto es posible a través de la instanciación de bloques.
Todos los bloques tienen nombres preestablecidos, pero puede crear instancias de estos y definir apariencias diferentes para el mismo tipo de bloque. Para hacer esto, simplemente coloque un
#
con un nombre arbitrario y que tenga sentido después de definir cada bloque, por ejemplo:Actividad
A partir del código anterior, en el archivo
home.jsonc
, cree elinfo-card#button-left
justo debajo del infocardinfo-card#button-right
. Este nuevo infocard debe contener:Shining chrome
.Go to Collection
en el lugar del botón.https://appliancetheme.vteximg.com.br/arquivos/cozinha-cinza-min.png
.Give your kitchen a cool style adding warm metallic finishes.<br>Available until January 2020.
textPosition
).El resultado esperado es semejante al que se presenta en la siguiente imagen:
:information_source: Recuerde acceder a la documentación del Info Card 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í.