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/',
+        '/quote/',
+        '/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";
+    }
+ </script>
    • assets/js/theme/global.js
    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/bundleb2b.3.2.0.js';
      + const el = document.createElement('script');
      + el.setAttribute('src', url);
      + document.querySelector('body').append(el);
      + window.b3themeConfig = window.b3themeConfig || {}
      + 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.

  1. Additional Confirguration

    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 →