Intershop Progressive Web App

The Intershop PWA uses the ish-payment-paypal component to dynamically load the PayPal SDK and render payment elements. The component's behavior (which elements are shown) is determined by the configured adapter type and the current page type.

Supported features include:

• Buttons: Standard PayPal checkout buttons.
• Messages: Promotional 'Pay Later' messaging.
• CardFields: Hosted credit card input fields.
• GooglePay: Google Pay button and integration.
• ApplePay: Apple Pay button and integration.

<ish-payment-paypal></ish-payment-paypal>

A Product Context provides simplified, easy access to all data related to a single product. It stores the sku and an optional quantity, then delegates other product information from the application's state management.

Product contexts are hierarchical and scoped using Angular's ElementInjector. This means they are only available to elements within the document subtree where the context was introduced. This allows for multiple contexts to exist on a single page (e.g., one main context for a product page and additional contexts for recommended or bundled products, or individual contexts for every item in a product listing).

The FieldLibrary is a central service in the Intershop PWA that enables the reuse of FormlyFieldConfig objects. It acts as a repository where predefined field configurations (singular) and configuration groups (collections of fields) are stored and can be injected into any component that uses Formly. This allows developers to maintain consistent form field behavior and styling across the application.

To use it, you must inject the FieldLibrary into your component's constructor.

constructor(private fieldLibrary: FieldLibrary){}

// Retrieve a single field
this.fields = [
  this.fieldLibrary.getConfiguration('firstName'),
  this.fieldLibrary.getConfiguration('lastName')
];

To improve SEO, route handling for products, categories, and content pages has been reworked to include hierarchies and specific ID markers:

• Categories: ID marker changed from cat to ctg.
• Products: ID marker changed from sku to prd.

Authentication tokens have a predefined lifetime. To prevent expiration, the PWA uses a refresh mechanism.

When 75% of the token's lifetime has passed (this threshold is configurable in the oAuth library), an info event is emitted. This triggers the setupRefreshTokenMechanism$ function within the oAuth configuration service to renew the token. As long as the PWA remains open in the browser, the token will be continuously renewed and will not expire.

In version 11.0.0, REST requests for CMS view context data append a resourceSetId (the cartridge name) by default to improve performance.

• The default ID is app_sf_base_cm, defined in CMSService.
• If your project uses a different resource set ID, you must provide it via the resourceSetId input on the <ish-content-viewcontext> component.
• Alternatively, you can override the defaultResourceSetId in CMSService to apply a global change.

Requirement: Using view context REST requests with the added resource set ID requires ICM 12.1.0 or later.

<ish-content-viewcontext
  resourceSetId="custom_cartridge_name"
  viewContextId="viewcontext.include.product.base.top"
  [callParameters="{ Product: product.sku }"
/>

The PaypalConfigService dynamically loads the appropriate PayPal SDK based on the selected adapter. To prevent conflicts when multiple SDK instances are required (e.g., different locales or currencies), the service uses unique namespaces.

Access the PayPal object on the window using the following namespace formats:

• PPCP_<payment_method_id> for Buttons and CardFields.
• PPCP_MESSAGES for Pay Later Messages.

// Accessing the PayPal object via its namespace
const paypalObject = window['PPCP_FAST_CHECKOUT'];