Adobe Experience Manager Sites & More

supriya-hande · 7/19/23

Hi All,

We have implemented a footer component which internally adds other components like image(logo), text, navigation, copyright etc using data-sly-resource in footer.html file. This footer.html file also have wrapper divs for each of this component and we have applied css to wrapper divs to create a proper structure of the footer component.
We have added this footer component into Footer experience fragment. But client wants an ability to add any text or embed component into footer inside this Footer experience fragment. I can add component into footer on top of existing image or text component using + symbol(add component) but when I refresh this footer XF I cant see this these component. I think this is becoz footer.html is overwriting footer XF.

I tried removing footer component from XF and added individual components but I dont know how to achieve that html structure for footer like wrapper divs and applying css to them.

Does anyone have idea on how to implement this?

aanchal-sikka · 7/20/23

@supriya-hande

You mentioned that "footer.html" is affecting the display of the inserted components.

To confirm the same, I had requested you to cross-check via CRXDE, if the text component that was added, is visible in CRXDE as a node.

footer.html should only affect UI, not the persistence. Thus, please check following

- Did the dropped text component persist in repository via CRXDE?

- Any errors in logs when you drop the component or when you refresh the page?

Aanchal Sikka

View solution in original post

EstebanBustamante · 7/19/23

I don't know if I fully understood your question, but it sounds like you may need to add a container component within your footer component, that way, the author can add additional components as needed.

Take a look at the wknd site, and how the footer component is built for reference, in this Experience Fragment you have a component embedded as well as an empty responsive grid(container component) for extra components, which seems to me is what you are looking for.

I hope this helps.

Esteban Bustamante

aanchal-sikka · 7/19/23

Hello @supriya-hande

If you need the ability to add image/text etc next to Footer component , then:

create footer component image(logo), text, navigation, copyright etc using data-sly-resource.
Update policy of the OOTB container component found in XF component.
1. Allow Footer component
2. Image component
3. text component

This way the authors would be able to add an Image/text component next to footer.

If you need the ability to add image/text etc inside Footer component itself, then:

add a container inside Footer
Allow authors to add image/text to the container.

Aanchal Sikka

supriya-hande · 7/19/23

Hi @aanchal-sikka

Thanks for your reply. I tried the second way. I want to add components inside footer component. I added container and tried adding text component but when I refresh XF, text component is getting removed from footer. I think footer.html code is overwriting component inside footer. Is there any other way..?

Thanks,

Supriya

aanchal-sikka · 7/19/23

@supriya-hande

When you say that the text component is removed. Is it removed from CRXDE as well? Or does it exist, but not visible in HTML?

Aanchal Sikka

supriya-hande · 7/19/23

@aanchal-sikka

When I add text component in footer component which is added in XF and refresh that XF, its not visible. I can only see component those are added in footer.html by using data-sly-resource.

aanchal-sikka · 7/20/23

@supriya-hande

You mentioned that "footer.html" is affecting the display of the inserted components.

To confirm the same, I had requested you to cross-check via CRXDE, if the text component that was added, is visible in CRXDE as a node.

footer.html should only affect UI, not the persistence. Thus, please check following

- Did the dropped text component persist in repository via CRXDE?

- Any errors in logs when you drop the component or when you refresh the page?

Aanchal Sikka

supriya-hande · 7/20/23

@aanchal-sikka

1. I can see the dropped text component is present in repository via CRXDE. See below. I added multiple components and I can see those

2. I checked logs and there is error below.

0.07.2023 15:41:58.325 *ERROR* [[0:0:0:0:0:0:0:1] [1689847918230] GET /content/experience-fragments/my-program/footer/footer-members.html HTTP/1.1] org.apache.sling.scripting.javascript.wrapper.ScriptableResource Unable to adapt object.

java.lang.ClassNotFoundException: [JavaPackage org.apache.sling.api.resource.ValueMap]

at org.apache.sling.commons.classloader.impl.ClassLoaderFacade.loadClass(ClassLoaderFacade.java:158) [org.apache.sling.commons.classloader:1.4.4]

at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:521)

at org.apache.sling.scripting.javascript.wrapper.ScriptableResource.jsFunction_adaptTo(ScriptableResource.java:298) [org.apache.sling.scripting.javascript&colon;3.1.4]

at jdk.internal.reflect.GeneratedMethodAccessor204.invoke(Unknown Source)

at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)

at java.base/java.lang.reflect.Method.invoke(Method.java:566)

at org.mozilla.javascript.MemberBox.invoke(MemberBox.java:126)

at org.mozilla.javascript.FunctionObject.call(FunctionObject.java:387)

at org.mozilla.javascript.optimizer.OptRuntime.call1(OptRuntime.java:32) [org.apache.servicemix.bundles.rhino:1.7.7.1_1]

at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_resource_js_4._c_getProperties_3(/libs/sling/sightly/js/internal/resource.js:31)

at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_resource_js_4.call(/libs/sling/sightly/js/internal/resource.js)

at org.mozilla.javascript.optimizer.OptRuntime.callName(OptRuntime.java:63) [org.apache.servicemix.bundles.rhino:1.7.7.1_1]

at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_resource_js_4._c_Resource_4(/libs/sling/sightly/js/internal/resource.js:56)

at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_resource_js_4.call(/libs/sling/sightly/js/internal/resource.js)

at org.mozilla.javascript.BaseFunction.construct(BaseFunction.java:359)

