<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.
해결되었습니다! 솔루션으로 이동.
조회 수
답글
좋아요 수
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.
조회 수
답글
좋아요 수