Skip to main content
All CollectionseWizard.js frameworke-Detailers
eWizard.js: e-Detailer slide and chapter structure
eWizard.js: e-Detailer slide and chapter structure

Define the struсture of your e-Detailer slides, subslides, chapters, and archived slides

eWizard Team avatar
Written by eWizard Team
Updated over a year ago

Use the struсture.json file to define the e-Detailer structure. This file includes the following objects:

struсture.json version 2

Version 2 of the ./struсture.json file was introduced in eWizard.js 5.22.0. The differences between versions 2 and 1 are the following:

Update the structure version with the wiz update --struсture command.

Example of the ./struсture.json file of versions 1 and 2:

struсture.json version 1 example

// ./structure.json

{
    "slides": {
        "default": {
            "name": "Template Slide",
            "template": "slides/default/index.vue"
        }
    },
    "chapters": {
        "main": {
            "name": "Template Chapter",
            "content": [
                "default"
            ]
        }
    },
    "storyboard": [
        "main"
    ],
    "start": {

    }
}

struсture.json version 2 example

// ./structure.json

{
  "structureFileVersion": 2,
  "slides": {
    "frontPage": {
      "name": "Brand Page",
      "template": "slides/frontPage/index.vue"
    }
  },
  "chapters": {
    "home": {
      "name": "Home",
      "content": [
        {
          "slide": "frontPage",
          "subslides": [
            {
            "slide": "slider1"
            }
           ]  
        }
      ]
    }
    }
  },
  "storyboard": [
    {
      "chapter": "home"
    }
  ],
  "archivedSlides": [
  ]
}

Slides

A slide is a single page of the e-Detailer that structurally separates its content. You can add slides with the wiz slide [slideId] command or manually edit the struсture.json file. For more information about CLI options for managing slides and chapters, see wiz slide [options].

The slides object contains a list of all e-Detailer slides. Each key in the slides object is a unique slide ID.

The slide ID must be unique. Use A–Z, a–z, _, and 0–9 characters in the slide ID naming.

The struсture of the slides object depends on the struсture.json version.

struсture.json version 1 for slides

Each slide in the struсture.json version 1 has the following fields:

  • name is the slide readable name.

  • template is a reference to the Vue component associated with the slide.

  • subslides is an optional field that defines the list of subslides for the slide. For more information, see Subslides.

For example:

// ./structure.json

"slides": {
    "vanillaCookie": {
        "name": "Vanilla Cookies",
        "template": "slides/vanillaCookie/index.vue",
        "subslides": [
            "cookiePhoto",
            "cookieRecipe"
        ]
    },
    "cookiePhoto": {
        "name": "cookieRecipe",
        "template": "slides/cookiePhoto/index.vue"
    },
    "cookieRecipe": {
        "name": "cookieRecipe",
        "template": "slides/cookieRecipe/index.vue"
    },
    "chocolateCookie": {
        "name": "Chocolate Cookies",
        "template": "slides/chocolateCookie/index.vue"
    },
    "biscuit": {
        "name": "Chocolate Cookies",
        "template": "slides/biscuit/index.vue"
    }
}

The vanillaCookie, chocolateCookie, and biscuit keys specify the slide IDs. Each object has the name property displayed as the slide name in eWizard Editor. The template value specifies the path to the Vue component that represents the e-Detailer page.

struсture.json version 2 for slides

Each slide in the struсture.json version 2 has the following fields:

  • name is the slide readable name.

  • template is a reference to the Vue component associated with the slide.

 // ./structure.json
 
"slides": {
    "vanillaCookie": {
        "name": "Vanilla Cookies",
        "template": "slides/vanillaCookie/index.vue",
    },
    "cookiePhoto": {
        "name": "cookieRecipe",
        "template": "slides/cookiePhoto/index.vue"
    },
    "cookieRecipe": {
        "name": "cookieRecipe",
        "template": "slides/cookieRecipe/index.vue"
    },
    "chocolateCookie": {
        "name": "Chocolate Cookies",
        "template": "slides/chocolateCookie/index.vue"
    },
    "biscuit": {
        "name": "Chocolate Cookies",
        "template": "slides/biscuit/index.vue"
    }
}

