Hi All,
I have a use case to display List in multiple ways based on user selection
1. Horizontal List
2. Carousel List
In my current approach I am loading both views on component load and just do a change of CSS "display:none" to block for selected option. So drawback is i have to load both views with duplicate data.
Is there any way I can get the selected style system data to component HTML like Display="Carousel" so I will load all tag and populate data in respective tag only and other view container will be empty.
Solved! Go to Solution.
Views
Replies
Total Likes
You can have 2 blocks of code in the HTL, where HTML is server-side rendered based on a selected attribute of the view option. In this case, you will not display; none, which inserts unwanted duplicated markup to your document; bad for SEO. In this case, the authors will be able to choose a view(./isHorizontalListView) from the TouchUI Component's Dialogue. You can also use Adobe's AEM Style System, but if the markup between the horizontal-list-view and carousel-list-view are juristically different or complicated, then stick to this approach.
Example:
<div class="customlistcomponent">
<div data-sly-test="${properties.horizontalview}" class="customlistcomponent__horizontal-list">
// horizontal-list specific html structure goes here
</div>
<div data-sly-test="${!properties.horizontalview}" class="customlistcomponent__carousel-list">
// carousel-list specific html structure goes here
</div>
</div>
You can have 2 blocks of code in the HTL, where HTML is server-side rendered based on a selected attribute of the view option. In this case, you will not display; none, which inserts unwanted duplicated markup to your document; bad for SEO. In this case, the authors will be able to choose a view(./isHorizontalListView) from the TouchUI Component's Dialogue. You can also use Adobe's AEM Style System, but if the markup between the horizontal-list-view and carousel-list-view are juristically different or complicated, then stick to this approach.
Example:
<div class="customlistcomponent">
<div data-sly-test="${properties.horizontalview}" class="customlistcomponent__horizontal-list">
// horizontal-list specific html structure goes here
</div>
<div data-sly-test="${!properties.horizontalview}" class="customlistcomponent__carousel-list">
// carousel-list specific html structure goes here
</div>
</div>
Views
Replies
Total Likes
Views
Likes
Replies