Closed github-learning-lab[bot] closed 3 years ago
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Getting the file
:white_check_mark: Declare a store.custom#about-us
template in your about-us.jsonc file
:white_check_mark: Add a flex-layout.row#about-us
to your template
:white_check_mark: Use the sample code provided in the instructions for this step to complete the layout
:white_check_mark: Create a routes.jsonc file and declare a /about-us
path and check your workspace at {workspace}--appliancetheme.myvtex.com/about-us to see the new page :)
Creando templates personalizados
:sparkles: Branch: custom-template
Introducción
Las tiendas están compuestas de varias páginas diferentes, cada una con layout y contenido específicos. Al crear una tienda desde cero en VTEX IO, algunas páginas estándar con URLs predefinidas ya están disponibles para usted. A continuación, se muestra una lista de algunas de estas páginas estándar:
store.home
(Home page).store.product
(Product page).store.search
(Search Results page).store.account
(Client Account page).store.login
(Login page).store.orderplaced
(Order Placed page).Pero es posible que desee crear un landing page personalizado. En este caso, debe crear una nueva URL y contenido específico para mostrar a los usuarios que acceden a esta ruta.
Creando un Landing Page
Se necesitan pocos pasos para crear un landing page personalizado:
Template
Un template define el layout de la página. Por lo tanto, si desea crear una página personalizada, también debe crear un nuevo template en su tema.
Supongamos que desea crear una página sencilla con información sobre su tienda. Dentro de la carpeta
blocks
, usted puede crear un archivo que contenga el siguiente código, declarando un nuevo template para una página personalizada.Donde
{templateName}
debe reemplazarse con el nombre identificador del template.A continuación, debe completar el código con los componentes necesarios para armar el layout. Abajo, vemos un ejemplo de esta implementación:
Path
Ahora que se ha definido en el código del tema de la tienda un nuevo template con el layout de la página, el siguiente paso es definir la ruta (path) de la página que accederá a este layout.
Debemos crear un archivo
routes.json
dentro de la carpetastore
de su tema. Después de esto, ingrese el código a continuación:Donde
{URL}
es el nombre del camino deseado.Actividad
Crearemos una página con información sobre su tienda como el ejemplo de abajo:
blocks
, cree un archivoabout-us.jsonc
.store.custom#about-us
en este archivo.flex-layout.row
, utilice el código del ejemplo dado anteriormente para completar el layout de la página.store
, cree un archivoroutes.json
./about-us
.{workspace}--appliancetheme.myvtex.com/about-us
para ver su nuevo landing page.: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í.