header-mobile-bg

Top searches

Integrating Salesforce PWA Kit for composable storefronts: Breaking it down

PhilipHemptenmacher_retu_sRGB

Philip Hemptenmacher

CoreMedia, a leading digital experience platform provider, has a strong track record of integrating various frontend technologies and frameworks for renowned brands worldwide. As a long-standing Salesforce Accelerate Build Partner, CoreMedia has successfully implemented multiple projects for global clients using the prefabricated Salesforce Commerce Cloud integration, supporting both SFRA and SiteGenesis headful frontend solutions.

Salesforce PWA Kit for Composable Storefronts

In recent months, Salesforce has made significant improvements to their PWA Kit, generating increased interest among CoreMedia's existing Salesforce Commerce Cloud customers. The PWA Kit now offers robust B2C functionality, making the transition to the headless world much smoother for both new and existing customers. CoreMedia Content Cloud, which follows a hybrid headless delivery model (headful as well as head-based), allows customers to migrate gradually to the PWA Kit while leveraging their existing content.

Figure 1: Salesforce PWA Kit for Composable Storefronts with content coming from CoreMedia Content Cloud

Hybrid Headless Delivery

CoreMedia has embraced the practice of separating content management from the presentation layer, even before the term "headless" gained popularity and modern headless frontend technologies emerged. CoreMedia's hybrid headless delivery model offers both traditional server-side rendering and a state-of-the-art GraphQL headless delivery service. Both technologies have their advantages and can be used in parallel with CoreMedia Content Cloud.

Integrating CoreMedia Content Cloud

Salesforce PWA Kit for Composable Storefronts is built on the well-established React.js framework, which makes adoption easier for many customers, including those already using CoreMedia Content Cloud. Integrating CoreMedia Content Cloud with the Salesforce PWA Kit involves the following steps:

  • Configure a GraphQL client, such as the Apollo Client for React.
  • Provide GraphQL queries to retrieve content for different page types (e.g., homepage or category pages).
  • Customize existing React components and develop new ones to display the retrieved content data.

CoreMedia customers often aim to leverage the layout flexibility offered by the CoreMedia Studio. This means the frontend should support the desired degree of layout flexibility. Common use cases include:

  • Blended content and commerce navigation menus managed in CoreMedia Content Cloud
  • Flexible page layouts
  • Content-enriched category pages, listing pages (PLPs), and product detail pages (PDPs)
  • Dynamic product listings for merchandizing with embedded inspirational content managed within CoreMedia Content Cloud
  • Content-driven pages like magazines, editorial blogs, detail stories, and topic-driven landing pages.

Figure 2: PWA Kit for Composable Storefronts integrated in CoreMedia Studio

Headless+

The key learning from conversations with CoreMedia's customers is that content editors should be shielded from the technical complexities of frontend technologies. Their primary focus should be on creating inspiring content and delivering compelling customer experiences. CoreMedia Content Cloud's omni-channel approach ensures a seamless content editing experience, regardless of the frontend technology used. CoreMedia supports this requirement through an integration approach called "Headless+" and the multi-/micro-experience preview capabilities offered by CoreMedia Studio. The PWA Kit frontend is simply configured as an additional output channel to preview the same content rendered by the PWA Kit.

To ensure full compatibility with CoreMedia Studio's preview features, some slight adaptations are required in the PWA Kit. Fortunately, these adaptations mainly consist of adding a single additional statement to all page headers. This enables interactivity between the CoreMedia Studio user interface and the externally hosted PWA Kit, facilitating features like choosing a preview device, viewport, or zoom functionality.

If users want to leverage the preview-driven editing capabilities, they need to add additional metadata to the surrounding div tag of each content-based component. This enables placement highlighting and a context menu for each content component.

Figure 3: Preview Driven Editing with CoreMedia

So now, everything works seamlessly as if it were one integrated application. This is CoreMedia's promise to all content editors: Don't worry about the frontend technology; focus on your creative work and rely on the powerful preview capabilities within CoreMedia Studio to test the experiences you've created.

