Issue when adding Component clientlib as embed in clientlib base | Adobe Higher Education
Skip to main content
V
Vani1012
Level 6
July 22, 2022
Risolto

Issue when adding Component clientlib as embed in clientlib base

  • July 22, 2022
  • 3 risposte
  • 1366 visualizzazioni

Hi All,

 

I have a clientlibrary(yp-poc.clientlibweather) for a component(suppose weather component) when I invoke clientlib in the component(suppose in weather.html)

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html">
<sly data-sly-call="${clientlib.all @ categories='YP-POC.clientlibweather'}">
</sly>

 

the css and js are working fine but when I added this clientlib as embed property in clientlib-base instead of calling clientlib inside component.html the css are disturbed and js isnt not all loading Can anyone help me on this issue.

 

Thanks,

Vani.

 

Questo argomento è stato chiuso alle risposte.
Migliore risposta di Aditya_Chabuku

Hi @vani1012 , I understand you want to embed your custom clientlibs in clientlib-base, But by doing so you are unnecessarily increasing the load on base clientlibs and also it's not a good practice. 

 

However, to include your clientlibs as a dependency into the base at <yourProject>/ui.frontend/clientlib.config.js

3 risposte

U
user1576
Level 3
July 22, 2022

The CSS and JS may get due to redundant data or multiple loading.

    ShaileshBassi
    Community Advisor
    ShaileshBassiCommunity Advisor
    Community Advisor
    July 22, 2022

    @vani1012 Can you try loading the Javascript and the css separately. Could be the possibility that you are calling the javascript in the header and the DOM elements are not initialized yet.

    You can separately call the css and the javscript by the below syntax:

    FOR CSS, INCLUDE IN HEADER 
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.css @ categories='mysite'}" data-sly-unwrap/>

FOR JS, INCLUDE IN FOOTER
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.js @ categories='mysite'}" data-sly-unwrap/>

    Hope this helps!

    Thanks

      V
      Vani1012Autore
      Level 6
      July 22, 2022
      • @shaileshbassi I don't want to call css and js in header and footer I just want to embed the components clientlibrary in clientlib-base
        Aditya_Chabuku
        Community Advisor
        Aditya_ChabukuCommunity AdvisorRisposta
        Community Advisor
        July 22, 2022

        Hi @vani1012 , I understand you want to embed your custom clientlibs in clientlib-base, But by doing so you are unnecessarily increasing the load on base clientlibs and also it's not a good practice. 

         

        However, to include your clientlibs as a dependency into the base at <yourProject>/ui.frontend/clientlib.config.js

        Thanks,Aditya Chabuku
          Termini e CondizioniAccessibility statement

          Loading footer...