cxlive v0.0.0
CX Live
This repository demonstrates some customisations on top of Spartacus. You can clone the repo and build, but the different branches can also be run in stackblitz.
Demo 1: Getting started
The getting started demo shows:
- pull in dependencies
- include the
StorefrontModule - Configure backend URL (OCC)
- Add the root storefront component
- Import the styles
Note: bootstrap is unfortunately published with a (peer)dependency to jquery, but we're not using it!
code https://stackblitz.com/github/tobi-or-not-tobi/cxlive/tree/cx-storefront
Demo 2: Runtime theming
This demonstrates the ability to add runtime (CSS variables) theme configurations. Althoug we demonstrate this at build time, those css variables are runtime configurable, opening a new world of configurable styling.
- Add custom css variables to styles.scss
- Add css variables to specific elements or components (i.e. y-add-to-cart)
code https://stackblitz.com/github/tobi-or-not-tobi/cxlive/tree/runtime-theming
Demo 3: Replace component
This demonstrates the ability to replace a component, using so-called outlets. We intend to have outlets for pages, page templates, CMS slots, component (types) or any fragments that we've marked as an outlet. In this we override the search for mobile users, and replace it with a search-as-you-speak capability.
- Override the SearchBoxComponent using an ng-template
- Implement a custom search component
- Add the custom search component in the template
note: the search box component will have an input feed the input directly into the search listing page. Since we don't have that today, we've add custom logic to navigate ourselfs to the search result page.
code https://stackblitz.com/github/tobi-or-not-tobi/cxlive/tree/custom-search
Demo 4: Override and leverage ctx data
This demonstrates an pdp image outlet that uses the data provided from the context. This means our customisation doesn't need to do the hard lifting to load data from OCC direcly (or use our ngrx store), it's available right away.
- Introduce type-safe outlet references (
ProductDetailOutletsorProductDetailsComponent.outlets) - Create an
ng-templateand register it to theIMAGESoutlet - Add a context attribute to the template (i.e.
let-model - Use the context attribute inside the template (i.e.
{{model | json}}
In order to see the demo, launch a PDP page (i.e. 1382080). The image section is been override.
Demo 5: Webcomponents
This demonstration shows that we can add a conmponent written in non-angular frameworks (i.e. vuejs, polymer, react). This allows devs to pick the tech of choice. There are a number of caveats to the use web components (aka custom elements) (despite the fact that firefox supports it since their latest release 🎉)
We've chosen an existing web component and aren't interested in the tech it was created with. We're extending demo 4 with a panzoom capability for the selected image.
- Use the same template we used in demo 4 (but use thumbnails here)
- Introduce an click event on the thumbnail to select the image
- Prepare the angular module to support custom elements (adding CUSTOM_ELEMENTS_SCHEMA to the module's schema's)
- Load an external web component (conditionally to demonstrate lazy loading of the web component)
- Use the web component and use the
srcinput to hand over the large image URL - (bonus, but cool) We're handing over our primary color (
--cx-g-color-primary) to the web components--img-pan-zoom-spinner-color, to ensure the same color is used in the loading spiner. This is the power of CSS variables who pierce through the shadow DOM!
code https://stackblitz.com/github/tobi-or-not-tobi/cxlive/tree/product-image-zoom
5 years ago