Simple as can be

Integrating CoreMedia with Salesforce PWA Kit for Composable Storefronts is a straightforward and simple process for developers familiar with GraphQL and React-JS. Although the PWA Kit has its unique features, such as the server-side rendering model and the provided Salesforce Runtime environment, with some training, this task is manageable and delivers quick results.

This integration highlights the advantages CoreMedia customers enjoy from the clear separation of content and presentation within CoreMedia Content Cloud, along with our future-proof multi-experience preview capabilities. Additionally, it's worth noting that existing frontends based on SFRA (or even SiteGenesis) can continue to be used in parallel and do not need to be replaced all at once.

Further Reading

Content Cloud for Salesforce Commerce Cloud

Headless CMS: Hybrid Headless Content Management

Apollo Client for React

CoreMedia Marketplace for Addons

Stage 1: Fragmented: Multiple Channels

You’re a digital dinosaur!

You have a beautiful website, but with fragmented digital experiences, you run the risk of extinction.

It’s time to evolve.

Your audiences want a seamless experience, no matter what's happening behind the scenes. When your experience is different or difficult, it’s important to start with the basics, such as cultivating a holistic approach to online digital experiences. Realign your teams, platforms, processes, goals, and metrics around a comprehensive view of the online experience. Focus on the end-to-end customer journey cutting across channels, desktop and mobile.

separate channels animation circle t-rex dinosaur square
Stage 2: Integrated: Multiple channels

You’re a fish!

Signs of exciting life are starting to form. Your DX is responsive and adaptive but it’s not quite personalized yet.

Keep swimming!

The integration of your brand content across every touchpoint (website, online store, social media, emails, apps, point of sale) creates immersive experiences. These flagship sites combine content-rich brand experiences with immediate conversion capabilities. Business teams and marketing are closely aligned. However, while the digital experience is responsive and adaptive, it’s not yet personalized.

Connect with an expert
multiple channels animation circle fish underwater square Connect with an expert
Stage 3: Instant: Global expansion

You’re a crocodile!

You’re taking it global. Speed and scalability are key and just like a crocodile, you’re fast…but you’re clumsy.

Oh snap!

In this stage, the online digital experience becomes completely dynamic. You need content that is global, yet relevant, with plenty of local insights: Who is the user? Are they using a mobile phone? Is it raining where they are? Is it snowing? If it is, maybe they need warm, waterproof boots. All of this contextualized information creates a better user experience. With one global orchestration, you’re able to adapt everything, in whatever country or language you choose – while keeping turnaround times low. So keep evolving.

Connect with an expert
global expansion animation circle crocodile square Connect with an expert
Stage 4: Dynamic: Real time personalization

You’re a lion!

You’re reaching more customers in more countries and languages than ever before, and now you’re finally hunting and collecting info with precision.

But you can do more to keep your brand roaring!

As you graduate to the Instant level, you’re able to rapidly update everything - not just in one language and for one country, but in 20 languages and for 100 countries. Speed and scalability are key, driven by the need to roll out global campaigns in all languages and all touchpoints and make updates in minutes or hours, not weeks. But there’s still more to do to reach nirvana.

Connect with an expert
real time personalisation animation circle lion circle square Connect with an expert
Stage 5: Immersive: Elevated experiences

You’re Captain Content!

You’ve done it! You have opposable thumbs AND you’re saving the world with your seamless, elevated customer experiences.

You're a superhero in the digital space.

Your digital world and your physical world are blending together in the most complementary way possible. When shoppers visit your store, they’ll be greeted with their pre-selected products. Language changes dynamically depending on country of origin – it's like the whole store was set up just for your one specific customer.

In this final stage, your customer experience is truly immersive and superior, and your flagship store merges your physical and digital world into one, with a truly personalized individual experience.

Connect with an expert
elevated experience animation circle woman superhero square Connect with an expert