この会話は、活動がないためロックされています。新しい投稿を作成してください。
この会話は、活動がないためロックされています。新しい投稿を作成してください。
Is it possible to still use code within a containing div even if that containing tag resolves data-sly-test as false?
As an example:
I'm trying to show an image that may or may not have an a tag wrapped around it. I have the following code:
<a data-sly-test="{image.link}" href="{image.link}">
<img src="${image.path}">
</a>
The image link is optional so some images won't have a link wrapped around them. However, if a link isn't specified, all of the code is removed. Is it possible to keep the <img src> line even if that test in the wrapping a tag is false?
解決済! 解決策の投稿を見る。
表示
返信
いいね!の合計
Hi,
If the link is not authored, then data-sly-test="{image.link}" will be false. the content of the anchor tag will not be displayed. AFAIK you should have something like below
<a data-sly-test.noLink="{image.link}" href="{image.link}">
<img src="${image.path}">
</a>
<img data-sly-test="${!noLink}" src="${image.path}">
Thanks,
Radha Krishna N
表示
返信
いいね!の合計
Are you asking if this equals false if the image will still show up?
This is answered in the spec: htl-spec/SPECIFICATION.md at master · Adobe-Marketing-Cloud/htl-spec · GitHub
2.2.5. Test
data-sly-test:
Keeps, or removes the element depending on the attribute value.
Element: shown if test evaluates to true.
Content of element: shown if test evaluates to true.
Attribute value: optional; evaluated as Boolean (but not type-cased to Boolean when exposed in a variable); evaluates to false if the value is omitted.
Attribute identifier: optional; identifier name to access the result of the test.
Removes the whole element from the markup if the expression evaluates to false.
表示
返信
いいね!の合計
I'm aware that the content of the containing tag will not show if the test evaluates as false.
What I'm asking is, is there some way of overriding that feature?
<a data-sly-test>
<img>
<a>
The a tag is an optional feature in the component. I want to add a test on that div, because if a link hasn't been specified by the content editor, I don't want the tag to show up. Regardless, I will always want the img tag to show.
表示
返信
いいね!の合計
Hi,
If the link is not authored, then data-sly-test="{image.link}" will be false. the content of the anchor tag will not be displayed. AFAIK you should have something like below
<a data-sly-test.noLink="{image.link}" href="{image.link}">
<img src="${image.path}">
</a>
<img data-sly-test="${!noLink}" src="${image.path}">
Thanks,
Radha Krishna N
表示
返信
いいね!の合計
Cheers for the advice, Radha. I'll go with that solution.
表示
返信
いいね!の合計
That is like saying in Java is there a way to get a statement to work in an If statement as such
if (val1 < val2)
do something
This will not execute if val2 is less that val1. Same as HTL - if that condition is false - then it will not be included in the page.
表示
返信
いいね!の合計
There is another option, although it retains an element around your image:
<a data-sly-element="${image.link ? 'a' : 'div'}" href="${image.link}" class="image-block">
<img src="${image.path}">
</a>
If `image.link` is authored, it outputs <a>, else it outputs <div>.
Con:
Pro:
表示
返信
いいね!の合計
There is a attribute of HTL called data-sly-unwrap which basically removes the wrapping element if not required. You can set data-sly-unwrap conditionally like
<a data-sly-unwrap="{!image.link}" href="{image.link}">
<img src="${image.path}">
</a>
To read more about this attribute. Read examples here https://docs.adobe.com/content/help/en/experience-manager-htl/using/htl/block-statements.html
Hop it helps!
Nupur