Experience fragment Localization issue | Community
Skip to main content
bpeddapudi
July 14, 2022
Solved

Experience fragment Localization issue

  • July 14, 2022
  • 2 replies
  • 2075 views

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/experience-fragment.html?lang=en#localized-site-structure

 

I would appreciate any advice from the community.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by bpeddapudi

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

Ravi_Pampana
Community Advisor
Community Advisor
July 15, 2022

Hi,

 

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

bpeddapudi
bpeddapudiAuthorAccepted solution
August 5, 2022

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>