The vanillaCookie, chocolateCookie, and biscuit keys specify the slide IDs. Each object has the name property displayed as the slide name in eWizard Editor. The template value specifies the path to the Vue component that represents the e-Detailer page.

Subslides

Subslides are supplemental slides used with the main slide to reveal the details of the information stated on the main slide. The key point of subslides is that you can configure the horizontal or vertical swipe direction for navigation between the subslides within the main slide. For example, you can configure horizontal navigation between the slides and vertical navigation between the subslides.

The subslide ID must be unique. Use A–Z, a–z, _, and 0–9 characters in the subslide ID naming. The subslide ID mustn't duplicate the ID of any slide in your e-Detailer. For example, if you have my_slide as the slide ID, you can't have the subslide with the same ID.

struсture.json version 1 for subslides

In struсture.json version 1, you can add subslides in the subslides field of a specific slide in the slides object. For example, the cookiePhoto and cookieRecipe subslides of the vanillaCookie slide:

// ./structure.json

{
  "slides": {
    "vanillaCookie": {
        "name": "Vanilla Cookies",
        "template": "slides/vanillaCookie/index.vue",
        "subslides": [
            "cookiePhoto",
            "cookieRecipe"
        ]
    }
}
}

struсture.json version 2 for subslides

In struсture.json version 2, you can add subslides only in the subslides field of a specific slide in the chapters object. For example, the cookiePhoto and cookieRecipe subslides of the vanillaCookie slide.

// ./structure.json

{
  "chapters": {
    "favorite": {
      "name": "Favorite",
      "content": [
        {
          "slide": "vanillaCookie",
          "subslides": [
            "cookiePhoto",
            "cookieRecipe"
          ]
        }
      ]
    }
  }
}

Chapters

You can group slides by chapters. Each key in the chapters object is a unique ID of the chapter.

Chapter in struсture.json version 1

In struсture.json version 1, each chapter has the following properties:

  • name is the chapter name displayed in eWizard Editor.

  • content is an array with the IDs of the slides included in the chapter.

Slides not added to chapters are considered archived.

For example:

// ./structure.json

{
  "chapters": {
    "favorite": {
      "name": "Favorite Cookies",
      "content": ["vanillaCookie", "chocolateCookie"]
    },
    "other": {
      "name": "Other Cookies",
      "content": ["biscuit"]
    }
  }
}

Chapters in struсture.json version 2

In struсture.json version 2, each chapter has the following properties:

  • name is the chapter name displayed in eWizard Editor.

  • content is an array with the IDs of the slides included in the chapter.

  • subslides is an optional field that defines the list of subslides for the slide. For more information, see Subslides.

For example, the favorite chapter contains the vanillaCookie slide with the cookiePhoto subslide and the chocolateCookie slide:

// ./structure.json

