Shopware Frontends Integration

Integrating the B2Bsellers Suite with Shopware Frontends (Composable Frontends) allows you to build highly tailored, high-performance B2B storefronts using a modern headless stack.

Why Choose Shopware Frontends?

• Platform Agnostic Customization: A versatile toolkit that allows for bespoke storefront development independent of the core backend constraints.

• Total Design Freedom: Complete control over the UI/UX, allowing you to map complex B2B workflows to a streamlined frontend experience.

• Headless & API-First: Both Shopware 6 and the B2Bsellers Suite are built on a robust Store API. You can leverage specific B2B Store API routes to inject custom logic into product listings, detail pages, or the checkout process.

While these guidelines focus on Shopware Frontends, the same principles apply to other PWA frameworks or headless architectures.

Implementation & Integration Checklist

When integrating the B2Bsellers Suite into a headless environment, keep the following technical requirements in mind:

• Styling & Frameworks: The B2B platform currently requires Bootstrap. When integrating with a headless storefront, you may need to adjust global styles to ensure visual consistency between the B2B modules and your custom frontend.

• Hash-based Routing: Ensure your router correctly handles hash-tag URLs (e.g., /b2b_platform/offer#overview). Improper handling can lead to unnecessary page reloads or broken navigation states.

• Platform Initialization: You must manually load the initializePlatform addon. To avoid versioning conflicts with the standard Shopware Storefront, we recommend copying this logic into your local project.

• Avoid iFrames: We strongly advise against using classic iFrames to embed B2B functionality. For a seamless user experience and better SEO/performance, use direct API integration or component injection.

• Development Workflow: For an efficient DX (Developer Experience), we recommend configuring a Watcher tool or customizing the B2Bsellers Suite Watch command to streamline real-time frontend updates.

Join the Ecosystem

We are constantly evolving our headless capabilities. If you are building with Shopware Composable Frontends, we would love to hear about your implementation strategy and the specific B2B challenges you’ve solved.

Example Integration

<script lang="ts">
export default {
  name: "B2bPlatformPage",
};
</script>

<script setup lang="ts">
const { isLoggedIn } = useUser();
const { apiInstance } = useShopwareContext();
const url = useRequestURL()
const { languageIdChain } = useSessionContext();

if (process.client && !isLoggedIn.value) {
  // redirect to account page if user is logged in
  navigateTo({ path: "/account" });
}

const { t } = useI18n();

const platformScript = `B2bPlatform.Platform.initializePlatform({
  context: {
    app: {
      basePath: "${url.origin}",
      languageId: "${languageIdChain.value}",
      defaultLanguageId: "${languageIdChain.value}",
      plugins: {
        "B2bOffer":{
          "css":["${apiInstance.config.endpoint}\/bundles\/b2boffer\/\/storefront\/assets\/static\/css\/b2b-offer.css"],
          "js":["${apiInstance.config.endpoint}\/bundles\/b2boffer\/\/storefront\/assets\/static\/js\/b2b-offer.js"]
        },
        "B2bEmployeeBudgets":{
          "css":[],
          "js":["${apiInstance.config.endpoint}\/bundles\/b2bemployeebudgets\/\/storefront\/assets\/static\/js\/b2b-employee-budgets.js"]
        },
        "B2bCostCenter":{
          "css":[],
          "js":["${apiInstance.config.endpoint}\/bundles\/b2bcostcenter\/\/storefront\/assets\/static\/js\/b2b-cost-center.j"]
        },
        "B2bProductSubscription":{
          "css":["${apiInstance.config.endpoint}\/bundles\/b2bproductsubscription\/\/storefront\/assets\/static\/css\/b2b-product-subscription.css"],
          "js":["${apiInstance.config.endpoint}\/bundles\/b2bproductsubscription\/\/storefront\/assets\/static\/js\/b2b-product-subscription.js"]
        },
        "B2bSalesRepresentativeFastOrder":{
          "css":[],
          "js":["${apiInstance.config.endpoint}\/bundles\/b2bsalesrepresentativefastorder\/\/storefront\/assets\/static\/js\/b2b-sales-representative-fast-order.js"]
        },
        "B2bMobileSalesPortalApp":{
          "css":[],
          "js":["${apiInstance.config.endpoint}\/bundles\/b2bmobilesalesportalapp\/\/storefront\/assets\/static\/js\/b2b-mobile-sales-portal-app.js"]
        },
        "B2bEventManager":{
          "css":["${apiInstance.config.endpoint}\/bundles\/b2beventmanager\/\/storefront\/assets\/static\/css\/b2b-event-manager.css"],
          "js":["${apiInstance.config.endpoint}\/bundles\/b2beventmanager\/\/storefront\/assets\/static\/js\/b2b-event-manager.js"]
        }
      },
      taxState: "gross",
      activeFeatures: ["B2bBonusProgram","B2bProductRequest","B2bUrlAuthentication","B2bPdpVariantList","B2bProductLists"],
      restrictions: [{"extensions":[],"name":"salesRepresentativeLimit","value":5.0}],
    },
    api: {
      basePath: "${apiInstance.config.endpoint}/store-api/",
      accessKey: "${apiInstance.config.accessToken}"
    },
    customer: {
      storeApiToken: "${apiInstance.config.contextToken}"
    }
  }
});`;
</script>


<template>
  <div class="max-w-screen-xl mx-auto">
    <div id="app">
      <div class="b2b-platform-loader is--initial d-flex justify-content-center align-items-center">
        <div class="spinner-border text-primary" role="status">
          <span>Loading...</span>
        </div>
      </div>
    </div>

    <component is="script" type="application/javascript" src="/b2b-platform/js/runtime.js"></component>
    <component is="script" type="application/javascript" src="/b2b-platform/js/vendors-node.js"></component>
    <component is="script" type="application/javascript" src="/b2b-platform/js/commons.js"></component>
    <component is="script" type="application/javascript" src="/b2b-platform/js/app.js"></component>

   // Obviously, some libraries should be included as an NPM package.
    <component is="script" src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></component>
    <component is="script" src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></component>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <link rel="stylesheet" href="/b2b-platform/css/vendors-node.css">
    <link rel="stylesheet" href="/b2b-platform/css/app.css">

    <client-only>
    <component is="script">
      {{platformScript}}
    </component>
    </client-only>
  </div>
</template>