Show different text and use different link according to the guide language
Hello, I have the following code in the homepage of my sandbox.
<!--Custom Cards-->
<li class="blocks-item">
<div class="blocks-item-link blocks-item-link--inline">
<img src="https://p3.zdassets.com/hc/theme_assets/1277568/200262349/knxlogo.png"/>
<h4 class="blocks-item-title">ETS Professional</h4>
<div id="link-wrapper">
<!--Your direct links for the articles goes here-->
<a class="link" href="en-us/categories/115000265345-ETS-Professional">Get started</a>
<a class="link" href="en-us/categories/201667825-ETS-Inside">User guide</a>
<a href="http://www.google.de">Tutorial</a>
</div>
<!--Your link for the whole card goes here-->
<!-- <a class="full-width-link" href="google.de"></a>-->
</div>
</li>
<!--Custom Cards End-->
</ul>
Together with the following CSS:
/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
list-style: none;
padding: 0;
}
@media (min-width: 768px) {
.blocks-list {
margin: 0 -26px 0 -15px;
}
}
.blocks-item {
border: 1px solid #ddd;
background-color: #f9f9f9;
box-sizing: border-box;
color: $color_1;
display: flex;
flex: 1 0 340px;
flex-direction: column;
justify-content: center;
max-width: 100%;
text-align: center;
margin-bottom:30px;
margin-right: 30px;
}
@media (max-width:768px){
.blocks-list {
margin: 0 -26px 0 -15px;
}
.blocks-item {
margin-right:15px;
}
}
.blocks-item i{
font-size:48px;
margin-bottom: 10px;
height: 128px;
}
.blocks-item i:before{
display: table-cell;
vertical-align: middle;
height: 128px;
}
@media (min-width: 1020px){
.blocks-item{
max-width: 30%;
}
}
@media (min-width: 768px) {
.blocks-item {
margin: 0 15px 30px;
}
}
.blocks-item-link--inline{
position: relative;
}
.blocks-item-link--inline a{
display: block;
position:relative;
z-index:20;
}
#link-wrapper{
margin-top:10px;
}
#link-wrapper a:after{
content:">";
padding-left:3px;
}
#link-wrapper a:hover:after{
text-decoration: none;
}
.blocks-item-link--inline .full-width-link {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index:10;
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
background-color: darken( $color_4, 2%);
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
color: darken($color_1,10%);
/*text-decoration: none;*/
}
.blocks-item-internal {
background-color: transparent;
border: 1px solid #ddd;
}
.blocks-item-internal .icon-lock::before {
content: "\1F512";
font-size: 15px;
bottom: 5px;
position: relative;
}
.blocks-item-internal a {
color: $color_3;
}
.blocks-item-link {
color: $color_1;
padding:20px;
}
.blocks-item-link:hover, .blocks-item-link:focus, .blocks-item-link:active {
text-decoration: none;
}
.blocks-item-title {
margin-bottom: 0;
font-weight: 500;
}
.blocks-item-description {
font-weight: 400;
margin: 0;
color: $color_3;
}
.blocks-item-description:not(:empty) {
margin-top: 4px;
}
Gives a result like the one attached.However, I would like to use different links for the 'Get started', 'User guide' and 'Tutorial' based on the languages selected in the guide. E.g. English, German, Greek, etc. Can someone help me to do it? I have been trying with the if statements in my source code, but I haven't managed it to do it.
Thanks a lot!
-
Hi @Vassilios Lourdas,
You can use dynamic content if you are on Professional or Enterprise Plans for links and add variants for different languages. Below are some post you might find useful -
- https://support.zendesk.com/hc/en-us/articles/203663356-Providing-multiple-language-support-with-dynamic-content-Professional-and-Enterprise-
- https://support.zendesk.com/hc/en-us/articles/203661426-Change-your-Help-Center-design-using-Dynamic-Content-Guide-Professional-
Let me know if this is what you are looking for.
Thanks
-
Hello @Trapta,
Thanks for pointing this out. I have already checked them, but I was not able to do it.
In fact, the dynamic content will change the text, but I need to have different link per language too, not only text.So, would you put the link in a dynamic field and include it in the html code of the homepage?
Thanks,
-
You can add HTML also in dynamic content. Try adding <a href="URL">TEXT</a> in dynamic content instead of text only.
Thanks
-
@Trapta,
I did the following:
<a class="link" href="{{dc.etsuserguide}}">{{dc.etsuserguide_title}}</a>
But I get an error1 error
not possible to access `dc` in `dc.etsuserguide`
I have already created the dynamic content for both. -
Try this,
Add this in the content of your DC
For English -
<a class="link" href="xyz.zendesk.com/hc/en-us">TITLE</a>
For another variant (for example - nl)
<a class="link" href="xyz.zendesk.com/hc/nl">TITLE</a>
Now use this DC placeholder {{dc.DC_PLACEHOLDER}} in your HTML.
Thanks
-
Hello @Trapta,
Sorry for insisting, but I am doing something wrong here and I cannot see it.
Could you please indicate me exactly where/how I should place it?
Thanks a lot for your assistance!
-
Ok, I found it!
I had to use a different reference of the dynamic content. The correct one is
{{dc 'etsuserguidenew'}}
Thanks a lot for your support! -
@Vassilios Lourdas, Glad you figured it out. Enjoy! :)
Cheers
Trapta
Please sign in to leave a comment.
8 Comments