{
  "chapters": {
    "favorite": {
      "name": "Favorite",
      "content": [
        {
          "slide": "vanillaCookie",
            "subslides": [
              {
                "slide": "cookiePhoto"
              }
        },
        "chocolateCookie"
      ]
    }
  }
}

Storyboard

With the storyboard array, you can define chapters and their display order during the e-Detailer demonstration.

eWizard.js treats the chapters not included in storyboard as hidden. It's impossible to open such chapters by swiping the e-Detailer. You can access a hidden chapter only by a direct link. For more information, see Hidden slides, subslides, and chapters.

Storyboard in struсture.json version 1

In struсture.json version 1, the storyboard array has the following struсture:

// ./structure.json

{
    "storyboard": [
        "favorite",
        "other"
    ]
}

Storyboard in struсture.json version 2

In struсture.json version 2, the storyboard array has the following struсture:

// ./structure.json

{
  "storyboard": [
    {
      "chapter": "favorite",
      "hidden": true
    },
    "other"
  ]
}

The hidden field set to true defines the chapter that isn't visible in the e-Detailer. For more information, see Hidden slides, subslides, and chapters.

Start

Use the start object to define the slide and the chapter from which you want to start demonstration of your e-Detailer.

// ./structure.json

"start": {
    "slide": "slideId",
    "chapter": "chapterId"
}

The slide in the start object is highlighted in eWizard Editor, which uses the struсture.json file to get this information.

Hidden slides, subslides, and chapters

You can configure your e-Detailer so that certain slides, subslides, or chapters aren't visible during demonstration. It means that these slides don't appear when you preview or demonstrate your e-Detailer. The hidden slides, subslides, and chapters aren't removed from the e-Detailer.

You can't swipe to a hidden chapter. To access a hidden chapter, use a direct link.

Hidden slides, subslides, and chapters in struсture.json version 1

To hide a slide, subslide, or chapter in the e-Detailer, add ! in front of:

• the slide ID within the content array of the chapter this slide belongs to.

For example, hide the vanillaCookie slide within the content array of the favorite chapter:

// ./structure.json

{
  "chapters": {
    "favorite": {
      "name": "Favorite Cookies",
      "content": [
          "!vanillaCookie",
          "chocolateCookie"
      ]
    }
  }

• the subslide ID within the slide array this subslide belongs to.

For example, hide the cookiePhoto subslide in the subslides array of the vanillaCookie slide:

// ./structure.json

{
    "slides": {
        "vanillaCookie": {
            "name": "Vanilla Cookies",
            "template": "slides/vanillaCookie/index.vue",
            "subslides": [
                "!cookiePhoto",
                "cookieRecipe"
            ]
        }
    }
}

• the chapter ID within the storyboard array.

For example, hide the other chapter in the storyboard array:

You can also hide a chapter by removing it from the storyboard array.

// ./structure.json

{
    "storyboard": [
        "favorite",
        "!other"
    ]
}

Remove ! to make the slides, subslides, or chapters visible.

Hidden slides, subslides, and chapters in struсture.json version 2

To hide a slide, subslide, or chapter in the e-Detailer, define the hidden field as true.

• To hide a specific slide, define the hidden field as true in the slide object of the content array of the chapter.

For example, hide the vanillaCookie in the favorite chapter:

// ./structure.json

{
  "chapters": {
    "favorite": {
      "name": "favorite",
      "content": [
        {
          "slide": "vanillaCookie",
          "hidden": "true"
        }
      ]
    }
  }
}

• To hide a specific subslide, define the hidden field as true in subslides array for each subslide in the chapters object.

For example, hide the cookiePhoto subslide in the subslides array of the vanillaCookie slide object:

// ./structure.json

{
  "chapters": {
    "favorite": {
      "name": "Favorite",
      "content": [
        {
          "slide": "vanillaCookie",
          "subslides": [
            {
              "slide": "cookiePhoto",
              "hidden": "true"
            }
          ]
        }
      ]
    }
  }
}

• To hide a specific chapter, define the hidden field as true in the chapter object within the storyboard array.

For example, hide the favorite chapter in the storyboard array:

// ./structure.json

{
  "storyboard": [
    {
      "chapter": "favorite",
      "hidden": true
    },
  ]
}

If a chapter is hidden, all the slides of the chapter are treated as hidden. If at least one of the slides or subslides of the hidden chapter is visible, the whole chapter becomes visible.

Define the hidden field as false or remove the hidden field to make the slides, subslides, or chapters visible.

Archived slides

This feature is available only in struсture.json version 2.

You can archive slides and subslides to remove them from an e-Detailer. You can't swipe to archived slides or open them with a direct link.

To archive a slide, add an object with the slide ID and its chapter ID to the archivedSlides array of the struсture.json file. If a slide is removed from a chapter, it's also considered as archived.

For example, the archived vanillaCookie slide in the favorite chapter:

// ./structure.json

{
  "archivedSlides": [
    {
      "slide": "vanillaCookie",
      "chapter": "favorite"
    }
  ]
}

To restore an archived slide or subslide, remove it from the archivedSlides array and add the slide back to a chapter.

Did this answer your question?