Document Tree
Document Properties
Kbid
31111Z
Last Modified
15-Jan-2024
Added to KB
15-Jan-2024
Public Access
Everyone
Status
Online
Doc Type
Feature Lists
Product
Intershop Progressive Web App
Feature List - Intershop Progressive Web App 5.0 (EN)

Intershop PWA 5.0 - Feature List (EN) 

Release 5.0 of the Intershop Progressive Web App comes with basic B2C and B2B e-commerce features and – more importantly – it is a reference application with architectural best practices for developers for topics like, e.g., initial page loads, server-side rendering, SEO, or modularization. Based on the reference application and the full set of synaptic commerce® APIs for B2C and B2B features (like quoting, cost center, etc.) developers can easily tailor the Intershop Progressive Web App to their specific needs.

New features of the current release are marked bold.

Benefits for CustomersBenefits for CompaniesBenefits for Developers

Smooth and responsive customer experience. This applies in particular to mobile devices with limited bandwidth. Since only data is transferred and not complete HTML pages, the response time of the pages is much shorter. With data held in the browser context, even page transitions are possible that do not require any communication with the server.


The digital world is developing rapidly. Mobile technologies, new end devices, and touch points open up new possibilities for companies to reach their customers via different channels and touchpoints. It is, therefore, worth switching to new adaptable strategies. inSPIRED Progressive Web App is the first step towards digital success. The top priorities are: adaptability, user-friendliness and flexible use on a wide variety of devices and low programmatic development and operating costs.

By using widely accepted technologies such as Angular, web developers can build on their existing knowledge and make Intershop Storefront development easier than ever before.

Experience Management

Intershop Progressive Web Application

ToolsetWeb Developers can use the Intershop PWA to implement storefront applications based on the Intershop Commerce Management (ICM) WebShop REST API and/or 3rd Party Systems.
TemplatesTemplates contain the HTML that is rendered for the browser and displays the UI.
ServicesServices implement business functionality using TypeScript. Services should have a single responsibility by encapsulating all functionality required in it. The API to a service should be as narrow as possible because services are used throughout the application. It is also possible to combine functionality of multiple services in another more general service if necessary.
ComponentsComponents are small and (mostly) independent bridges between services and templates that prepare data for display in templates and collect input from the user to interact with services. Data Binding links the template with methods and properties from the component.

The components handling the templates should only handle view logic and should not implement too much specific functionalities. If the component does more than just providing data for the template, it might be better to transfer this to service instances instead.

Multiple components and their templates are then composed to pages.

RoutesRoutes enable navigation from one view to the next as users perform application tasks. Routes can pass optional parameters along to the supporting view component that help it decide what specific content to present.
ModelsModels are definitions of the data that are handled within the application.
StoreThe store is the central representation of all data of the application.
StateThe state is seen as the single source of truth for getting information of the current application state. All information should be held in the store. There is only one immutable state per application, which is composed of sub-states. To get information out of the state, selectors have to be used. Changing the state can only be done by dispatching actions.
SelectorsSelectors are used to retrieve information about the current state from the store. The selectors are grouped in a separate file. They always start the query from the root of the state tree and navigate to the required information. Selectors return Observables which can be held in containers and be bound to in templates.
ActionsActions are used to alter the current state via reducers or trigger effects. Action creators are held in a separate file. The action class contains a type of the action and an optional payload. To alter the state synchronously, reducers have to be composed. To alter the state asynchronously, effects are used.
ReducersReducers alter the state synchronously. They take the previous state and an incoming action to compose a new state. This state is then published and all listening components react automatically to the new state information. Reducers should be simple operations which are easily testable.
Effects

Effects use incoming actions to trigger asynchronous tasks like querying REST resources. After successful or erroneous completion an effect might trigger another action as a way to alter the current state of the application.

SchematicsSchematics allow for easy creation of code artifacts that automatically comply to the coding guidelines of the project, saving a lot of time for repetitive tasks and increasing code quality.
Client-side error trackingJavaScript errors occurring during the usage of the Intershop Progressive Web App can be tracked via integration of a 3rd party tracking tool (Sentry).
LocalizationIntershop Progressive Web App uses a mix of Angular's internationalization tools (i18n) and the ngx-translate internationalization library for localization.
Server-side renderingWith Angular Universal a static app version is generated that is easily searchable, linkable, and navigable without JavaScript. It also makes a site preview available since each URL returns a fully-rendered page. Server-side rendering can be configured differently for different user agents, e.g., being enabled for search engines but disabled for end users.
Integrated Content Management

