Expand my Community achievements bar.

SOLVED

Parsys Component Issue

Avatar

Level 1

Hi All,

I'm having a weird issue with the parsys component for some reason its only showing one drop zone, and not 3 within AEM edit mode. I've pasted my code from my column control component with a screenshot of my error.

Control Component Markup

<div class="container">

        <!-- Example row of columns -->

        <div class="row">

          <div class="col-md-4 text-center">

            <sly data-sly-resource="${'par' @resourceType='foundation/components/parsys'}" data-sly-unwrap></sly>

          </div>

          <div class="col-md-4 text-center">

             <sly data-sly-resource="${'par' @resourceType='foundation/components/parsys'}" data-sly-unwrap></sly>

          </div>

          <div class="col-md-4 text-center">

             <sly data-sly-resource="${'par' @resourceType='foundation/components/parsys'}" data-sly-unwrap></sly>

          </div>

        </div>

Here is a screenshot of my parsys component only showing one and not three?.

screenshot.jpg

Thanks,

- Abel

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi,

From the code snippet, could see that the "path" for all three parsys is mentioned as "par". Can you make it unique.(any meaningful name of your choice)

  • Components included in the parsys will be saved under that name in "jcr:content" of the page where this column component is authored. (in this case, HelloWorld.html per the screenshot)
  • In CRXDE, /content/HelloWorld/jcr:content/par/.. , /content/HelloWorld/jcr:content/midPar/... and /content/HelloWorld/jcr:content/colPar/...

Naming like below will help produce respective parsys container in 3 columns.

....     <div data-sly-resource="${'par' @ resourceType='wcm/foundation/components/parsys'}"></div>

          </div>

          <div class="col-md-4 text-center">

             <div data-sly-resource="${'midpar' @ resourceType='wcm/foundation/components/parsys'}"></div>

          </div>

          <div class="col-md-4 text-center">

             <div data-sly-resource="${'colpar' @ resourceType='wcm/foundation/components/parsys'}"></div>

          </div> ..

View solution in original post

7 Replies

Avatar

Community Advisor

Can you add Column control component markup, It's missing in the original post.

Avatar

Level 1

Sorry that was odd here it is.

<div class="container">

        <!-- Example row of columns -->

        <div class="row">

          <div class="col-md-4 text-center">

            <div data-sly-resource="${'par' @ resourceType='wcm/foundation/components/parsys'}"></div>

          </div>

          <div class="col-md-4 text-center">

             <div data-sly-resource="${'par' @ resourceType='wcm/foundation/components/parsys'}"></div>

          </div>

          <div class="col-md-4 text-center">

             <div data-sly-resource="${'par' @ resourceType='wcm/foundation/components/parsys'}"></div>

          </div>

        </div>

Thanks

Avatar

Correct answer by
Community Advisor

Hi,

From the code snippet, could see that the "path" for all three parsys is mentioned as "par". Can you make it unique.(any meaningful name of your choice)

  • Components included in the parsys will be saved under that name in "jcr:content" of the page where this column component is authored. (in this case, HelloWorld.html per the screenshot)
  • In CRXDE, /content/HelloWorld/jcr:content/par/.. , /content/HelloWorld/jcr:content/midPar/... and /content/HelloWorld/jcr:content/colPar/...

Naming like below will help produce respective parsys container in 3 columns.

....     <div data-sly-resource="${'par' @ resourceType='wcm/foundation/components/parsys'}"></div>

          </div>

          <div class="col-md-4 text-center">

             <div data-sly-resource="${'midpar' @ resourceType='wcm/foundation/components/parsys'}"></div>

          </div>

          <div class="col-md-4 text-center">

             <div data-sly-resource="${'colpar' @ resourceType='wcm/foundation/components/parsys'}"></div>

          </div> ..

Avatar

Level 1

Ok I'll give that a shot tomorrow thanks

Avatar

Level 1

Awesome that worked, I'ts been a grueling learning experience following these tutorials from Adobe, I followed a tutorial and they requested me to use this set of code unfortunately, it didn't work, but this sure did!.

Avatar

Level 10

" I followed a tutorial and they requested me to use this set of code unfortunately, it didn't work"

What tutorial are you referring to?

Most HELPX articles have been tested many times by community members. Can you let us know what one you are referring to.

Avatar

Level 10

Hi,

Could you please let us know which Adobe docs you have followed.

Also, you can always follow Adobe HELPX Articles which are perfectly working fine(Might be you are following non-community article) - Which I personally tested many times from 4 years!!

Thanks,

Ratna.