Feature List - Intershop Progressive Web App 0.24 (EN)

1 Intershop PWA 0.24 - Feature List (EN) 

The release 0.24 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, framework contract, etc.) developers can easily tailor the Intershop Progressive Web App to their specific needs.

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 times of the pages are 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 access their customers via different channels and touch-points. 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.

2 Experience Management

2.1 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 internationalization library ngx-translate 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.
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.

2.2 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 Suite 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,...).

Search

Customers can search products by SKU or search terms found in product name, description or any other attribute that is indexed in the search index. Suggest 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).

Product Display & Actions

The following product data can be displayed:

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


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
  • E-mail a friend
  • Print product page
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 are currently not supported). Advanced variation handling for complex products with a lot of variations can be enabled via Feature Toggle.
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.
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.
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 on the shopping cart:

  • Update quantity
  • Delete item
  • Update cart
  • Apply promotion code
  • Add products to an order template
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 5 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.

AddressesInvoice and shipping addresses can be selected, added and modified during checkout. Addresses can be managed in My Account as well.
ShippingShipping options including shipping costs, delivery times and descriptions of the options are displayed and can be selected during checkout.
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
  • 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 a payment connector integration with a 3rd party payment service provider. The mentioned payment methods are currently supported by the Concardis Payment Connector.
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

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
Guest CheckoutCustomers can perform a checkout without registering at the store.
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
My Account Dashboard

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

  • Order Widget
  • Quote Widget
  • Wish List Widget
My Profile

Customers can view and edit the following profile data:

  • E-mail (changing e-mail currently supported without password check)
  • Password
  • Contact details
Order HistoryCustomers can view their order history and order details of all orders.
My QuotesCustomers can view a list of their quotes and quote details of all quotes.
My Wish Lists

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

My AddressesAddresses can be created, edited and deleted. Preferred shipping and invoice addresses can be defined.
Saved Payment InformationPayment details can be saved during checkout and viewed and deleted in the My Account area.
Order TemplatesCustomers 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.
Contact UsCustomers can send a request to customer service via a contact us form, specifying the reason or type of request, request details and contact information like phone number, e-mail address etc.
My Organization
User ManagementAdministrators of B2B customer organizations can view, add, edit and delete company account users and manage roles of users.
Content Management
Pages

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

  • Homepage
  • Static Content Pages
Components

The following CMS components are supported within the storefront:

  • Carousel
  • Container
  • Enhanced Image Teaser
  • Freestyle HTML
  • Image
  • Product List (manual)
  • Static Content Page Component
  • Landing Page Component
  • Text
  • Video
Personalized ContentPersonalized content can be displayed specifically for different customer segments.
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.
Privacy
Cookie InformationCustomers receive information about cookie usage during their first visit.
Configuration
Multisite 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-Theme Support One storefront installation can contain several different themes which can be switched for a different appearance.
Hybrid ApproachIt 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.
Feature Toggles

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

General:

  • Product Compare
  • Recently Viewed Products
  • Product Ratings

B2C features:

  • Wish Lists

B2B features:

  • B2B Customer Registration
  • Quoting
  • Advanced Variation Handling
  • Quick Order
  • Order Templates

Third-party integrations:

  • Tracking (Google Tag Manager)
  • Logging (Sentry)
  • Configurable Product (Tacton)

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.

Customer Support
Knowledge Base
Product Resources
Support Tickets