@ourpeter/wayke-ecom-web-test v1.5.0

Wayke Ecom Web

Repository for Wayke Ecom Web.

Getting started

Install dependencies

npm install

Start the project

npm start

CSS specificity

⚠️ We can guarantee to not overwrite any of the host site CSS. But it is possible for the host site to overwrite the styling in Wayke Ecom. Read how to prevent such overwrites below.

All CSS class names are prefixed using the namespace .waykeecom-*. This will prevent this widget to overwrite any CSS applied to the website on which it is implemented on. However, we can not guarantee other CSS files won't overwrite the CSS in Wayke Ecom. This is due to it is impossible to protect against element selectors.

Reset styles and other necessary CSS targeting elements are selected using a nested selector based of the root element (#wayke-ecom) placed inside a :where() to prevent higher specificity than class name selectors.

Avoid using element selectors (div, a, span etc.) in you website's CSS. It is a good practice to only using classes as selectors. If you experience strange styling in the Wayke Ecom widget, this is probably the case.

Headings

To prevent multiple h1 on your website, Wayke Ecom does not include a h1 as root heading level. Instead the headings starts from h2.

Development

Deploy to npm: Update package.json version

npm run build
npm publish --access public

Bundles can be found at /dist

Create cdn-bundle Update package.json version

npm run build

Bundles can be found at /dist-cdn