How do you work with a local B2B buyer portal to make adjustments?

Nachdem Sie das B2B-Einkäuferportal für die lokale Entwicklung eingerichtet haben, müssen Sie einen der folgenden Wege wählen (Entwicklung auf Stencil oder Entwicklung für Headless), damit die Skripte des Einkäuferportals konfiguriert und in die Storefront-Seiten eingebunden werden.

Entwicklung mit Stencil

1. Rufen Sie im BigCommerce-Adminbereich den „Script Manager“ auf, um das Skript für Kopf- und Fußzeile zu konfigurieren.

2. Bei Einzel-Storefronts gehen Sie zu „Storefront“ > „Skript-Manager“. Bei Multi-Storefronts gehen Sie zu „Kanäle“ > „Skript-Manager“.

3. Löschen Sie die Skripte mit den Namen „B2BEdition Header Script“ und „B2BEdition Footer Script“.

4. Fügen Sie ein neues Header-Skript mit den folgenden Einstellungen hinzu:

• Name: B2B Edition Header-Skript
• Position: Kopfzeile
• Seiten: Alle Seiten
• Kategorie: Unverzichtbar
• Inhalt:

<script>
  {{#if customer.id}}
  {{#contains page_type "account"}}
  var b2bHideBodyStyle = document.createElement('style');
  b2bHideBodyStyle.id = 'b2b-account-page-hide-body';
  b2bHideBodyStyle.innerHTML = 'body { display: none !important }';
  document.head.appendChild(b2bHideBodyStyle);
  {{/contains}}
  {{/if}}
</script>
<script type="module">
  import RefreshRuntime from 'http://localhost:3001/@react-refresh'
  RefreshRuntime.injectIntoGlobalHook(window)
  window.$RefreshReg$ = () => {}
  window.$RefreshSig$ = () => (type) => type
  window.__vite_plugin_react_preamble_installed__ = true
</script>
<script type="module" src="http://localhost:3001/@vite/client"></script>

5. Fügen Sie ein neues Fußzeilenskript mit den folgenden Einstellungen hinzu:

• Name: B2B Edition Fußzeilen-Skript
• Position: Fußzeile
• Seiten: Alle Seiten
• Kategorie: Unverzichtbar
• Inhalt:

<script type="module" src="http://localhost:3001/src/main.ts"></script>
<script>
  window.B3 = {
    setting: {
      store_hash: '{{settings.store_hash}}',
      channel_id: {{settings.channel_id}},
      platform: 'bigcommerce', // override this depending on your store channel platform: https://developer.bigcommerce.com/docs/rest-management/channels#platform
    },
  }
</script>

6. Navigieren Sie nun zum Dashboard der B2B Edition App > Einstellungen > Käuferportal und legen Sie den Typ des Käuferportals auf „Benutzerdefiniert“ fest. Dies gilt nur für Multi-Storefronts, nicht für Single-Storefronts.

7. Gehen Sie nun zu Ihrer Storefront und versuchen Sie, sich anzumelden.

Entwicklung für Headless

1. Stellen Sie zunächst sicher, dass das Käuferportal unter „yarn dev“ läuft.

2. Fügen Sie nun dieses Skript für das Käuferportal in das -Tag Ihrer lokal ausgeführten Headless-Storefront-Dateien ein.

<script type="module">
  import RefreshRuntime from 'http://localhost:3001/@react-refresh'
  RefreshRuntime.injectIntoGlobalHook(window)
  window.$RefreshReg$ = () => {}
  window.$RefreshSig$ = () => (type) => type
  window.__vite_plugin_react_preamble_installed__ = true
</script>
<script type="module" src="http://localhost:3001/@vite/client"></script>

3. Fügen Sie außerdem dieses Skript für das Käuferportal in den -Tag Ihrer lokal ausgeführten Headless-Storefront-Dateien ein. Vergessen Sie nicht, die Platzhalter REPLACE_WITH_YOUR_STORE_HASH und REPLACE_WITH_YOUR_CHANNEL_ID durch die entsprechenden Angaben zu ersetzen.

<script type="module" src="http://localhost:3001/src/main.ts"></script>
<script>
  window.B3 = {
    setting: {
      store_hash: 'REPLACE_WITH_YOUR_STORE_HASH',
      channel_id: REPLACE_WITH_YOUR_CHANNEL_ID,
    },
  }
</script>

4. Navigieren Sie anschließend zum Dashboard der B2B Edition App > Einstellungen > Käuferportal und legen Sie den Typ des Käuferportals auf „Benutzerdefiniert“ fest.

5. Rufen Sie abschließend Ihre Headless-Storefront auf und versuchen Sie, sich anzumelden.

Bitte kontaktieren Sie uns unter wargis@bay20.com/manish@bay20.com oder rufen Sie uns unter +91-9582784309 oder +91-8800519180 an, wenn Sie Unterstützung zu Shopify oder Bigcommerce benötigen. Sie können auch die Entwicklungsseite von Shopify oder Bigcommerce besuchen, um sich über unser Leistungsangebot zu informieren.