Content managed in Intershop Commerce Management can be integrated into the Intershop Progressive Web App. The content model and integration points in the storefront can be customized according to project-specific needs.

Deployment ScriptsTemplates for Kubernetes Deployments and DevOps for Microsoft Azure are supplied as part of the project.
ThemesIntershop Progressive Web App provides multiple themes support and a configurable theme.

Functional Scope

Storefront

The Intershop Progressive Web App is an essential component of Intershop's new cloud strategy. Due to the clear separation of the Intershop Commerce Platform back-end from the visualization layer and the introduction of clearly defined synaptic commerce® APIs, partners and customers can design and customize the Intershop Storefront easier than ever before. Extensive knowledge of ISML and pipelines or the deployment of new layouts in the Intershop Commerce Management System are no longer necessary.

Shopping Experience
Catalog Browsing

Customers can browse categories by different means, like category navigation, breadcrumbs, or category lists.

Product Browsing

Products can be browsed by category and filtered via search filters (supported filter types are dropdown and single or multi-select checkbox). Product lists support endless scrolling. Product lists can be sorted by different sorting criteria (relevance, price, etc.)

Search

Customers can search products by SKU or search terms found in the product name, description, or any other attribute that is indexed in the search index. Suggested search supports search term suggestions. Search results can be filtered via search filters (supported filter types are dropdown, single or multi-select swatch image, and single or multi-select checkbox). Search supports customer-specific assortments and displays only search results that are valid for the storefront user.

Product Display & Actions

The following product data can be displayed:

  • Multiple product images, including product zoom
  • Product prices
  • Inventory
  • Description
  • Shipping information
  • Product labels (New, Top Seller, Sale)
  • Product ratings
  • Product attachments
  • Product reviews

The following actions can be performed with products:

  • Add to cart
  • Add to compare list
  • Add to quote
  • Add to wishlist
  • Add to order template
  • Add a review
  • E-mail a friend
  • Print product page
  • Product notification for in stock and price
Product VariationsProducts with different variations are displayed in product lists, product detail pages, cart, wishlist, quote details and order history. The selection of the available options is supported via dropdown, swatch images/ HTML color codes and their combinations. Advanced variation handling for complex products with a lot of variations can be enabled in the ICM backoffice (Channel Preferences > Product Variations > List View).
Product BundlesProduct bundles with all related bundled products are displayed on product detail pages and in the shopping cart.
Retail SetsRetail sets with all related items are displayed on product detail pages and can be added to the cart all at once or individually.
Personalized Product and Category DataCategory, product, and promotion data are displayed in a personalized way for the storefront user.
Scaled PricesScaled prices are displayed in product lists, product detail pages, product compare pages, wish lists (B2C), and order templates (B2B), and are used throughout the checkout process.
Configurable Products

Support for configurable products via Tacton CPQ integration:

  • Configure product
  • Send Proposal Request to Tacton
Related Products

Related products of a certain product are displayed on product detail pages. The following types are supported:

  • Replacement   
  • Cross-selling
  • Up-selling
  • Accessory
  • Follow-up
  • Different order unit
  • Spare parts
PromotionsPromotion messages and prices are displayed in product detail, product listing, cart and checkout pages.
Store Locator Functionality

Store Locator functionality is available and configurable via feature toggle. 

Store Locator with Google Maps integration is activated by default for the B2B theme. Store Finder without Google Maps integration is the default configuration for the B2C theme.

Maintenance PageThe maintenance page is shown if the ICM server is in maintenance mode (REST request response with a 503 error).
Accessibility

The following criteria regarding digital accessibility are implemented:

  • All clickable elements are available via keyboard.
  • Localized aria labels in forms are provided.
Checkout
Shopping Cart

The following data of the shopping cart is displayed:

  • Items with inventory information, delivery time, quantity, single price, and total price
  • Subtotal, tax, shipping charges, payment costs, and total of the cart
  • Applied promotions

The following actions can be performed in the shopping cart:

  • Update quantity
  • Delete item
  • Update cart
  • Clear cart
  • Apply promotion code
  • Assign cost center
  • Add products to an order template
  • Quick order as B2B customer
Quick Order

B2B customers can add multiple products to the cart at once by entering product ID and quantity. By default, the user can add five products. Customers can extend the form with additional lines, each with input fields for product ID and quantity.

Using the CSV upload, large numbers of products can be added in one step.

