Stack Layout

This content was migrated from the VTEX Learning Center and is no longer being actively maintained. For the most accurate and up-to-date information, please check the official documentation.

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):

${"base64":" ","img":{"width":1707,"height":421,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":716930,"url":"https://appliancetheme.vtexassets.com/assets/app/src/appliancecat___1b7592b49667c6a89203a0997e06bc87.jpg"}}$

A CTA button:

{"base64":" ","img":{"width":434,"height":70,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":5216,"url":"https://user-images.githubusercontent.com/18701182/90291114-8a2cce00-de55-11ea-982c-3fef741535fb.png"}}

So let's build info card using both elements:

Declare the stack-layout on your page:


_10{
_10  "store.home": {
_10    "blocks": [
_10+     "stack-layout#cta"
_10    ]
_10  }
_10}

Add an image and link to the stack-layout:


_13{
_13  "store.home": {
_13    "blocks": [
_13     "stack-layout#cta"
_13    ]
_13  },
_13+ "stack-layout#cta": {
_13+   "children": [
_13+     "image#cta",
_13+     "link#cta"
_13+   ]
_13+ }
_13}

Declare the image and link that we will use:


_22{
_22  ...
_22+ "image#cta": {
_22+   "props": {
_22+     "blockClass": "cover",
_22+     "width": "100%",
_22+     "height": 400,
_22+     "src": "https://appliancetheme.vtexassets.com/assets/app/src/appliancecat___1b7592b49667c6a89203a0997e06bc87.jpg"
_22+   }
_22+ },
_22+ "link#cta": {
_22+   "props": {
_22+     "displayMode": "button",
_22+     "buttonProps": {
_22+       "variant": "primary",
_22+       "size": "large"
_22+     },
_22+     "href": "/washer",
_22+     "label": "Check these awesome discounts"
_22+   }
_22+ }
_22}

The result should then be:

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

Create a vtex.stack-layout.css file in the /styles/css folder and add the following styles:


_10.stackItem {
_10  width: 100%;
_10  height: 100%;
_10  display: flex;
_10  align-items: center;
_10  justify-content: center;
_10}

In the vtex.store-components.css file in the /styles/css folder add:


_10.imageElement--cover {
_10  object-fit: cover;
_10}

The result should then be:

{"base64":" ","img":{"width":1528,"height":750,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":973354,"url":"https://user-images.githubusercontent.com/18701182/90292857-22788200-de59-11ea-9a9c-8668b01ffb1c.png"}}

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.

Answer sheet

See answer sheet for home.jsonc

home.jsonc


_27{
_27  "store.home": {
_27    "blocks": ["stack-layout#cta"]
_27  },
_27  "stack-layout#cta": {
_27    "children": ["image#cta", "link#cta"]
_27  },
_27  "image#cta": {
_27    "props": {
_27      "blockClass": "cover",
_27      "width": "100%",
_27      "height": 400,
_27      "src": "https://appliancetheme.vtexassets.com/assets/app/src/appliancecat___1b7592b49667c6a89203a0997e06bc87.jpg"
_27    }
_27  },
_27  "link#cta": {
_27    "props": {
_27      "displayMode": "button",
_27      "buttonProps": {
_27        "variant": "primary",
_27        "size": "large"
_27      },
_27      "href": "/washer",
_27      "label": "Check these awesome discounts"
_27    }
_27  }
_27}

See answer sheet for vtex.stack-layout.css

vtex.stack-layout.css


_10.stackItem {
_10  width: 100%;
_10  height: 100%;
_10  display: flex;
_10  align-items: center;
_10  justify-content: center;
_10}

See answer sheet for vtex.store-components.css

vtex.store-components.css


_10.imageElement--cover {
_10  object-fit: cover;
_10}