BundleB2B Developer Guide

# Quick start

4 steps to finalize your theme integration

  1. Download and unzip your current BigCommerce cornerstone theme.

  2. Create templates/components/b3/b3json.html using the code below:

    {{{json this}}}

  3. Modify files

    • templates/layout/base.html
    <!DOCTYPE html>
<html lang="en">
<head>
    <!-- other head content -->
    
    <!-- add 5 lines right before the head closing tag -->
    + {{~inject "customer" customer}}
    + {{~inject 'store_hash' settings.store_hash}}
    + {{~inject "settings" settings}}
    + {{~inject "page_type" page_type}}
    + {{~inject "currency_selector" currency_selector}}

</head>
<body>
  <!-- other body content -->
<script>
  {{!-- Exported in app.js --}}
  window.stencilBootstrap("{{page_type}}", {{jsContext}}).load();
  // add the following line before the script closing tag
  + window.jsContext = JSON.parse({{jsContext}})
</script>
</body>
</html>
<!-- add this script at the end of the file -->
+ <script>
+  const inPages = () => {
+      const urlArray = [          
+        '/buy-again/',
+        '/address-book/',
+        '/create-quote/',
+        '/quote-detail/',
+        '/quote/',
+        '/quote-edit/',
+        '/quote-list/',
+        '/quotes-list/',
+        '/dashboard/',
+        '/order-detail/',
+        '/quick-order-pad/',
+        '/shopping-list/',
+        '/shopping-lists/',
+        '/user-management/',
+        '/invoices/',
+        '/invoice-payment/',
+        '/invoice-details/',
+        '/invoice-payment-receipt/',
+        '/account.php',
+      ];
+      const current = window.location.pathname;
+      return urlArray.includes(current);
+    };
+    if(!inPages()) {
+       document.querySelector('.body').style.display = "block";
+    }
+    if(inPages()) {
+       const style = document.createElement('style');
+       style.innerHTML = `
+             .navBar.navBar--sub.navBar--account {
+                display: block !important;
+             }
+       `;
+       document.querySelector('head').append(style);
+    }
+ </script>
    • assets/js/theme/global.js

    If you are preparing upgrade to the latest version v3.3.0, please refer to this document for more details on all the fields we are encrypting now and whether you need to make any changes to your customization features

    export default class Global extends PageManager {
   onReady() {
      // other code

      // only need to change the version number to update the version.
      + const url = 'https://cdn.bundleb2b.net/b3-auto-loader.js';
      + const el = document.createElement('script');
      + el.setAttribute('src', url);
      + document.querySelector('body').append(el);
      + window.b3themeConfig = window.b3themeConfig || {}
      + window.b3themeConfig.keepSuperAdminMasquerade = true;
      + window.b3themeConfig.useJavaScript = {
      +    login: {
      +       callback() {
      +          document.querySelector('.body').style.display = "block";
      +       }
      +    }
      + }
   }
}
    • assets/js/theme/auth.js
    registerCreateAccountValidator($createAccountForm) {
  // other code
  + window.createAccountValidator = createAccountValidator;
}

  4. Upload your theme

    Stencil is BigCommerce’s latest theme framework engine. You have to use it before you pushlish your new theme.

    Please run stencil bundle to bundle up the theme into a structured .zip file, which can be uploaded to BigCommerce. Upload the .zip file to BigCommerce and apply it.

    If you are using one of the following bundelb2b approved theme, please use the following links to do some extra configuration after this instruction.

    You can also use themes integrated with bundleb2b directly by installing B2B Edition in your store.

    You can install it by entering {store_url}/manage/app/30001 in the address bar. Enter the app after successful installation, and then choose any theme you like to add to your store.

  5. Checkout configuration

    If you are using storefront url https://cdn.bundleb2b.net/b3-auto-loader.js, please use our v3 checkout. Please add bundleb2b checkout link in bigcommerce dashboard.

    • Settings->Checkout

    After entering the checkout setting page, please follow the steps below:

    1. Find "General Settings->Checkout Type", check "Custom Checkout".
    2. Find "Custom Checkout Settings->Custom Checkout", add https://cdn.bundleb2b.net/prod/b3Checkout/b3-auto-loader.js in "Script URL".
    3. Click the "Save" button at the bottom right corner.

  6. Additional Confirguration

    Please note that if you have added v3 checkout by referring to step 5, please ignore the following. If the following codes exist in your theme, please remove them.

    Please check your checkout version. If your checkout version is not BundleB2B Custom Checkout V3 or above, please follow the steps to add more confirguration below:

    • templates/pages/checkout.html

    (Checkout v1 only)

    <!-- other body content -->
{{{ footer.scripts }}}
+ <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
+ <script>
+ window.b3cartId = '{{cart_id}}';
+ </script>
+ <script src="https://cdn.bundleb2b.net/checkout.2.10.0.js"></script>
<!-- other body content -->
    • templates/pages/order-confirmation.html

    (Checkout v1 and Checkout v2 need)

    <!-- other body content -->
{{{ footer.scripts }}}
+ <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
+ <script>
+ window.b3checkoutId = '{{checkout.order.id}}';
+ </script>
+ <script src="https://cdn.bundleb2b.net/order-confirmations.2.10.0.js"></script>
<!-- other body content -->

← Customize page containers →