Styles and JS in the Customer area

1. Building assets requires Node.js and Yarn

2. Core functions and several libraries (located in web/customer/corejs), as well as styles, are compiled using Webpack.

3. Resources are divided into bundles by “zones”: “common”, “account”, “product”, “checkout”, “cart”, and “page”.

   • Bundles are connected in twigs: src/classes/XLite/View/AssetsCSSBundles.php (src/templates/web/customer/header/parts/css_bundle.twig) and src/classes/XLite/View/AssetsJSBundles.php (src/templates/web/customer/jscontainer/body.twig).
   • The build process also uses the file src/assets/web/customer/asset-bundles.json.

4. General asset structure in web/customer:

    --assets
      |--web
      |  |--customer
      |  |  |--corejs
      |  |  |  |--imports
      |  |  |  |--plugins
      |  |  |  |  |--src
      |  |  |--css
      |  |  |  |--common # Bundle/target
      |  |  |  |--product
      |  |  |  |--account
      |  |  |  |--cart
      |  |  |  |--checkout
      |  |  |  |--page
      |  |  |--js
      |  |  |  |--common # Bundle/target
      |  |  |  |--product
      |  |  |  |--account
      |  |  |  |--cart
      |  |  |  |--checkout
      |  |  |  |--page
      |  |  |--images

    --modules
      |--[Author]
      |  |--[ModuleName]
      |  |  |--public
      |  |  |  |--web
      |  |  |  |  |--customer
      |  |  |  |  |  |--css
      |  |  |  |  |  |  |--[bundle-name]
      |  |  |  |  |  |  |  |--[Author]
      |  |  |  |  |  |  |  |  |--[ModuleName]
      |  |  |  |  |  |--js
      |  |  |  |  |  |  |--[bundle-name]
      |  |  |  |  |  |  |  |--[Author]
      |  |  |  |  |  |  |  |  |--[ModuleName]

Styles

1. The base framework is Bootstrap 5 (https://getbootstrap.com/)

2. When styling, try to use standard Bootstrap classes (https://getbootstrap.com/)

3. For styling, the scss preprocessor is used.

4. Name imported SCSS files (except index.scss) with a leading underscore _ (for example, src/assets/web/customer/css/common/theme/_variables.scss). This is not mandatory but recommended.

5. Styles are imported in index.scss, for example: src/assets/web/customer/css/common/index.scss

   • Main styles web/customer/theme
   • Includes src/assets/web/customer/css/common/includes.scss
   • The skin overrides core files.
   • Each module must have an index.scss файл file at the following path: /modules/[Autor]/[Name]/public/web/customer/[bundle-type]/[bundle-name]/modules/[Author]/[Name]/index.scss
   • During the build process, modules are imported into src/assets/web/customer/css/common/modules.scss (this file is empty — do not delete it!!!!)

6. If a module (or skin) needs to extend or supplement an existing scss file, add the tag: // [hasParentStyles]

JS

1. jQuery from the core is still available and can continue to be used.

2. jQuery UI has been removed. For modals, tooltips, alerts, and similar UI elements, use Bootstrap 5 components instead.

3. To add custom JS in the customer area, simply place your file in the following path: /modules/[Autor]/[Name]/public/web/customer/[bundle-type]/[bundle-name]/modules/[Author]/[Name]/. All js files located in this directory will be loaded automatically.

4. amd can still be used (require - define)

5. It is also possible to import js via module exports. To do this, add the file: src/modules/[Author]/[Name]/public/web/customer/import/modules-imports.js and import the required modules there. JS modules should be placed in: src/modules/[Author]/[Name]/public/web/customer/js/[Author]-[Name]/filename.js

6. If you need to add a new UI component (e.g., a dropdown menu) to the customer area, first check the Bootstrap documentation to see if it’s already available in the distribution. Always try to use standard Bootstrap components whenever possible.

Miscellaneous

1. You can rebuild the assets using the command yarn install:assets (make exec ARGS='yarn install:assets'); The standard command xcart:assets:install also works The watch command starts tracking changes in resource files within the core and modules and automatically copies updates to starts the tracking of changes in the resource sources in the core and modules and the automatic copying to public/assets