For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Dev Portal
DocsAPI ReferenceLearnCommunityChangelog
DocsAPI ReferenceLearnCommunityChangelog
  • Overview
    • Quick Start
    • Sandboxes
    • Tools & SDKs
    • Support
  • Docs
        • Stencil Themes (Legacy)
        • Stencil Theme Elements
        • Company Account Registration
    • Archive
    • Closed Beta Programs
Dev Portal
LogoLogo
On this page
  • Requirements
  • B2B Edition Elements in All Themes
  • B2B Edition Elements in Cornerstone
  • B2B Edition Elements in 22 Savile Row
  • B2B Edition Elements in Camden
  • B2B Edition Elements in Roots
  • B2B Edition Elements in Supermarket
  • B2B Edition Elements in Vault
  • Additional Resources
DocsB2BStorefront

B2B Edition Elements in Stencil Themes (Legacy Experience)

Was this page helpful?
Previous

Stencil Themes (Legacy)

Next

Company Account Registration

Built with

B2B Edition’s legacy Stencil storefront experience uses a modified Stencil theme that adds B2B functionality to different areas of the storefront. If you are upgrading to B2B Edition’s Buyer Portal experience, you must either use a Stencil theme without the legacy modifications or remove the modifications from your existing theme.

This article contains instructions on locating B2B elements in the theme files of each modified theme provided by B2B Edition. Use these steps to identify functionality areas for customizing the legacy Stencil storefront experience, or to remove legacy functionality in preparation for upgrading to the Buyer Portal experience.

Removing B2B Edition elements from a modified Stencil does not cause functionality issues in the storefront once the Buyer Portal is active, but it may interrupt any additional customizations made to the theme. Make sure that your manually-added customizations are still compatible without the removed B2B elements.

Requirements

You will need to install Stencil CLI in order to locate and manage .js files in your theme.

B2B Edition Elements in All Themes

The following theme files only exist in the B2B Edition modified themes. Delete these files entirely if you are adjusting the theme to support the Buyer Portal experience.

  • /assets/scss/components/b3//_b3.scss
  • /templates/components/b3/b3json.html

Depending on the version of your theme, there may be B2B Edition elements in the following files.

/templates/pages/checkout.html
<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>
/templates/pages/order-confirmation.html
<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>

B2B Edition Elements in Cornerstone

If you are using the modified Cornerstone theme, you can find B2B Edition elements in the following theme files.

/assets/js/theme/global.js
/* BundleB2B */
const $body = $('body');
const B3StorefrontURL = 'https://cdn.bundleb2b.net/b3-auto-loader.js';
$body.append(`<script src="${B3StorefrontURL}"></script>`);
window.b3themeConfig = window.b3themeConfig || {};
...
/* BundleB2B */
/templates/layout/base.html
{{!-- BundleB2B --}}
{{~inject "customer" customer}}
{{~inject 'store_hash' settings.store_hash}}
{{~inject "settings" settings}}
{{~inject "page_type" page_type}}
{{~inject "currency_selector" currency_selector}}
{{~inject "inDevelopment" in_development}}
{{!-- BundleB2B --}}
{{!-- BundleB2B --}}
window.jsContext = JSON.parse({{ jsContext }});
{{!-- BundleB2B --}}
/assets/js/theme/auth.js
/* BundleB2B */
window.createAccountValidator = createAccountValidator;
/* BundleB2B */

B2B Edition Elements in 22 Savile Row

If you are using the modified 22 Savile Row theme, you can find B2B Edition elements in the following theme files.

