Expand my Community achievements bar.

Radically easy to access on brand approved content for distribution and omnichannel performant delivery. AEM Assets Content Hub and Dynamic Media with OpenAPI capabilities is now GA.
SOLVED

How to customize Reviews Essentials Component

Avatar

Level 2

Hi all,

I would like to customize the standard component Reviews Essentials. For this Purpose I have copiedlibs\social\reviews\components\hbs\reviews\review.review.hbs to apps/myProject/components/social/reviews/hbs/reviews/review.hbs in my Project. In this file I have added some <dev>test</dev> just to test, if the copied file review.hbs override the original file. I have deployed and tested but nothing changes :(. Do I have to do something else to tell the framework to use my review.hbs instead of the original?

Thanks for Help

1 Accepted Solution

Avatar

Correct answer by
Level 9

(edited response)

You wrote : I have copiedlibs\social\reviews\components\hbs\reviews\review.review.hbs to apps/myProject/components/social/reviews/hbs/reviews/review.hbs

1) To overlay, you must use an identical path, making use of the fact that, if the resource property does not contain an absolute path, then /apps is searched before /libs.  Thus, to truly Overly, you must create /apps/social/reviews/components/hbs folder to contain a reviews component.

2) Reviews is a combination of Comments and Tally.  If you're overlaying the commenting feature, then you need to overlay the comment system in a manner similar to the Overlay tutorial.  Which means you need both

  /apps/social/reviews/components/hbs/reviews

  /apps/social/reviews/components/hbs/reviews/review

The review.hbs script should exist in /apps/social/reviews/components/hbs/reviews/review folder (same as in /libs).

3) You need to set the properties appropriately on the overlaid reviews component. 

  /apps/social/reviews/components/hbs/reviews

    sling:resourceSuperType  String  social/commons/components/hbs/comments

    sling:resourceType  String  social/reviews/components/hbs/reviews

  /apps/social/reviews/components/hbs/reviews/review

    sling:resourceSuperType  String  social/commons/components/hbs/comments/comment

    sling:resourceType  String  social/reviews/components/hbs/reviews/review

Then copy /libs/social/reviews/components/hbs/reviews/review/review.hbs into /apps at the same location and now you should be able to see your edits.

- JK

Note : there are some updates being made to the samples, so I recommend using the English version of the documentation until the German version catches up, e.g.

http://docs.adobe.com/docs/en/aem/6-0/develop/social-communities/essentials/rating.html

View solution in original post

3 Replies

Avatar

Correct answer by
Level 9

(edited response)

You wrote : I have copiedlibs\social\reviews\components\hbs\reviews\review.review.hbs to apps/myProject/components/social/reviews/hbs/reviews/review.hbs

1) To overlay, you must use an identical path, making use of the fact that, if the resource property does not contain an absolute path, then /apps is searched before /libs.  Thus, to truly Overly, you must create /apps/social/reviews/components/hbs folder to contain a reviews component.

2) Reviews is a combination of Comments and Tally.  If you're overlaying the commenting feature, then you need to overlay the comment system in a manner similar to the Overlay tutorial.  Which means you need both

  /apps/social/reviews/components/hbs/reviews

  /apps/social/reviews/components/hbs/reviews/review

The review.hbs script should exist in /apps/social/reviews/components/hbs/reviews/review folder (same as in /libs).

3) You need to set the properties appropriately on the overlaid reviews component. 

  /apps/social/reviews/components/hbs/reviews

    sling:resourceSuperType  String  social/commons/components/hbs/comments

    sling:resourceType  String  social/reviews/components/hbs/reviews

  /apps/social/reviews/components/hbs/reviews/review

    sling:resourceSuperType  String  social/commons/components/hbs/comments/comment

    sling:resourceType  String  social/reviews/components/hbs/reviews/review

Then copy /libs/social/reviews/components/hbs/reviews/review/review.hbs into /apps at the same location and now you should be able to see your edits.

- JK

Note : there are some updates being made to the samples, so I recommend using the English version of the documentation until the German version catches up, e.g.

http://docs.adobe.com/docs/en/aem/6-0/develop/social-communities/essentials/rating.html

Avatar

Level 9

If you want to Extend the Reviews component, then that is slightly different.  That tutorial will be updated by the end of the week.

In this case, you can create the reviews and review components in /apps/myProject if you like, but you will still need to set the sling:superResourceType to be the path to the component you're extending (social/reviews/components/hbs/reviews and social/reviews/components/hbs/reviews/review) and the sling:resourceType to refer to the component itself.

After copying in the review.hbs script, you can add new methods and then register them.  This is described here.