RequisitionsB2B customers can create a requisition, which starts an approval process.
AddressesInvoice and shipping addresses can be selected, added, and modified during checkout. Addresses can be managed in My Account as well. Addresses can be checked by AddressDoctor.
ShippingShipping options including shipping costs, delivery time, and descriptions of the options are displayed and can be selected during checkout. B2B customers will be able to send messages to merchants.
Payment

Payment options are displayed and can be selected during checkout.

The following payment methods are currently supported:

  • Credit Card
  • Direct Debit
  • Online payment methods, e.g.,
    • Alipay
    • Bancontact
    • eps
    • iDEAL
    • PayPal
    • Sofort
    • WeChat Pay
    • Cybersource credit card
    • Payone credit card
    • Payone Eps
  • Offline payment methods, e.g.,
    • Invoice
    • Cash on delivery
    • Cash in advance

Payment details can be saved, and saved payment details can be selected during checkout.

Note

Most payment methods require payment connector integration with a 3rd party payment service provider. For more information regarding available payment service provider integrations, see Overview - Payment Extensions
Review

All details of the order are displayed before order placement:

  • Invoice address
  • Shipping address
  • Shipping method
  • Payment method
  • Items with inventory information, delivery time, quantity, single price, and total price
  • Subtotal, tax, shipping charges, payment costs, and total of the cart
  • In case a buyer or cost center approval is required, approval details are displayed

The terms and conditions need to be accepted before placing an order.

Receipt

A summary of the order is displayed after placing an order, including:

  • Invoice address
  • Shipping address
  • Shipping method
  • Payment method
  • Items with inventory information, delivery time, quantity, single price, and total price
  • Subtotal, tax, shipping charges, payment costs, and total of the cart
  • Applied promotions
  • In case a buyer or cost center approval is required, approval details are displayed
Contact UsCustomers can send a request to customer service via the Contact Us form, specifying the reason or type of request, request details and contact information like phone number, e-mail address, etc.
Guest CheckoutCustomers can perform a checkout without registering at the store.
OCI Punchout (B2B)

B2B customers can integrate the storefront into their procurement solution via OCI Punchout. The following features are supported:

  • OCI Punchout Configuration
  • OCI checkout: Log in to the storefront as an OCI Punchout user, browse visible parts of the storefront, add products to the cart, transfer the cart back to the caller 
  • Product details: Log in to the storefront as an OCI Punchout user, display product details in the OCI Punchout format
  • Validate product: Log in to the storefront as an OCI Punchout user, automatically transfer product details in the OCI Punchout format for a given product id and quantity
  • Background search: Log in to the storefront as an OCI Punchout user, have all products displayed in the OCI Punchout format that match a given search query
cXML Punchout (B2B)

B2B customers can integrate the storefront into their procurement solution via cXML Punchout. The following features are supported:

  • cXML checkout: Log in to the storefront as a cXML Punchout user, browse visible parts of the storefront, add products to the cart, transfer the cart back to the caller 
My Account
Login & Registration

The following actions are supported:

  • Register as B2C customer (simple registration currently not supported)
  • Register as B2B customer 
  • Log into your customer profile (B2C and B2B)
  • Forgot password
  • Customer Approval
SSO Login

Login via an external identity provider is supported. Additional users can be invited and can create a new account via SSO.

  • B2C: The implementation is tested with Keycloak, Azure AD, and Auth0.
  • B2B: The implementation is tested with Auth0.
My Account Dashboard

The My Account dashboard provides a navigation overview and the following widgets:

  • Order Widget
  • Quote Widget
  • Wish List Widget
  • Requisition Widget
  • Approval Widget
  • Order Template Widget
  • Cost Center Widget
Purchases
Order HistoryCustomers can view their order history and order details of all orders.
Wish ListsCustomers can view a list of their wish lists and wish list details of all wish lists. Customers can create, edit, and delete wish lists, set a preferred wish list, add and remove products from wish lists, move products between wish lists, and add products to the cart from wish lists.
Requisitions

B2B customers can view their requisitions divided into the following areas:

  • Pending
  • Approved
  • Rejected
QuotingCustomers can view a list of their quotes and quote details of all quotes.
Order TemplatesB2B customers can view a list of their order templates and details of all order templates. Customers can create, edit, and delete order templates, add and remove products from order templates, move products between order templates, and add products to the cart from order templates.
My Approvals
Approvals

Buyer approvers or cost center managers of B2B organizations can view the requisitions that are supposed to be processed or are already processed divided into the following areas:

