# Shopware Frontends Integration ## 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. {% hint style="info" %} While these guidelines focus on Shopware Frontends, the same principles apply to other PWA frameworks or headless architectures. {% endhint %} ## 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>
--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.b2b-sellers.com/b2b-platform/developer-guide/how-to/shopware-frontends-integration.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.