at org.mozilla.javascript.ScriptRuntime.newObject(ScriptRuntime.java:2505)

at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_sly_js_3._c_anonymous_2(/libs/sling/sightly/js/internal/sly.js:27)

at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_sly_js_3.call(/libs/sling/sightly/js/internal/sly.js)

at org.apache.sling.scripting.sightly.js.impl.jsapi.SlyBindingsValuesProvider.addBinding(SlyBindingsValuesProvider.java:177) [org.apache.sling.scripting.sightly.js.provider:1.2.6]

at org.apache.sling.scripting.sightly.js.impl.jsapi.SlyBindingsValuesProvider.processBindings(SlyBindingsValuesProvider.java:134) [org.apache.sling.scripting.sightly.js.provider:1.2.6]

at org.apache.sling.scripting.sightly.js.impl.jsapi.ProxyAsyncScriptableFactory$ShadowScriptableObject.get(ProxyAsyncScriptableFactory.java:78) [org.apache.sling.scripting.sightly.js.provider:1.2.6]

at org.mozilla.javascript.ScriptableObject.getProperty(ScriptableObject.java:2269)

at org.mozilla.javascript.ScriptRuntime.getObjectProp(ScriptRuntime.java:1514)

at org.mozilla.javascript.ScriptRuntime.getObjectProp(ScriptRuntime.java:1507)

at org.mozilla.javascript.gen._libs_wcm_foundation_components_page_headlibs_js_513._c_anonymous_1(/libs/wcm/foundation/components/page/headlibs.js:26)

at org.mozilla.javascript.gen._libs_wcm_foundation_components_page_headlibs_js_513.call(/libs/wcm/foundation/components/page/headlibs.js)

at org.mozilla.javascript.ContextFactory.doTopCall(ContextFactory.java:393)

I googled it "Unable to adapt object" but this error was coming for older version when we use WCM components. I am not using WCM component.

supriya-hande · 7/21/23

hi @aanchal-sikka

1. I can see those dropped text component and other components s persist in repository via CRXDE:

2. But I am getting exception in error log as below:
ERROR* [[0:0:0:0:0:0:0:1] [1689853598966] GET /content/experience-fragments/my-program/footer/footer-advisers.html HTTP/1.1] org.apache.sling.scripting.javascript.wrapper.ScriptableResource Unable to adapt object.
java.lang.ClassNotFoundException: [JavaPackage org.apache.sling.api.resource.ValueMap]
at org.apache.sling.commons.classloader.impl.ClassLoaderFacade.loadClass(ClassLoaderFacade.java:158) [org.apache.sling.commons.classloader:1.4.4]
at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:521)
at org.apache.sling.scripting.javascript.wrapper.ScriptableResource.jsFunction_adaptTo(ScriptableResource.java:298) [org.apache.sling.scripting.javascript&colon;3.1.4]
at jdk.internal.reflect.GeneratedMethodAccessor204.invoke(Unknown Source)
at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.base/java.lang.reflect.Method.invoke(Method.java:566)
at org.mozilla.javascript.MemberBox.invoke(MemberBox.java:126)
at org.mozilla.javascript.FunctionObject.call(FunctionObject.java:387)
at org.mozilla.javascript.optimizer.OptRuntime.call1(OptRuntime.java:32) [org.apache.servicemix.bundles.rhino:1.7.7.1_1]
at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_resource_js_4._c_getProperties_3(/libs/sling/sightly/js/internal/resource.js:31)
at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_resource_js_4.call(/libs/sling/sightly/js/internal/resource.js)
at org.mozilla.javascript.optimizer.OptRuntime.callName(OptRuntime.java:63) [org.apache.servicemix.bundles.rhino:1.7.7.1_1]
at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_resource_js_4._c_Resource_4(/libs/sling/sightly/js/internal/resource.js:56)
at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_resource_js_4.call(/libs/sling/sightly/js/internal/resource.js)
at org.mozilla.javascript.BaseFunction.construct(BaseFunction.java:359)
at org.mozilla.javascript.ScriptRuntime.newObject(ScriptRuntime.java:2505)
at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_sly_js_3._c_anonymous_2(/libs/sling/sightly/js/internal/sly.js:27)
at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_sly_js_3.call(/libs/sling/sightly/js/internal/sly.js)
at org.apache.sling.scripting.sightly.js.impl.jsapi.SlyBindingsValuesProvider.addBinding(SlyBindingsValuesProvider.java:177) [org.apache.sling.scripting.sightly.js.provider:1.2.6]
at org.apache.sling.scripting.sightly.js.impl.jsapi.SlyBindingsValuesProvider.processBindings(SlyBindingsValuesProvider.java:134) [org.apache.sling.scripting.sightly.js.provider:1.2.6]
at org.apache.sling.scripting.sightly.js.impl.jsapi.ProxyAsyncScriptableFactory$ShadowScriptableObject.get(ProxyAsyncScriptableFactory.java:78) [org.apache.sling.scripting.sightly.js.provider:1.2.6]
at org.mozilla.javascript.ScriptableObject.getProperty(ScriptableObject.java:2269)
at org.mozilla.javascript.ScriptRuntime.getObjectProp(ScriptRuntime.java:1514)

I googled this error: Unable to adapt object but this issue comes when we use wcm component and am not using any wcm component in footer
Any idea why this error is coming?

supriya-hande · 7/21/23

@aanchal-sikka
1. I can see those dropped text component persist in repository via CRXDE?

but I am getting one exception in error logs once I refresh page: