Stencil Theme Elements | BigCommerce Developer Center

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)