advancedmegamenu/views/templates/admin/configure.tpl

<div
  id="adv-megamenu-admin"
  class="adv-megamenu-admin"
  data-default-lang="{$advmegamenu_default_lang|intval}"
  data-ajax-url="{$advmegamenu_ajax_url|escape:'htmlall':'UTF-8'}"
  data-token="{$advmegamenu_admin_token|escape:'htmlall':'UTF-8'}"
>
  <script type="application/json" class="js-adv-tree-data">{$advmegamenu_tree|json_encode nofilter}</script>
  <script type="application/json" class="js-adv-languages-data">{$advmegamenu_languages|json_encode nofilter}</script>
  <script type="application/json" class="js-adv-i18n">{
    "builderTitle": "{l s='Mega menu builder' d='Modules.Advancedmegamenu.Admin' js=1}",
    "builderHelp": "{l s='Manage the menu like on the storefront: quick actions on cards, editing in Bootstrap modals, and automatic sprite/front cache regeneration on save.' d='Modules.Advancedmegamenu.Admin' js=1}",
    "rootRule": "{l s='First level only stores title and custom link. Description and item image are disabled there by design.' d='Modules.Advancedmegamenu.Admin' js=1}",
    "addRoot": "{l s='Add root item' d='Modules.Advancedmegamenu.Admin' js=1}",
    "saveMenu": "{l s='Save mega menu' d='Modules.Advancedmegamenu.Admin' js=1}",
    "menuItem": "{l s='Menu item' d='Modules.Advancedmegamenu.Admin' js=1}",
    "rootItem": "{l s='Root item' d='Modules.Advancedmegamenu.Admin' js=1}",
    "childItem": "{l s='Child item' d='Modules.Advancedmegamenu.Admin' js=1}",
    "inactive": "{l s='Inactive' d='Modules.Advancedmegamenu.Admin' js=1}",
    "newWindow": "{l s='New window' d='Modules.Advancedmegamenu.Admin' js=1}",
    "openLink": "{l s='Custom link' d='Modules.Advancedmegamenu.Admin' js=1}",
    "edit": "{l s='Edit' d='Modules.Advancedmegamenu.Admin' js=1}",
    "delete": "{l s='Delete' d='Modules.Advancedmegamenu.Admin' js=1}",
    "addChild": "{l s='Add child' d='Modules.Advancedmegamenu.Admin' js=1}",
    "addBlock": "{l s='Add block' d='Modules.Advancedmegamenu.Admin' js=1}",
    "block": "{l s='Block' d='Modules.Advancedmegamenu.Admin' js=1}",
    "blocks": "{l s='blocks' d='Modules.Advancedmegamenu.Admin' js=1}",
    "children": "{l s='children' d='Modules.Advancedmegamenu.Admin' js=1}",
    "emptyTree": "{l s='No menu items yet. Add the first root item to start building the mega menu.' d='Modules.Advancedmegamenu.Admin' js=1}",
    "nodeModalTitle": "{l s='Edit menu item' d='Modules.Advancedmegamenu.Admin' js=1}",
    "layoutModalTitle": "{l s='Edit rich content block' d='Modules.Advancedmegamenu.Admin' js=1}",
    "deleteNodeTitle": "{l s='Delete menu item' d='Modules.Advancedmegamenu.Admin' js=1}",
    "deleteLayoutTitle": "{l s='Delete rich block' d='Modules.Advancedmegamenu.Admin' js=1}",
    "deleteNodeText": "{l s='This will remove the selected menu item together with its children and attached blocks.' d='Modules.Advancedmegamenu.Admin' js=1}",
    "deleteLayoutText": "{l s='This will remove the selected rich content block.' d='Modules.Advancedmegamenu.Admin' js=1}",
    "cancel": "{l s='Cancel' d='Modules.Advancedmegamenu.Admin' js=1}",
    "save": "{l s='Save' d='Modules.Advancedmegamenu.Admin' js=1}",
    "confirmDelete": "{l s='Delete' d='Modules.Advancedmegamenu.Admin' js=1}",
    "type": "{l s='Type' d='Modules.Advancedmegamenu.Admin' js=1}",
    "entityId": "{l s='Entity ID' d='Modules.Advancedmegamenu.Admin' js=1}",
    "active": "{l s='Active' d='Modules.Advancedmegamenu.Admin' js=1}",
    "title": "{l s='Title' d='Modules.Advancedmegamenu.Admin' js=1}",
    "description": "{l s='Description' d='Modules.Advancedmegamenu.Admin' js=1}",
    "customLinkLabel": "{l s='Custom link' d='Modules.Advancedmegamenu.Admin' js=1}",
    "iconUpload": "{l s='Item image/icon' d='Modules.Advancedmegamenu.Admin' js=1}",
    "rootOnlyHint": "{l s='For first-level items only title and custom link are edited here.' d='Modules.Advancedmegamenu.Admin' js=1}",
    "width": "{l s='Width' d='Modules.Advancedmegamenu.Admin' js=1}",
    "blockType": "{l s='Block type' d='Modules.Advancedmegamenu.Admin' js=1}",
    "showTitle": "{l s='Show title' d='Modules.Advancedmegamenu.Admin' js=1}",
    "backgroundColor": "{l s='Background color' d='Modules.Advancedmegamenu.Admin' js=1}",
    "imageUpload": "{l s='Block image' d='Modules.Advancedmegamenu.Admin' js=1}",
    "productSearch": "{l s='Product search' d='Modules.Advancedmegamenu.Admin' js=1}",
    "productSearchPlaceholder": "{l s='Search product by name, reference or ID' d='Modules.Advancedmegamenu.Admin' js=1}",
    "promo": "{l s='Promo' d='Modules.Advancedmegamenu.Admin' js=1}",
    "products": "{l s='Products' d='Modules.Advancedmegamenu.Admin' js=1}",
    "noProducts": "{l s='No products attached.' d='Modules.Advancedmegamenu.Admin' js=1}",
    "langLabel": "{l s='Language' d='Modules.Advancedmegamenu.Admin' js=1}"
  }</script>
  <form method="post" action="" class="defaultForm form-horizontal">
    <input type="hidden" name="advmegamenu_tree_json" id="advmegamenu_tree_json" value="" />

    <div class="panel">
      <div class="panel-heading">
        <i class="icon-sitemap"></i>
        {l s='Mega menu builder' d='Modules.Advancedmegamenu.Admin'}
      </div>

      <div class="adv-megamenu-admin__intro">
        <p class="help-block">
          {l s='Manage the menu like on the storefront: quick actions on cards, editing in Bootstrap modals, and automatic sprite/front cache regeneration on save.' d='Modules.Advancedmegamenu.Admin'}
        </p>
        <p class="help-block adv-megamenu-admin__intro-rule">
          {l s='First level only stores title and custom link. Description and item image are disabled there by design.' d='Modules.Advancedmegamenu.Admin'}
        </p>
      </div>

      <div class="adv-megamenu-admin__toolbar">
        <button type="button" class="btn btn-default js-add-root-node">
          <i class="icon-plus"></i>
          {l s='Add root item' d='Modules.Advancedmegamenu.Admin'}
        </button>
      </div>

      <div class="adv-megamenu-admin__tree js-tree"></div>
    </div>

    <div class="panel">
      <div class="panel-footer">
        <button type="submit" name="submitAdvancedMegaMenu" class="btn btn-primary pull-right">
          <i class="process-icon-save"></i>
          {l s='Save mega menu' d='Modules.Advancedmegamenu.Admin'}
        </button>
      </div>
    </div>
  </form>

  <div class="modal fade" id="advNodeModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="{l s='Close' d='Admin.Actions'}">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title js-node-modal-title">{l s='Edit menu item' d='Modules.Advancedmegamenu.Admin'}</h4>
        </div>
        <div class="modal-body">
          <div class="alert alert-info js-node-root-hint" style="display:none;"></div>
          <div class="adv-megamenu-admin__modal-grid">
            <label class="form-group">
              <span>{l s='Type' d='Modules.Advancedmegamenu.Admin'}</span>
              <select class="form-control js-node-type">
                <option value="category">category</option>
                <option value="cms">cms</option>
                <option value="link">link</option>
                <option value="rich_content">rich_content</option>
              </select>
            </label>
            <label class="form-group">
              <span>{l s='Entity ID' d='Modules.Advancedmegamenu.Admin'}</span>
              <input type="number" class="form-control js-node-entity-id" min="0">
            </label>
            <label class="form-group adv-megamenu-admin__checkbox">
              <input type="checkbox" class="js-node-active">
              <span>{l s='Active' d='Modules.Advancedmegamenu.Admin'}</span>
            </label>
            <label class="form-group adv-megamenu-admin__checkbox">
              <input type="checkbox" class="js-node-new-window">
              <span>{l s='New window' d='Modules.Advancedmegamenu.Admin'}</span>
            </label>
          </div>

          <div class="adv-megamenu-admin__modal-image js-node-image-group">
            <label class="form-group">
              <span>{l s='Item image/icon' d='Modules.Advancedmegamenu.Admin'}</span>
              <input type="file" class="form-control js-node-icon-upload" accept="image/*">
            </label>
            <div class="js-node-icon-preview"></div>
          </div>

          <div class="adv-megamenu-admin__lang-panels js-node-languages"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">{l s='Cancel' d='Modules.Advancedmegamenu.Admin'}</button>
          <button type="button" class="btn btn-primary js-save-node">{l s='Save' d='Modules.Advancedmegamenu.Admin'}</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="advLayoutModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="{l s='Close' d='Admin.Actions'}">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">{l s='Edit rich content block' d='Modules.Advancedmegamenu.Admin'}</h4>
        </div>
        <div class="modal-body">
          <div class="adv-megamenu-admin__modal-grid">
            <label class="form-group">
              <span>{l s='Width' d='Modules.Advancedmegamenu.Admin'}</span>
              <input type="number" class="form-control js-layout-width" min="1" max="12">
            </label>
            <label class="form-group">
              <span>{l s='Block type' d='Modules.Advancedmegamenu.Admin'}</span>
              <select class="form-control js-layout-type">
                <option value="promo">{l s='Promo' d='Modules.Advancedmegamenu.Admin'}</option>
                <option value="products">{l s='Products' d='Modules.Advancedmegamenu.Admin'}</option>
              </select>
            </label>
            <label class="form-group adv-megamenu-admin__checkbox">
              <input type="checkbox" class="js-layout-title">
              <span>{l s='Show title' d='Modules.Advancedmegamenu.Admin'}</span>
            </label>
            <label class="form-group">
              <span>{l s='Background color' d='Modules.Advancedmegamenu.Admin'}</span>
              <input type="text" class="form-control js-layout-bg" placeholder="#f3efe8">
            </label>
          </div>

          <div class="adv-megamenu-admin__modal-image">
            <label class="form-group">
              <span>{l s='Block image' d='Modules.Advancedmegamenu.Admin'}</span>
              <input type="file" class="form-control js-layout-upload" accept="image/*">
            </label>
            <div class="js-layout-preview"></div>
          </div>

          <div class="form-group">
            <label>
              <span>{l s='Product search' d='Modules.Advancedmegamenu.Admin'}</span>
              <input type="text" class="form-control js-layout-product-search" placeholder="{l s='Search product by name, reference or ID' d='Modules.Advancedmegamenu.Admin'}">
            </label>
          </div>
          <div class="adv-menu-product-results js-layout-product-results"></div>
          <div class="adv-menu-products js-layout-products"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">{l s='Cancel' d='Modules.Advancedmegamenu.Admin'}</button>
          <button type="button" class="btn btn-primary js-save-layout">{l s='Save' d='Modules.Advancedmegamenu.Admin'}</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="advConfirmModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="{l s='Close' d='Admin.Actions'}">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title js-confirm-title">{l s='Delete menu item' d='Modules.Advancedmegamenu.Admin'}</h4>
        </div>
        <div class="modal-body">
          <p class="js-confirm-text"></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">{l s='Cancel' d='Modules.Advancedmegamenu.Admin'}</button>
          <button type="button" class="btn btn-danger js-confirm-action">{l s='Delete' d='Modules.Advancedmegamenu.Admin'}</button>
        </div>
      </div>
    </div>
  </div>
</div>