Expand my Community achievements bar.

SOLVED

Experience fragment Localization issue

Avatar

Level 3

I am working on a project where experience fragments and pages are being translated. I am using an experience fragment in a page, when I got into a the language copy (translated ja_jp page) it not pulling the translated experience fragment. It's due to the folder structure of experience fragment which I can't change now. Is there any way to make translated experience fragment to show up in the page? 

When I copy the experience fragment at "content/experience-fragments/alexac/ja_jp/myef/master" to "content/experience-fragments/alexac/jp/ja_jp/myef/master". I can see the translated fragment in the page as expected. But unfortunately I can't move the content now.

 

Translated page path (example only): https://tester.com/content/alexac/jp/ja_jp/products/mypage.html

Experience fragment path: 

 

Localization documentation I was referring to:

https://experienceleague.adobe.com/docs/experience-manager-core-components/using/components/experien...

 

I would appreciate any advice from the community.

1 Accepted Solution

Avatar

Correct answer by
Level 3

I ended up creating a custom model class. As we have the path for Experience fragment in JCR of the page I modified the path as my custom requirement. Updated the experience-fragment's htl code used my model.

Just updated data-sly-resource@path value. 

Default Experience fragment code below for reference:

<!--/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright 2021 Adobe
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
<div data-sly-use.fragment="com.adobe.cq.wcm.core.components.models.ExperienceFragment"
     data-sly-use.template="core/wcm/components/commons/v1/templates.html"
     data-sly-test=${fragment.configured}
     data-sly-set.selector="content.${request.requestPathInfo.selectorString}"
     data-sly-resource="${@path=fragment.localizedFragmentVariationPath, selectors=selector, wcmmode='disabled'}"
     id="${fragment.id}"
     class="cmp-experiencefragment cmp-experiencefragment--${fragment.name}">
</div>
<sly data-sly-call="${template.placeholder @ isEmpty=!fragment.configured, classAppend='cmp-dd-experiencefragment'}"></sly>

 

2 Replies

Avatar

Community Advisor

Hi,

 

You can write custom class which implements ExperienceFragment and in initModel() update the XF path as per your requirement.

Avatar

Correct answer by
Level 3

I ended up creating a custom model class. As we have the path for Experience fragment in JCR of the page I modified the path as my custom requirement. Updated the experience-fragment's htl code used my model.

Just updated data-sly-resource@path value. 

Default Experience fragment code below for reference:

<!--/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright 2021 Adobe
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
<div data-sly-use.fragment="com.adobe.cq.wcm.core.components.models.ExperienceFragment"
     data-sly-use.template="core/wcm/components/commons/v1/templates.html"
     data-sly-test=${fragment.configured}
     data-sly-set.selector="content.${request.requestPathInfo.selectorString}"
     data-sly-resource="${@path=fragment.localizedFragmentVariationPath, selectors=selector, wcmmode='disabled'}"
     id="${fragment.id}"
     class="cmp-experiencefragment cmp-experiencefragment--${fragment.name}">
</div>
<sly data-sly-call="${template.placeholder @ isEmpty=!fragment.configured, classAppend='cmp-dd-experiencefragment'}"></sly>

 

page footer