Buyer approvers or cost center managers of B2B organizations can approve and reject requisitions.

My Profile
Profile Settings

Customers can view and edit the following profile data:

  • E-mail (changing e-mail currently supported without password check)
  • Password
  • Contact details
Payment Payment details can be saved during checkout and viewed and deleted in the My Account area.
NotificationsProduct notifications for availability in stock and for prices can be created on product detail page and viewed, updated, and deleted in the My Account area.
My Organization
AddressesAddresses can be created, edited, and deleted. Preferred shipping and invoice addresses can be defined. Addresses can be checked by AddressDoctor.
User ManagementAdministrators of B2B customer organizations can view, add, edit, and delete company account users and manage roles and budget limits of users. 
Cost Center ManagementAdministrators of B2B customer organizations or cost center managers can view, add, edit, and delete cost centers, assign users to the cost center, and manage cost center budgets as well as user-specific cost center budgets.
PunchoutAdministrators of B2B customer organizations can view, add, edit, and delete OCI or cXML Punchout users in order to automatically log in users to the storefront when opening a Punchout session.
Content Management
Pages/Includes

The following pages of the storefront can be managed by the integrated Content Management System (CMS):

  • Static Content Pages
  • Footer

On all other pages/routes the content is managed via Content Includes or View Contexts (Includes).

Components

The following CMS components are supported within the storefront:

  • Carousel
  • Container
  • Dialog
  • Enhanced Image Teaser
  • Freestyle HTML
  • Image
  • Product List (Manual)
  • Product List (Category)
  • Product List (Filter)
  • Product List (REST)
  • Static Content Page Component (with configurable side panel navigation)
  • Text
  • Video
View ContextsView Contexts are supported in the storefront.
Personalized ContentPersonalized content can be displayed specifically for different customer segments.
Demo ContentDifferent places within category, family, product, header navigation, search, and basket page are provided to present CMS demo content.
Design PreviewThe Design View Tab in ICM can be used to preview content changes in the PWA, but without any direct editing capabilities.
Design View SupportThe PWA is ready to be rendered in the Design View (Beta version).
Localization
Preferred LanguageThe user's preferred language can be saved as a cookie.
Manage TranslationsAll texts of the PWA can be managed and translated via the Intershop Commerce Management back office. Text changes are immediately reflected within the PWA without the need for a deployment.
Analytics
Tracking IntegrationAnalytics tools can be integrated via Google Tag Manager. Tracking of page visits via Google Analytics are supported.
Search Engine Optimization
Page Title and Meta Tags

Page Title and Meta Tags are set in the PWA. For product and category pages the values provided via REST API are used.

SEO friendly localized URLsSEO friendly localized URLs are supported for category pages, product list pages and product detail pages, including the full category path.
Privacy
Cookie InformationCustomers receive information on the use of cookies and can configure their cookie consent.
Configuration
Multi-Site SupportOne storefront installation can be used to connect to several Intershop Commerce Management channels. Mapping rules can be defined for incoming URLs to map to respective REST endpoints.
Multi-System SupportOne PWA installation can be connected to several Intershop Commerce Management systems, e.g. to edit and live clusters within different environments.
Multi-Theme Support One storefront installation can contain several different themes which can be switched for a different appearance.
Hybrid Approach

It is possible to run the PWA in a hybrid mode with the Responsive Starter Store. Some parts of the storefront can run in the PWA and others in the Responsive Starter Store. Linking between the two storefront parts is supported as well as handover of users (authentication token) and baskets. It is possible to configure which features are supported by which storefront.

  • Support for two separate applications
Feature Toggles

Storefront features can be activated and deactivated via configuration of feature toggles. The following features can be activated or deactivated:

General:

  • Contact Us
  • Product Compare
  • Product Ratings
  • Product Notifications
  • Recently Viewed Products
  • Store Locator
  • Preferred Language Selection

B2B features:

  • B2B Customer Registration
  • Cost Centers
  • Message to Merchant
  • Quoting
  • Quick Order
  • Order Templates
  • Punchout

B2C features:

  • Wish Lists
  • Guest Checkout

Third-party integrations:

  • Tracking (Google Tag Manager)
  • Logging (Sentry)
  • Configurable Product (Tacton)
    • Maps (Google Maps)
  • Address Validation (AddressDoctor)
Customer Engagement Center (CEC)
Co-browsing support

A contact center agent can log in to the PWA as a user without having the user's credentials to see what the page looks like for the user.

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.
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.