Extending Proxy Carousel Core Component

[hannansyed]

Hey,

We're trying to extend/overlay the Core Carousel in AEM 6.4.

We created a new cq:Component called carousel.

This is our .content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    cq:isContainer="true"
    jcr:primaryType="cq:Component"
    jcr:title="Carousel"
    sling:resourceSuperType="core/wcm/components/carousel/v1/carousel"
    componentGroup="CorporateHomepage.Content"/>

This is our _cq_editConfig.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:EditConfig">
    <cq:listeners
        jcr:primaryType="cq:EditListenersConfig"
        afterchilddelete="CQ.CoreComponents.panelcontainer.v1.AFTER_CHILD_DELETE"
        afterchildinsert="CQ.CoreComponents.panelcontainer.v1.AFTER_CHILD_INSERT"
        afterchildmove="CQ.CoreComponents.panelcontainer.v1.AFTER_CHILD_MOVE"/>
</jcr:root>

At this point, the carousel is working correctly after we've allowed it in in the layout container at the template level.

However, the issue is when we try to extend the Core Carousel. I tried to import the carousel.html from aem-core-wcm-components/carousel.html at master · adobe/aem-core-wcm-components · GitHub in order to extend the HTML, but when we do this we get an error and the carousel stops working.

<div data-sly-use.carousel="com.adobe.cq.wcm.core.components.models.Carousel"
     data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
     class="cmp-carousel"
     data-cmp-is="carousel"
     data-cmp-autoplay="${(wcmmode.edit || wcmmode.preview) ? '' : carousel.autoplay}"
     data-cmp-delay="${carousel.delay}"
     data-cmp-autopause-disabled="${carousel.autopauseDisabled}">
    <div class="cmp-carousel__content" data-sly-test="${carousel.items && carousel.items.size > 0}" >
        <div data-sly-repeat.item="${carousel.items}"
             data-sly-resource="${item.name @ decorationTagName='div'}"
             role="tabpanel"
             class="cmp-carousel__item${itemList.first ? ' cmp-carousel__item--active' : ''}"
             data-cmp-hook-carousel="item"></div>
        <div class="cmp-carousel__actions">
            <button role="button"
                    class="cmp-carousel__action cmp-carousel__action--previous"
                    data-cmp-hook-carousel="previous" aria-label="${'Previous' @ i18n}">
                <span class="cmp-carousel__action-icon"></span>
                <span class="cmp-carousel__action-text">${'Previous' @ i18n}</span>
            </button>
            <button role="button"
                    class="cmp-carousel__action cmp-carousel__action--next"
                    data-cmp-hook-carousel="next" aria-label="${'Next' @ i18n}">
                <span class="cmp-carousel__action-icon"></span>
                <span class="cmp-carousel__action-text">${'Next' @ i18n}</span>
            </button>
            <button data-sly-test="${carousel.autoplay}"
                    role="button"
                    class="cmp-carousel__action cmp-carousel__action--pause"
                    data-cmp-hook-carousel="pause" aria-label="${'Pause' @ i18n}">
                <span class="cmp-carousel__action-icon"></span>
                <span class="cmp-carousel__action-text">${'Pause' @ i18n}</span>
            </button>
            <button data-sly-test="${carousel.autoplay}"
                    role="button"
                    class="cmp-carousel__action cmp-carousel__action--play cmp-carousel__action--disabled"
                    data-cmp-hook-carousel="play" aria-label="${'Play' @ i18n}">
                <span class="cmp-carousel__action-icon"></span>
                <span class="cmp-carousel__action-text">${'Play' @ i18n}</span>
            </button>
        </div>
        <ol role="tablist" class="cmp-carousel__indicators" data-cmp-hook-carousel="indicators">
            <li data-sly-repeat.item="${carousel.items}"
                role="tab"
                class="cmp-carousel__indicator${itemList.first ? ' cmp-carousel__indicator--active' : ''}"
                data-cmp-hook-carousel="indicator">${item.title}</li>
        </ol>
    </div>
    <sly data-sly-resource="${resource.path @ resourceType='wcm/foundation/components/parsys/newpar', appendPath='/*', decorationTagName='div', cssClassName='new section aem-Grid-newComponent'}"
         data-sly-test="${(wcmmode.edit || wcmmode.preview) && carousel.items.size < 1}"></sly>
</div>

This is the carousel.html in the carousel component in order to extend the carousel.

At this point the error in Preview Mode is show below

org.apache.sling.api.SlingException: Cannot get DefaultSlingScript: org.apache.sling.api.request.RecursionTooDeepException: /content/corp-home/home/jcr:content/root/responsivegrid/carousel

Cannot serve request to /content/corp-home/home.html on this server

---

ApacheSling/2.6 (jetty/9.4.11.v20180605, Java HotSpot(TM) 64-Bit Server VM 1.8.0_201, Mac OS X 10.14.3 x86_64)

and in Edit (Authoring) Mode the Carousel Dialog isn't able to add new components.

It seems like the problem occurs around data-sly-use.carousel since the component isn't able to read any carousel.items after data-sly-repeat.item. However it is able to read an item size for carousel.items.size.

    <div class="cmp-carousel__content" data-sly-test="${carousel.items && carousel.items.size > 0}" >

        <div data-sly-repeat.item="${carousel.items}"

             data-sly-resource="${item.name @ decorationTagName='div'}"

How can we extend our proxy carousel? We are able to properly extend any other component, i.e. teaser, text, title, but are facing issues with this Core Carousel in 6.4.

Thanks

[smacdonald2008]

So let me see if I got this. You are trying to extend the Core Carousel component. You created a proxy component under APPS. You then copied the HTML from the Carousel component and placed it under your App proxy component and it stopped working?

[hannansyed]

Yes, exactly!

We're trying to make use of the dialog from the Core Carousel. We want to eventually overwrite the HTML, CSS, and JS. However, even if we call the superType /carousel/v1/carousel... we're not able to use the dialog with AEM's own HTML as a proxy.

[smacdonald2008]

Let me see if I can reproduce this. If you created a new component - ie -- MyCarousel,  and then added the HTML from the Core Carousel - it should work.

[hannansyed]

I just gave that a shot

However, we're getting the same errors and issues.

[smacdonald2008]

As a workaround - copy all files from under Carousel Core Component and place under you Carousel under your project under Apps.

I just did that and it works fine.

[smacdonald2008]

[iamsumansourav]

I want display 3 pic in a line how I'll do and I need to add in carousel component pls explain

[hannansyed · Accepted solution]

I was able to resolve the issue! It was something really really silly.

When I initially pulled the git code for Core Components and built them to my local I ran

mvn clean install

However, I should have run

mvn clean install -PautoInstallPackage

I didn't realize that -PautoInstallPackage was not automatically part of the mvn command. My mistake, force of habit!

Once I reran the command and the package was correctly built into my local the carousel was working correctly. I have gone ahead and named the new component 'mycarousel' instead of just 'carousel' and it's looking good!

Thanks for the help!