📢 Don't fork this project. Use, contribute, or open issues through Store Discussion.

Modal Layout

This repository provides blocks that can help you create modals in a store.

This Quickview text is a button that you can click and open the modal-layout

Configuration

Import the modal layout's app to your theme's dependencies in the manifest.json, for example:

{
  "dependencies": {
    "vtex.modal-layout": "0.x"
  }
}

Now you can use the two blocks exported by vtex.modal-layout. Notice that you need to configure your own modal-layout and pass it as a child of modal-trigger.

{
  "product-summary.shelf": {
    "children": [
      "stack-layout#prodsum",
      "product-summary-name",
      "product-rating-inline",
      "product-summary-space",
      "product-summary-price",
      "add-to-cart-button"
    ]
  },
  "modal-trigger#quickview": {
    "children": [
      "modal-layout#quickview",
      "rich-text#quickview"
    ],
    "props": {
      "blockClass": "quickview"
    }
  },
  "rich-text#quickview": {
    "props": {
      "text": "Quickview",
      "blockClass": "quickview"
    }
  },
  "modal-layout#quickview": {
    "props": {
      "blockClass": "quickview",
      "fullScreen": {
        "phone": true,
        "desktop": false,
        "tablet": false
      }
    },
    "children": [
      "flex-layout.row#quickview-main-row"
    ]
  },
  "flex-layout.row#quickview-main-row": {
    "children": [
      "flex-layout.col#quickview-product-images",
      "flex-layout.col#quickview-product-information"
    ],
    "props": {
      "colGap": 4
    }
  },
  "flex-layout.col#quickview-product-images": {
    "children": [
      "product-images"
    ],
    "props": {
      "rowGap": 0,
      "width": "calc(50% - 0.375rem)"
    }
  },
  "flex-layout.col#quickview-product-information": {
    "children": [
      "vtex.store-components:product-name",
      "product-rating-summary",
      "product-price#quickview-price",
      "product-separator",
      "product-identifier.product",
      "product-summary-sku-selector#quickview",
      "link.product#quickview"
    ],
    "props": {
      "preventVerticalStretch": true,
      "rowGap": 0,
      "width": "calc(50% - 0.375rem)"
    }
  },
  "product-price#quickview-price": {
    "props": {
      "showInstallments": true,
      "showSavings": true
    }
  },
  "link.product#quickview": {
    "props": {
      "href": "/{slug}/p",
      "label": "More details >",
      "blockClass": "quickview"
    }
  },
  "product-summary-sku-selector#quickview": {
    "props": {
      "blockClass": "quickview"
    }
  },
  "stack-layout#prodsum": {
    "children": [
      "product-summary-image",
      "product-bookmark",
      "product-summary-specification-badges",
      "modal-trigger#quickview"
    ],
    "props": {
      "blockClass": "shelf-summary"
    }
  },
}

Modal

Prop name	Type	Description	Default value
`scroll`	`ScrollMode`	Where the component should scroll if the content is bigger than the screen (see `ScrollMode` options bellow)	`'content'`
`backdrop`	`ResponsiveValue	BackdropMode`	How the backdrop should be rendered
`fullScreen`	`ResponsiveValue	boolean`	If the modal should be in full screen
`disableEscapeKeyDown`	`boolean`	If if should disable closing the modal when you press `Esc`	`false`

You can learn more about ResponsiveValue in the documentation of responsive-values.

ModalTrigger

Prop name	Type	Description	Default value
`trigger`	`TriggerMode`	Which kind of event should trigger the modal	`'click'`

TriggerMode

Value	Description
`'click'`	Will open the modal when the user clicks the `ModalTrigger`
`'load'`	Will open the modal when the window is loaded

ScrollMode

Value	Description
`'body'`	The size of the modal will be bigger than the screen if the content is bigger and it will scroll the body
`'content'`	The max height of the modal will be the size of the screen and the scroll will be inside the content

BackdropMode

Value	Description
`'display'`	It will render the `Backdrop`, but if you click it won't do anything
`'clickable'`	It will render the `Backdrop` and if you click it it will close the modal.
`'none'`	It won't render the `Backdrop`.

ModalHeader

Prop name	Type	Description	Default value
`showCloseButton`	`ResponsiveValue	boolean`	If it should show the close button
`iconCloseSize`	`number`	The size of the close icon in px	`32`

ModalContent

The modal-content block doesn't receive any prop

Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
`backdropContainer`
`backdrop`
`closeButtonContainer`
`closeButton`
`container`
`contentContainer`
`headerContainer`
`headerContent`
`triggerContainer`

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

guerreirobeatriz/modal-layout