Adding components into footer experience fragment | Community
Skip to main content
supriya-hande
supriya-hande
July 19, 2023
Solved

Adding components into footer experience fragment

  • July 19, 2023
  • 2 replies
  • 1904 views

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? 

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 aanchal-sikka

@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.


@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?

2 replies

EstebanBustamante
Community Advisor and Adobe Champion
EstebanBustamanteCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
July 19, 2023

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
    Community Advisor
    aanchal-sikkaCommunity Advisor
    Community Advisor
    July 20, 2023

    Hello @supriya-hande 

     

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

    1. create footer component image(logo), text, navigation, copyright etc using data-sly-resource.
    2. 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
      supriya-handeAuthor
      July 20, 2023

      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 

        supriya-hande
        supriya-handeAuthor
        July 21, 2023

        @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 
        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:

        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: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)


        Such exception comes when we use wcm components but I am not using WCM component. Any idea which this error is coming?

         

        Terms & ConditionsAccessibility statement

        Loading footer...