CODEWITHSUNDEEP
sap-commerce-cloud
user11223077
user11223077

Reputation:

How to include javascript and css files in Hybris?

I am trying to use a 3rd party javascript control, Owl Carousel. The way I am reading the documentations is this:

In the zip file from Owl Carousel there is a folder called owlcarousel that contains the javascript and another folder that contains all the supporting files which need to be copied to /modules/base-accelerator/yacceleratorstorefront/web/webroot/_ui/responsive/common. Then I simply need to go into the javaScript.tag file and add this line towards the end of the file:

<script src="${commonResourcePathHtml}/owlcarousel/owl.carousel.min.js"></script>

Upon trying that, I get all sorts of loading errors and no images are display, even without using the control. So my question is:

  1. What is the correct approach to include a 3rd party javascript?
  2. Is there any way to control which pages actually get a javascript file or do simply ALL the pages get ALL the javascript includes?

Upvotes: 2

Views: 3746

Answers (1)

geffchang
geffchang

Reputation: 3340

See if "Storefront Web Application Deconstructed" will help: https://help.sap.com/viewer/4c33bf189ab9409e84e589295c36d96e/1905/en-US/8af03fda8669101491e4aac2acaeb2dd.html

  • web/webroot
    • _ui: Contains the JavaScript and CSS styling for the current theme.
      • shared/js: Shared JavaScript used by desktop and responsive pages.
      • responsive/common: Commonly used style sheets, JavaScript libraries and images.
      • responsive/theme-alpha: The blue theme definition.
      • responsive/theme-lambda: The black theme definition.
  • WEB-INF
    • _ui-src: Contains JS testing, full libraries, and the Less files used to generate the CSS for a theme.
    • common/tld: The tag library descriptor files for the CMS and ycommerce tags.
    • config: Spring application context files.
    • lib: The libraries required by the storefront.
    • messages: The localization files.
    • tags: The tags that are used within views.
    • views: The JSP pages, fragments and CMS components.

Upvotes: 4

Related Questions