Document Tree
Document Properties
Kbid
3082L6
Last Modified
01-Jun-2023
Added to KB
18-Apr-2023
Public Access
Everyone
Status
Online
Doc Type
Concepts
Product
Intershop Progressive Web App
Concept - Intershop Progressive Web App - Styling & Behavior

The visual design (styling) and the interaction design (behavior) of the Intershop Progressive Web App is derived from the Responsive Starter Store with some changes (e.g., the header) to improve and modernize the customer experience and to provide an easy optical distinction between the two Intershop storefronts.
While the Responsive Starter Store is based on a customized/themed Bootstrap 3, the Intershop Progressive Web App styling was migrated to build upon the current version of Bootstrap 4.
This also means that the Intershop Progressive Web App styling is now based on Sass.

Bootstrap Integration

The styling integration is configured in the /src/themes/main.scss of the project where Bootstrap together with the customizations is configured.

Instead of the Bootstrap 3 Glyphicons, the current styling uses free solid icons of Font Awesome.

The styling itself is integrated into the project as global style via a style.scss that is referenced in the angular.json and is compiled automatically (see also Guide - Themes).
Throughout the whole Intershop Progressive Web App, there are almost no component-specific styleUrls or styles properties.

The Javascript part of Bootstrap for the behavior is not directly used from the Bootstrap dependency since this implementation is jQuery based and not really suited to work in an Angular environment.
For Bootstrap 4, ng-bootstrap provides Bootstrap widgets the angular way.
Using these components works best with the styling taken from the Responsive Starter Store.
However, the generation and structure of the HTML for the Angular Bootstrap differs from the HTML working with the original jQuery based bootstrap.js.
Adaptions and changes in this area are inevitable.

Assets

The assets folder is the place for any static resources like images, colors, etc., that are used by the storefront styling.

Fonts

Currently the default font families for the Intershop Progressive Web App Roboto and Roboto Condensed are defined as npm dependency.

Icons

As described above, solid Font Awesome icons are used.
To integrate an icon:

  1. Open the appropriate page icon details, e.g. https://fontawesome.com/icons/print?s=solid&f=classic
  2. Copy only the name of the icon without the "fa-" prefix, in this case print
<i class="fa-solid fa-print"></i>
  1. Use the icon name with following syntax
<fa-icon [icon]="['fas', 'print']"></fa-icon>

If an icon is not available yet, you need to add it to src\app\core\icon.module.ts in the import {} and the constructor(){}.

Optimization

The PWA uses PurgeCSS for bundled styles optimization.
Please read the additional documentation for information on the usage and configuration of PurgeCSS in the Intershop PWA.

References

Guide - Themes

Disclaimer
The information provided in the Knowledge Base may not be applicable to all systems and situations. Intershop Communications will not be liable to any party for any direct or indirect damages resulting from the use of the Customer Support section of the Intershop Corporate Web site, including, without limitation, any lost profits, business interruption, loss of programs or other data on your information handling system.
The Intershop Knowledge Portal uses only technically necessary cookies. We do not track visitors or have visitors tracked by 3rd parties. Please find further information on privacy in the Intershop Privacy Policy and Legal Notice.
Home
Knowledge Base
Product Releases
Log on to continue
This Knowledge Base document is reserved for registered customers.
Log on with your Intershop Entra ID to continue.
Write an email to supportadmin@intershop.de if you experience login issues,
or if you want to register as customer.