📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Disclosure Layout

The Disclosure Layout is an app responsible for creating a layout structure based on disclosure indicators.

Check example

Configuration

Step 1 - Adding the Disclosure Layout app to your theme's dependencies

In your theme's manifest.json file, add the Disclosure Layout app as a dependency:

  "dependencies": {
+   "vtex.disclosure-layout": "1.x"
  }

Now, you are able to use all the blocks exported by the disclosure-layout app. Check out the full list below:

Step 2 - Adding the Disclosure Layout' blocks to your theme's templates

According to your desire, copy one of the examples stated below and paste it in your theme's desired template, making the necessary changes. Remember to add the disclosure-layoutblock to the template's block list if needed.

• Simple example:

{
  "disclosure-layout#simple": {
    "children": ["disclosure-trigger#simple", "disclosure-content#simple"]
  },
  "disclosure-trigger#simple": {
    "children": ["rich-text#question"]
  },
  "disclosure-content#simple": {
    "children": ["rich-text#answer"]
  },
  "rich-text#question": {
    "props": {
      "text": "How can I change my shipping address?"
    }
  },
  "rich-text#answer": {
    "props": {
      "text": "Call us at the number (212) 1234-1234"
    }
  }
}

• Example using the disclosure-layout-group block:

{
  "disclosure-layout-group#group": {
    "children": ["disclosure-layout#first", "disclosure-layout#second"]
  },

  "disclosure-layout#first": {
    "children": ["disclosure-trigger#first", "disclosure-content#first"]
  },
  "disclosure-trigger#first": {
    "children": ["rich-text#question1"]
  },
  "disclosure-content#first": {
    "children": ["rich-text#answer1"]
  },
  "rich-text#question1": {
    "props": {
      "text": "How can I change my shipping address?"
    }
  },
  "rich-text#answer1": {
    "props": {
      "text": "Call us at the number (212) 1234-1234."
    }
  },

  "disclosure-layout#second": {
    "children": ["disclosure-trigger#first", "disclosure-content#first"]
  },
  "disclosure-trigger#second": {
    "children": ["rich-text#question1"]
  },
  "disclosure-content#second": {
    "children": ["rich-text#answer1"]
  },
  "rich-text#question2": {
    "props": {
      "text": "How can I track my order?"
    }
  },
  "rich-text#answer2": {
    "props": {
      "text": "After logging into your account, you can find this info at the link Orders."
    }
  }
}

• Example using the disclosure-state-indicator block:

{
  "disclosure-state-indicator": {
    "props": {
      "Show": "icon-angle--down",
      "Hide": "icon-angle--up"
    }
  }
}

disclosure-layout props

disclosure-trigger props

disclosure-content props

disclosure-state-indicator props

disclosure-layout-group props

disclosure-trigger-group props

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.

Contributors ✨

Thanks goes to these wonderful people:

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