/assets/js/theme/global.js
/* BundleB2B */
const url = 'https://cdn.bundleb2b.net/b3-auto-loader.js';
// const url = 'http://127.0.0.1:8080/bundleb2b.latest.js';
const el = document.createElement('script');
el.setAttribute('src', url);
...
/* BundleB2B */
/templates/layout/base.html
{{!-- BundleB2B --}}
{{~inject "customer" customer}}
{{~inject 'store_hash' settings.store_hash}}
{{~inject "settings" settings}}
{{~inject "page_type" page_type}}
{{~inject "currency_selector" currency_selector}}
{{~inject "inDevelopment" in_development}}
{{!-- BundleB2B --}}
{{!-- BundleB2B --}}
window.jsContext = JSON.parse({{ jsContext }});
{{!-- BundleB2B --}}
/assets/js/theme/auth.js
/* BundleB2B */
window.createAccountValidator = createAccountValidator;
/* BundleB2B */
/assets/scss/theme.scss
// BundleB2B
@import "bundleb2b/bundleb2b"; // bundleb2b
// BundleB2B

B2B Edition Elements in Camden

If you are using the modified Camden theme, you can find B2B Edition elements in the following theme files.

/assets/js/theme/global.js
/* BundleB2B */
const $body = $('body');
const B3StorefrontURL = 'https://cdn.bundleb2b.net/b3-auto-loader.js';
// const B3StorefrontURL = 'http://127.0.0.1:8080/bundleb2b.latest.js';
$body.append(`<script src="${B3StorefrontURL}"></script>`);
...
/* BundleB2B */
/templates/layout/base.html
{{!-- BundleB2B --}}
{{~inject "customer" customer}}
{{~inject 'store_hash' settings.store_hash}}
{{~inject "settings" settings}}
{{~inject "page_type" page_type}}
{{~inject "currency_selector" currency_selector}}
{{~inject "inDevelopment" in_development}}
{{!-- BundleB2B --}}
{{!-- BundleB2B --}}
window.jsContext = JSON.parse({{ jsContext }});
{{!-- BundleB2B --}}
<script>
    const inPages = () => {
...
    };
    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/auth.js
