Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

How to author assets for Carousel in this requirement

Avatar

Level 3

Can someone please throw some light on how to give authors option to add assets for the below requirement.

Products of the company (image, text on it, href link for image) are to be displayed in the carousel. Only 5 products are to be displayed on the carousel. There are 80 product (likely to increase in future) and invoking external service specifies (returns 5 product ids) which product images are to be displayed on the carousel.

How do I give the author the functionality to author carousel? If in a dialog of the component, how to provide option to add new products? 

How do I search for products to display on carousel (only 5 products needs to be displayed depending on the product id returned by the service) ?

Can somebody help on how to implement this functionality please..

Thanks,

1 Accepted Solution

Avatar

Correct answer by
Level 10

Ashtrick,

Based on your requirements, I would have implemented as below in two parts.

1. Product metadata Management

        Create a page with input field which accepts product name / id from the author which fetches image, text and link which are editable. Once the author changes any of these, update the same and store it in DAM (as you have mentioned above in your comment) and save it. I would avoid authors directly accessing crx and update there which is not expected by Authors. So, whenever author has to change any details for a product, they would visit that page (only on author and not published for external user) and change accordingly.

2. Carousel component

        Create/Extend from foundation, a carousel component  and have multifield component to accept 5 product ids for default value. Write a service which connects to your external service to get 'n' number of products and create a final 5 products. Fetch the details for those 5 with image, text and url. The same can be accessed in component jsp and render it as carousel component.

It might take little more effort but a clean way of doing it.

 

Thanks,

Loki

View solution in original post

7 Replies

Avatar

Level 3
  1. Structure the DAM Assets in such a way that all these products images are on a particular location. say, /content/dam/myproject/products
  2. Add the custom metadata to all the assets for product_id, text and link
  3. Create a servlet / service that accepts product_id as input and and searches (QueryBuilder) in the DAM in the path "/content/dam/myproject/products" for these product_ids and returns JSON object
  • Authors will need to go to the path "/content/dam/myproject/products" to author the elements for Carousel

How does that sound? Bad idea?

Any better suggestions guys?

Avatar

Level 10

Couple of things to think before designing this !

1. Does the text and link for an image of a particular product (product_id) changes or is it configurable at the creation ?

2. will external service provide the list (5) of product_ids that needs to be displayed in the carousel always or should it also be configurable or given an option to select the products by the author ?

Probably, if you can let us know on the above points, I can put across some thoughts to design this component better !

Avatar

Level 3

hi Bsloki,

Thank you for looking into this and helping me out. Please find me comments below:

1. Does the text and link for an image of a particular product (product_id) changes or is it configurable at the creation ?

  • Image for the product should be authorable (can change any time)
  • Text that appear on the image is authorable (can change any time)
  • The link (user is taken to this link when clicked on the image in carousel) should also be authorable
  • Addition to that, authors should be able to remove a product as well

2. will external service provide the list (5) of product_ids that needs to be displayed in the carousel always or should it also be configurable or given an option to select the products by the author ?

  • The external service will provide at-least 2 product_ids that needs to be displayed.
  • Author should be able to select/configure 5 default products to be displayed. Depending on the number of product_ids provided by external service, the default products should be dropped. Only 5 products should be there in the carousel in each load. For example, if the service provides 3 product_ids, then these 3 products + 2 from the default. And if the service provides 5 product_ids, all  these 5 products and none from default.

Please let me know if you need more information

Thanks,

-A

Avatar

Correct answer by
Level 10

Ashtrick,

Based on your requirements, I would have implemented as below in two parts.

1. Product metadata Management

        Create a page with input field which accepts product name / id from the author which fetches image, text and link which are editable. Once the author changes any of these, update the same and store it in DAM (as you have mentioned above in your comment) and save it. I would avoid authors directly accessing crx and update there which is not expected by Authors. So, whenever author has to change any details for a product, they would visit that page (only on author and not published for external user) and change accordingly.

2. Carousel component

        Create/Extend from foundation, a carousel component  and have multifield component to accept 5 product ids for default value. Write a service which connects to your external service to get 'n' number of products and create a final 5 products. Fetch the details for those 5 with image, text and url. The same can be accessed in component jsp and render it as carousel component.

It might take little more effort but a clean way of doing it.

 

Thanks,

Loki

Avatar

Level 3

Thanks Loki for the input, much appreciated.

I have a question regarding the Product Metadata Management part.

How do authors add images to the DAM? Correct me if I'm wrong, they will need to upload images going into "/content/dam/myproject/products" (http://localhost:4502/damadmin#/content/dam/myproject/products) right?

And they will need to assign product_id (a custom metadata) for each image for the image to be searchable depending on the product_id. Text and URL are also custom metadata for the asset and is in the same page. In that case, why do I need to provide then with separate page? Is that not confusing for authors to go into different places for adding/editing the same information?

Can you please carify?

Thanks,

-A

Avatar

Level 10

Yes! Authors can you assets to upload image and we can direct them to update the metadata for the same. But ideally, for authors access to nodes would be limited in most of the situations and also would need some technical directions to them. If thats not an issue, we can still ask authors to do that.

Otherwise, we can have a kind of authors/admin dashboard and have an option to upload an image along with the metadata of the same and programatically store them as desired. In this case authors are exposed only to content.

 

Thanks,

Loki

Avatar

Level 3

Thanks Loki.

That was really helpful.

-A