<sly data-sly-use.helper="com.adobe.cq.wcm.core.components.models.Component"
data-sly-use.component="com.mkovacek.adobe.aem.core.models.CartModel"
data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
data-sly-test.showPlaceholder="${!component.name}"
></sly>
<sly data-sly-test="${!showPlaceholder}">
<test-cart
id="${helper.id}"
name="${component.name}"
type="${component.type}"
price="${component.price}"
buttons="${component.buttons}">
</test-cart>
</sly>
this is the HTL code where, test-cart is a web component, and in the html, this test cart has options to render multiple buttons. So buttons variable above is a array of json objects. in html react side button shows parse error, something is wrong with this data and I am not sure what and how to pass an array of objects.
Solved! Go to Solution.
Views
Replies
Total Likes
You are getting parsing error because you are not passing json data to frontend, can you check what is type of data being rendered in frontend for attribute "buttons"? I assume something like below.
buttons="ButtonModel(...),ButtonModel(...),ButtonModel(...),..."
convert the List<ButtonModel> to JSON and pass it to frontend.
You need to store all buttons data in List and return it via SlingModel Exporter (i.e. CartModel).
Snippet for CartModel
public List<ContentCard> getButtons() {
return new ArrayList<>(buttons);
}
Also, ensure you capture all relevant data and store it in buttons.
@ChildResource(name="buttons")
@Getter
private List<ButtonModel> buttons;
This is the a variable in my cart model. It does get me the variable from /content/.... to HTL, but passing this variable from htl to web-component is an issue.
Here's how you can achieve this in your code:
<sly data-sly-use.helper="com.adobe.cq.wcm.core.components.models.Component"
data-sly-use.component="com.mkovacek.adobe.aem.core.models.CartModel"
data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
data-sly-test.showPlaceholder="${!component.name}">
</sly>
<sly data-sly-test="${!showPlaceholder}">
<!-- Define the nested object using inline data-sly variable -->
<sly data-sly-use.buttonsObject="{ 'buttonLabel': 'Click me', 'buttonLink': '/example/link' }">
<!-- Pass the nested object as a parameter to the web component -->
<test-cart
id="${helper.id}"
name="${component.name}"
type="${component.type}"
price="${component.price}"
buttons="${buttonsObject}">
</test-cart>
</sly>
</sly>
You are getting parsing error because you are not passing json data to frontend, can you check what is type of data being rendered in frontend for attribute "buttons"? I assume something like below.
buttons="ButtonModel(...),ButtonModel(...),ButtonModel(...),..."
convert the List<ButtonModel> to JSON and pass it to frontend.
Thanks, yes, this works, I was asuming that when I pass the data through HTL to the web component, it would internally stringify the data and pass. but that was not the case. Anyways, thanks.
Views
Replies
Total Likes