/* BundleB2B */
window.createAccountValidator = createAccountValidator;
/* BundleB2B */
/templates/components/f/header/top-utilities.html
{{!-- BundleB2B: dropdown_menu_item__logout used in login module's callback --}}
/templates/pages/account/recent-items.html
{{!-- BundleB2B: page-heading is required for account navigation rendering --}}
/assets/scss/theme.scss
// BundleB2B
// -----------------------------------------------------------------------------
@import "components/b3/b3";

B2B Edition Elements in Roots

If you are using the modified Roots theme, you can find B2B Edition elements in the following theme files.

/assets/js/theme/global.js
/* BundleB2B */
const $body = $('body');
const B3StorefrontURL = 'https://cdn.bundleb2b.net/b3-auto-loader.js';
// const B3StorefrontURL = 'http://127.0.0.1:8080/bundleb2b.latest.js';
$body.append(`<script src="${B3StorefrontURL}"></script>`);
window.b3themeConfig = window.b3themeConfig || {};
...
/* BundleB2B */
/templates/layout/base.html
{{!-- BundleB2B --}}
{{~inject "customer" customer}}
{{~inject 'store_hash' settings.store_hash}}
{{~inject "settings" settings}}
{{~inject "page_type" page_type}}
{{~inject "currency_selector" currency_selector}}
{{~inject "inDevelopment" in_development}}
{{!-- BundleB2B --}}
{{!-- BundleB2B --}}
window.jsContext = JSON.parse({{ jsContext }});
{{!-- BundleB2B --}}
/assets/js/theme/auth.js
/* BundleB2B */
window.createAccountValidator = createAccountValidator;
/* BundleB2B */
/assets/scss/theme.scss
// BundleB2B
// -----------------------------------------------------------------------------
@import "components/b3/b3";

B2B Edition Elements in Supermarket

If you are using the modified Supermarket theme, you can find B2B Edition elements in the following theme files.

/assets/js/theme/global.js
/* BundleB2B */
const $body = $('body');
const B3StorefrontURL = 'https://cdn.bundleb2b.net/b3-auto-loader.js';
// const B3StorefrontURL = 'http://127.0.0.1:8080/bundleb2b.latest.js';
$body.append(`<script src="${B3StorefrontURL}"></script>`);
window.b3themeConfig = window.b3themeConfig || {};
...
/* BundleB2B */
/templates/layout/base.html
{{!-- BundleB2B --}}
{{~inject "customer" customer}}
{{~inject 'store_hash' settings.store_hash}}
{{~inject "settings" settings}}
{{~inject "page_type" page_type}}
{{~inject "currency_selector" currency_selector}}
{{~inject "inDevelopment" in_development}}
{{!-- BundleB2B --}}
{{!-- BundleB2B --}}
window.jsContext = JSON.parse({{ jsContext }});
{{!-- BundleB2B --}}
/assets/js/theme/auth.js
/* BundleB2B */
window.createAccountValidator = createAccountValidator;
/* BundleB2B */
/templates/layout/instantload-base.html
{{!-- BundleB2B --}}
{{~inject "customer" customer}}
{{~inject 'store_hash' settings.store_hash}}
{{~inject "settings" settings}}
{{~inject "page_type" page_type}}
{{~inject "currency_selector" currency_selector}}
{{~inject "inDevelopment" in_development}}
{{!-- BundleB2B --}}
{{!-- BundleB2B --}}
window.jsContext = JSON.parse({{ jsContext }});
{{!-- BundleB2B --}}
/templates/pages/page.html
{{!-- BundleB2B: b2c tpa content container --}}
<div class="tpa"></div>
/templates/components/products/product-view.html
{{!-- BundleB2B: add to quote button container --}}
<div id="add-to-cart-wrapper" class="add_to_cart_wrapper"></div>
/assets/scss/theme.scss
// BundleB2B
// -----------------------------------------------------------------------------
@import "components/b3/b3";

B2B Edition Elements in Vault

If you are using the modified Vault theme, you can find B2B Edition elements in the following theme files.

/assets/js/theme/global.js
/* BundleB2B */
const $body = $('body');
const B3StorefrontURL = 'https://cdn.bundleb2b.net/b3-auto-loader.js';
// const B3StorefrontURL = 'http://127.0.0.1:8080/bundleb2b.latest.js';
$body.append(`<script src="${B3StorefrontURL}"></script>`);
window.b3themeConfig = window.b3themeConfig || {};
...
/* BundleB2B */
/templates/layout/instantload-base.html
{{!-- BundleB2B --}}
{{~inject "customer" customer}}
{{~inject 'store_hash' settings.store_hash}}
{{~inject "settings" settings}}
{{~inject "page_type" page_type}}
{{~inject "currency_selector" currency_selector}}
{{!-- BundleB2B --}}
{{!-- BundleB2B --}}
window.jsContext = JSON.parse({{ jsContext }});
{{!-- BundleB2B --}}
/assets/js/theme/auth.js
/* BundleB2B */
window.createAccountValidator = createAccountValidator;
/* BundleB2B */
/templates/layout/product.html
{{!-- BundleB2B: add to quote button container --}}
{{!-- BundleB2B --}}
{{~inject "customer" customer}}
{{~inject 'store_hash' settings.store_hash}}
{{~inject "settings" settings}}
{{~inject "page_type" page_type}}
{{~inject "currency_selector" currency_selector}}
{{!-- BundleB2B --}}
{{!-- BundleB2B --}}
window.jsContext = JSON.parse({{ jsContext }});
{{!-- BundleB2B --}}
/templates/layout/home.html
{{!-- BundleB2B --}}
{{~inject "customer" customer}}
{{~inject 'store_hash' settings.store_hash}}
{{~inject "settings" settings}}
{{~inject "page_type" page_type}}
{{~inject "currency_selector" currency_selector}}
{{!-- BundleB2B --}}
{{!-- BundleB2B --}}
window.jsContext = JSON.parse({{ jsContext }});
{{!-- BundleB2B --}}
/templates/layout/home.html
{{!-- BundleB2B: change .navBar--sub to .navBar--sub--b3 to prevent <nav></nav> from removing --}}
/assets/scss/theme.scss
// BundleB2B
// -----------------------------------------------------------------------------
@import "components/b3/b3";

Additional Resources

  • B2B Edition for Stencil Themes
  • Installing Stencil CLI
  • Upgrading to the Buyer Portal Experience (Help Center)