Stack Layout

Stack Layout

Introduction

Stack Layout is yet another possible type of building complex layouts by leveraging native blocks, with which you can easily stack blocks. For this step, we are going to create a call-to-action (CTA) on the main page with a banner and a redirect button.

Activity

Thinking better about the problem we want to solve, we managed to divide it into two parts:

  • A background image (image block):

imageimage

  • A CTA button:

imageimage

So let's build info card using both elements:

  1. Declare the stack-layout on your page:
{
  "store.home": {
    "blocks": [
+     "stack-layout#cta"
    ]
  }
}
  1. Add an image and link to the stack-layout:
{
  "store.home": {
    "blocks": [
     "stack-layout#cta"
    ]
  },
+ "stack-layout#cta": {
+   "children": [
+     "image#cta",
+     "link#cta"
+   ]
+ }
}
  1. Declare the image and link that we will use:
{
  ...
+ "image#cta": {
+   "props": {
+     "blockClass": "cover",
+     "width": "100%",
+     "height": 400,
+     "src": "https://appliancetheme.vtexassets.com/assets/app/src/appliancecat___1b7592b49667c6a89203a0997e06bc87.jpg"
+   }
+ },
+ "link#cta": {
+   "props": {
+     "displayMode": "button",
+     "buttonProps": {
+       "variant": "primary",
+       "size": "large"
+     },
+     "href": "/washer",
+     "label": "Check these awesome discounts"
+   }
+ }
}
  1. The result should then be:

infocardinfocard

OPTIONAL: If you want to improve the look of the info card created a little, follow the steps below:

  1. Create a vtex.stack-layout.css file in the /styles/css folder and add the following styles:
.stackItem {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
  1. In the vtex.store-components.css file in the /styles/css folder add:
.imageElement--cover {
  object-fit: cover;
}

The result should then be:

imageimage

Grades

  • Don't worry if you don't really understand how the styling done in the optional steps worked, we have an exclusive styling course that will be seen later on.

  • If you clicked the button and you are not seeing a search result page, make sure you have a defined search layout (we saw this in the basic blocks' course) following the Search Result documentation.

    Any questions?

    See the answersheet for this step or join us on our office hours


Help us make this content better!

VTEX IO courses are open source. If you see something wrong, you can open a pull request!

Make a contribution

or open an issue