Не удалось удалить компоненты в редактируемом шаблоне AEM

Question

Я следовал учебному пособию, которое я связал здесь, чтобы создать пользовательский компонент макета https://helpx.adobe.com/experience-manager/using/bootstrap_grid.html, но я заметил, что удаление этого компонента из редактируемого шаблона невозможно.Как мне решить мою проблему?

Answer 1

TLDR;

• Добавление содержимого в parsys в компоненте, который вы пытаетесь удалить (при условии, что у него есть parsys или область для перетаскивания компонентов).
• Обновить страницу
• Удалить компонент структуры

Долгосрочное исправление

Для более долгосрочного исправления попросите соответствующий компонент сгенерировать недостающее содержимое с помощью узла cq: template.

Что на самом деле происходит

Это немного странно, но я сделаю все возможное, чтобы объяснить.

Если вы ссылаетесь на контент внутри компонентов своей структуры через данные,sly-resource, используя опцию @ resourceType, вы не можете удалить свой структурированный компонент.

Я только что просмотрел этот звонок.У меня был очень простой компонент структуры:

<div class="full-stack-content">
    <div class="container">
        <div data-sly-resource="${'content' @ resourceType='wcm/foundation/components/responsivegrid'}"></div>
    </div>
</div>

И когда я перетаскивал его на свой редактируемый шаблон, я никогда не мог его удалить.

Когда вы используете @resourceType в скрипте рендеринга, а контент на самом деле не существует, он создает так называемый SyntheticResource .

Так что в моем примере я пошел в JCRи под моим content-container нет узла content:

Если я вручную создаю отсутствующий content (из-за data-sly-resource="${'content' из моего кода выше) Затем я могу удалить компонент.

Как вы можете видеть, опция удаления теперь есть:

Для быстрого исправления - просто перетащите что-нибудь в parsys, чтобы создать узел.

Для более долгосрочного исправления попросите компонент сгенерировать этот контент, используя cq: шаблон узла.

Answer 2

Прослушайте событие inspectable-added и добавьте child nodes с Javascript:

ШАГ 1: Создайте ClientLibraryFolder и добавьте категорию cq.authoring.dialog.all:

ШАГ 2: Напишите Javascript, чтобы прослушать событие inspectable-added.callback function должен добавить child-nodes к editable-template, которые необходимы для того, чтобы компонент имел все функции, такие как EDIT, DELETE, MOVE, COPY и т. Д.

(function($document, $) {
  $document.on('cq-inspectable-added', cb_inspectableAdded);
  function cb_inspectableAdded(evt) {
    try {
        var inspectable = evt.inspectable;
        var ajaxConfig = {
            url: evt.inspectable.path,
            data: {
                'sling:resourceType': inspectable.type
            },
            async: false    
        };

        if(inspectable.type.indexOf('myApp/components') > -1) $.post(ajaxConfig); //  replace myApp/components with your partial-path
    } catch(e) {
        console.error(e);
    }   
  }
}($(document), jQuery));

Вот и все!Теперь, когда вы добавляете компонент, который имеет вложенные компоненты, такие как custom-layout-container или parsys или custom components-inside-components;он должен иметь всю функциональность.

Удачи ...

Answer 3

К вашему сведению, эта страница НЕ использует редактируемый шаблон.

• Когда страница имеет относительный путь в sling: resourceType, например: 'grid-aem / components / structure / page', она использует статический шаблон.
• Редактируемые шаблоны создаются в папке / conf.
• Больше различий между статическими и редактируемыми шаблонами.

Статический шаблон, представленный в примере, включает в себя только 1 компонент parsys в /apps/grid-aem/components/structure/page/partials/main.html.

Таким образом, компоненты, добавленные в parsys, можно легко удалить на самой странице с помощью кнопки удаления:

Если вы хотите удалить parsys в colcontrolкомпонент, это пользовательский colcontrol с логикой, реализованной для изменения количества столбцов.Вам необходимо создать компонент с нужным количеством столбцов.Например, при выборе 3 столбцов отображается 3 параметра:

При выборе 2 столбцов для одного и того же компонента отображается 2 параметра:

Надеюсь, это поможет вам.