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!

Trapta

November 20, 2017 12:50

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 -

Let me know if this is what you are looking for.

Thanks

Vassilios Lourdas

November 20, 2017 12:57

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,

November 20, 2017 13:17
Edited

@Vassilios Lourdas,

You can add HTML also in dynamic content. Try adding <a href="URL">TEXT</a> in dynamic content instead of text only.

November 20, 2017 13:33
Edited

@Trapta,

I did the following:

<a class="link" href="{{dc.etsuserguide}}">{{dc.etsuserguide_title}}</a>

But I get an error

1 error

not possible to access `dc` in `dc.etsuserguide`


I have already created the dynamic content for both.

November 20, 2017 13:44

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.

November 20, 2017 14:26

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!

November 20, 2017 14:31

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!

November 21, 2017 05:07
Edited

@Vassilios Lourdas, Glad you figured it out. Enjoy! :)

Cheers
Trapta

Show different text and use different link according to the guide language

8 Comments

Didn't find what you were looking for?