Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Extending Proxy Carousel Core Component

Avatar

Level 1

Hey,

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

We created a new cq:Component called carousel.

Screen Shot 2019-04-01 at 3.29.25 PM.png

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.

Screen Shot 2019-04-01 at 3.37.30 PM.png

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

1 Accepted Solution

Avatar

Correct answer by
Level 1

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!

View solution in original post

8 Replies

Avatar

Level 10

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?

Avatar

Level 1

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.

Avatar

Level 10

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.

Avatar

Level 1

I just gave that a shot

1723756_pastedImage_0.png

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

Avatar

Level 10

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

CAR11.png

I just did that and it works fine.

Avatar

Level 1

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

Avatar

Correct answer by
Level 1

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!