Position

Intro

Positions are slots (gaps) exposed by themes where we can embed extension elements. We create positions using action component fdk-extension where the user takes a template array from settings by input type (types of Input).

Example

<template>
  <div className="section-extension-root">
    <!-- Extension Position -->
    <fdk-extension :templates="templates" />
  </div>
</template>

<!-- #region  -->
<settings>
{
    "name": "section_extension",
    "label": "Extensions",
    "props": [
        {
          "type": "extension",
          "id": "extension",
          "label": "Extension Positions",
          "info": "Handle extension in these positions",
          "positions": [
            {
              "value": "section_extension",
              "text": ""
            }
          ],
          "default": {}
        }
    ]
}
</settings>
<!-- #endregion -->


<script>
export default {
  props: ["settings"],
  computed: {
    templates() {
      return this.settings.props?.extension?.value?.["section_extension"] || []
    }
  }
};
</script>