Actual scenario!   Now below is the code I have developed. <sly data-sly-use.templates="core/wcm/components/commons/v1/templates.html"></sly> <sly data-sly-call="${templates.placeholder @ isEmpty = wcmmode.edit}" /> <div data-sly-use.carousel="com.adobe.cq.wcm.core.components.models.Carousel" d...

@SantoshSai In the generic use case, it's working. In my case, it's not working.

@SantoshSai My Apology. I forgot to add the exact code. I have modified the code above. Please have a look. And by the way, there is no specific error in the error log.   Just getting this - "org.apache.sling.api.SlingException: Cannot get DefaultSlingScript: org.apache.sling.api.resource.ResourceNo...

Actually, I am trying to format the string inside the div and when I implement the string format, I am getting a syntax error. Error, I am getting. "org.apache.sling.api.SlingException: Cannot get DefaultSlingScript: Identifier card.html cannot be correctly instantiated by the Use API" And the code ...

The tooltip issue was resolved by adding a forward slash in front of the class.  <div class=\'sec-secondary-headings\'><h3>20% off on Mobile Devices</h3></div><div class=\'sec-paragraph\'><div class=\'p3\'><p>Coupon Applied: <b>SALE50</p></div> </div> Thanks, everyone for the help.

Actually, after adding the experience fragment in a component, I am unable to open the touch ui dialog of the same component. What could be the issue? If I remove the experience fragment path through crxde then I am able to open the touch ui dialog. Please help me to solve that issue!

Thanks @Mohit_KBansal for your reply. The error was resolved but the encoded HTML did not show the content. The tooltip box is empty, showing white space instead of content.

I am trying to implement a tooltip but it is giving an error for the below syntax. Kindly help to solve this issue.<p data-bs-toggle="${item.includeIcon == 'true' ? 'tooltip' : ''}" data-bs-html="${item.includeIcon == 'true' ? 'true' : ''}" data-bs-custom-class="${item.includeIcon == 'true' ? 'toolt...

Okay @arunpatidar Let me try but can you please explain to me what's the js code issue.

Actually, I am using the Responsive Grid in a component and this responsive grid creates a div dynamically in the original HTML. The divs are given below.<div class="aem-Grid aem-Grid--12 aem-Grid--default--12"> <div class="smb-longplancards aem-GridColumn aem-GridColumn--default--12">Now I need to ...