BundleB2B Developer Guide

# Customize other popular themes

If you are using one of the following bundelb2b approved theme, please follow this instruction to customize the theme after you finished the quick start steps.

# Camden

  • assets/scss/b3/theme.scss

    add the following code at the end of the file:

    // Hide the page when initializing to solve the problem of page flashing
.page_type_editaccount {

  .account {
    form {
      display: none;
    }
  }
}

.page_type_account_orderstatus,
.page_type_account_returns,
.page_type_account_inbox,
.page_type_account_addressbook,
.page_type_wishlists,
.page_type_account_recentitems {

  .account {
    display: none;
  }
}

.navBar--account {
  display: none;
}

//action buttons
.productView {
  .productView-options {
    .form {
      .button {
        margin-bottom: 1rem;
      }
    }
    //pdp page add to quote button
    .rfq-button-container.rfq-cart-button-container {
      .button {
        margin-top: 1rem;
      }
    }
    // add to shopping list button
    .form-action {
      margin-top: 0;
      a[data-dropdown="quick-shoppinglist-dropdown"] {
        margin-bottom: 0;
      }
      a[data-dropdown="shoppinglist-dropdown"] {
        margin-bottom: 0;
      }
    }
    // input number
    .form-field[data-product-attribute="input-number"] {
      input {
        width: 40%;
      }
    }
  }
}

// saleRep search input  
.saleRep {
  .b2b-wrap {
    .search {
      input {
        padding-right: 1rem !important;
      }
    }
  }
}

// saleRep head container
.salerep-infobox {
  .container {
    @include breakpoint("large") {
      padding: 0 6rem !important;
    }
  }
}

// header account dropdown 
header.header {
  .header__inner {
    z-index: 31;
  }
}

// cart page add to cart & quote
.cart__totals {
  .cart-actions {
    display: block;
    width: 100%;
    .rfq-cart-button-container {
      button {
        margin-top: 0;
      }
    }
  }
}

// buy again page  
.buy-again-search-container {
  width: 95%;
}

// order detail page
.b2b-order-details {
  .order-list-container {
    .account-product-checkItem {
      label::after, label::before {
        top: 0 !important;
      }
    }
  }
}

  • assets/js/theme/global.js

    export default class Global extends PageManager {
    onReady() {
     // other code
      
     // add the following code
        window.b3themeConfig.useJavaScript = {
            login: {
                callback(instance) {
                    $('.body').show();
                    $('main.page').css({
                        width: '100%',
                    });
                    const { B3RoleId } = instance.utils.B3Storage;
                    const roleId = B3RoleId.value;

                    const hideWishList = () => {
                        $('.navUser-action[href="/wishlist.php"]').parents('.navUser-item').remove();
                        $('[href^="/wishlist.php"]').remove();
                        $('.add-to-list__controls').remove();
                        $('head').append(`<style>
                            [href^="/wishlist.php"] {
                                display: none!important;
                            }
                        </style>`);
                    };

                    const renderMobileNavs = () => {
                        if (!instance.isMobile) return;
                        $('#navPages-account .navPage-subMenu-list .b3-navs').remove();

                        instance.renderB3Navs({
                            containerSelector: '#navPages-account .navPage-subMenu-list',
                            navItemClassName: 'navPage-subMenu-item b3-navs',
                        });

                        hideWishList();
                    };

                    const renderDropDownMenu = () => {
                        $('.b3-dropdown-menu').remove();
                        instance.renderB3Navs({
                            containerSelector: '#accountOptions',
                            navItemClassName: 'dropdown-menu-item b3-dropdown-menu',
                            insertType: 'afterbegin',
                        });
                        
                        // is show invoice in dropdown menu
                        if (instance.canShowB2BNav && instance.haveIPPermission) {
                            const invoiceEl = `<li class="dropdown-menu-item b3-dropdown-menu ">
                                                <a class="" href="/invoices/">Invoices</a>
                                          </li>`;
                            $('#accountOptions li:first-child').before(invoiceEl);
                            $('.dropdown-menu .navBar-action').removeClass('navBar-action');
                        }

                        const isSaleRep = roleId === '3';
                        const { B3CompanyId, B3AddressBookIsEnabled } = instance.utils.B3Storage;
                        const companyId = B3CompanyId.value;
                        const addressBookEnabled = B3AddressBookIsEnabled.value;

                        // b2b address book
                        if (addressBookEnabled === '1') {
                            $('#accountOptions .dropdown-menu-item [href="/account.php?action=address_book"]').remove();
                        }

                        hideWishList();

                        // restyle the end masquerade box
                        const timer = isSaleRep && companyId && setInterval(() => {
                            const $innerBox = $('.header__inner .salerep-infobox');
                            if ($innerBox.length) {
                                clearInterval(timer);
                                $('.header__inner').after($innerBox);
                                if (instance.isMobile) {
                                    $('.header__inner').css({
                                        paddingBottom: 40,
                                    });
                                    $('head').append(`<style>
                                        .salerep-infobox {
                                            top: 150px !important;
                                        }
                                        .salerep-infobox.saler-extends:before {
                                            border-top: 10px solid #ebebeb!important;
                                            border-bottom: 10px solid #ebebeb!important;
                                        }
                                    </style>`);
                                }
                                $innerBox.show();
                            }
                        });
                    };

                    const bindMasqueradAction = () => {
                        ((selectors) => {
                            selectors.forEach(selector => {
                                $('body').on('click', selector, async () => {
                                    await instance.getIsShowAddressBook();
                                    renderDropDownMenu();
                                    const { B3CompanyId } = instance.utils.B3Storage;
                                    const prevCompanyId = B3CompanyId.value;
                                    const timer = setInterval(() => {
                                        const { B3CompanyId } = instance.utils.B3Storage;
                                        const currCompanyId = B3CompanyId.value;
                                        if (prevCompanyId !== currCompanyId) {
                                            clearInterval(timer);
                                            renderDropDownMenu();
                                            renderMobileNavs();
                                        }
                                    });
                                });
                            });
                        })(['[action-begin-masquerade]', '[end-masquerade]']);
                    };

                    const hideJuniorSaw = () => {
                        const isJunior = roleId === '2';
                        if (isJunior) {
                            // cart add to cart
                            $('.card-section--buttons.card-section--quantity, .card-section--buttons ').remove();
                            // header quick add sku to cart
                            $('.sku-add.sku-add--sku').remove();
                            // side cart
                            $('#side-cart-container').remove();
                            $('.side-cart-enabled').removeClass('side-cart-enabled');
                        }
                    };

                    if (roleId) {
                        renderDropDownMenu();
                        bindMasqueradAction();
                        hideJuniorSaw();
                        renderMobileNavs();
                    }
                },
            },
        };
    }
}

  • templates/components/products/product-view.html

    add the folloing code at the end of the file:

    <a aria-controls="quick-shoppinglist-dropdown" aria-expanded="false" class="button dropdown-menu-button c00436" data-dropdown="quick-shoppinglist-dropdown" style="display: none;">
    <span>Add to Shopping List</span>
    <i aria-hidden="true" class="icon c00437">
        <svg>
            <use xlink:href="#icon-chevron-down"></use>
        </svg>
    </i>
</a>

# Cornerstone

  • assets/scss/theme.scss

    add the folloing code at the end of the file:

    // Hide the page when initializing to solve the problem of page flashing
.page_type_editaccount {

  .account {
    form {
      display: none;
    }
  }
}

.page_type_account_orderstatus,
.page_type_account_returns,
.page_type_account_inbox,
.page_type_account_addressbook,
.page_type_wishlists,
.page_type_account_recentitems {

  .account {
    display: none;
  }
}

.navBar--account {
  display: none;
}

.modal-close:focus::after, .modal-close:focus::before {
  display: none;
}
#add-to-cart-wrapper {
    .form-action {
        margin-top: 0;
    }
    .rfq-button-container.rfq-pdp-button-container {
        display: flex !important;
    }
}
.tingle-modal-box {
  background-color: stencilColor('container-border-global-color-base') !important;
}
.b2b-wrap table tr:hover {
  background-color: stencilColor('optimizedCheckout-orderSummary-borderColor') !important;
} 
#invoice-detail-pending .invoice-detail-pending {
  background-color: stencilColor('container-border-global-color-base') !important;
}
.dropdown-menu.show-action {
  background-color: stencilColor('optimizedCheckout-orderSummary-borderColor');
  width: unset!important;
}
.cart-info {
  color: stencilColor('color-textLink--active');
}
.file-upload-drop {
  color: stencilColor('color-textLink--active');
}
.card-figcaption-body > button{
  width: 100%;
}
.card-figcaption-body input {
  vertical-align:middle;
}
button#add_to_cart {
  border-color: stencilColor('button--primary-backgroundColor');
  background-color: stencilColor('button--primary-backgroundColor');
}
#navPages-account {
    .navPage-subMenu-list {
        .navPage-subMenu-action.navPages-action {
            padding-left: 0;
        }
    }
}
#shopping_list_table .product-options {
    color: inherit !important;
}

# 22 Savile Row

  • templates/layout/base.html

    add the following code inside the head tag:

    {{inject "customer" customer}}
{{inject "store_hash" settings.store_hash}}
{{inject "settings" settings}}
{{inject "page_type" page_type}}
{{inject "template" template}}
{{inject "currency_selector" currency_selector}}

  • assets/js/theme/global.js

    export default class Global extends PageManager {
    onReady() {
        // other code
      
        // add the following code
        window.b3themeConfig.useJavaScript = {
            login: {
                callback() {
                    $('.body').show();
                    const { B3RoleId } = window.B3Storage;
                    const roleId = B3RoleId.value;

                    const hideWishList = () => {
                        $('.navUser-action[href="/wishlist.php"]').parents('.navUser-item').remove();
                        $('[href^="/wishlist.php"]').remove();
                        $('.add-to-list__controls').remove();
                        $('head').append(`<style>
                            [href^="/wishlist.php"] {
                                display: none !important;
                            }
                        </style>`);
                    };

                    if (roleId) {
                        hideWishList();
                    }
                },
            },
        };
    }
}

  • assets/scss/theme.scss

    add the folloing code at the end of the file:

    // Hide the page when initializing to solve the problem of page flashing
.page_type_editaccount {

  .account {
    form {
      display: none;
    }
  }
}

.page_type_account_orderstatus,
.page_type_account_returns,
.page_type_account_inbox,
.page_type_account_addressbook,
.page_type_wishlists,
.page_type_account_recentitems {

  .account {
    display: none;
  }
}

.navBar--account {
  display: none;
}

[data-shoppinglist-add] {
  position: relative;
}
.shopping-list-status {
  #shopping-list-status {
    width: 180px;
  }
}

#modal-user-management-edit-form,
#modal-user-management-new-form {
  margin: 0!important;
}
.tingle-modal-box,
.swal2-popup {
  background: stencilColor("body-bg")!important;
}
table>tbody>tr .dropdown-menu {
  background: stencilColor("navPages-subMenu-backgroundColor")!important;
}
// login
.new-customer .panel .panel-body {
  color: stencilColor("color-textBase");
}

// quote list table
#quote-list-container {
  .actions-field {
    .dropdown-menu {
      min-width: 100px;
      left: -24px;
    }
  }
}

// bottom cart container
footer.footer {
  .bottom-cart-container {
      z-index: 30 !important;
  }
}

// quick order pad
.quick-order-pad .table-toolbar {
  overflow: unset !important;
}

# Supermarket

  • templates/layout/base.html

    add the following code inside the script tag:

    <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 = '.page-sidebar{display:none;} .page .page-content {width: 100% !important;}';
        document.querySelector('head').append(style);
    }
</script>

  • assets/js/theme/global.js

    export default class Global extends PageManager {
    onReady() {
     // other code
      
      // add the following code
        window.b3themeConfig.useContainers = {
            'dashboard.endMasquerade.container': '.emthemesModez-header-userSection.emthemesModez-header-userSection--logo-left',
            'buyAgain.container': '.container .page .page-content',
        };
    }
}

  • assets/scss/theme.scss

    add the folloing code at the end of the file:

    // Hide the page when initializing to solve the problem of page flashing
.page_type_editaccount {

  .account {
    form {
      display: none;
    }
  }
}

.page_type_account_orderstatus,
.page_type_account_returns,
.page_type_account_inbox,
.page_type_account_addressbook,
.page_type_wishlists,
.page_type_account_recentitems {

  .account {
    display: none;
  }
}

.navBar--account {
  display: none;
}
#shopping_list_table,.b2b-column-left{
  .input-text {
    padding: 0;
  }
  .product-qty-col{
    input{
      padding: 0;
      text-align: center;
    }
  }
}
.b2b-wrap.title-wrap {
  position: inherit!important;
}
  
.productView-options [data-shoppinglist-add]{
  width: 100%!important;
  margin-top: 0;
}
.rfq-form-wrapper .form-container .products-container .product-list-item-container .form-input {
  min-width: 100px !important;
}
.rfq-button-container.rfq-cart-button-container .button {
  margin: 1rem!important;
}
.sidebarBlock .productList .listItem-buttons .button, .productList--maxCol1 .listItem-buttons .button, .productList--maxCol4 .listItem-buttons .button {
  margin: 0!important;
}
.b2b-wrap .title-wrap {
  position: unset!important;
}

// add to quote button
#add-to-cart-wrapper {
  .rfq-pdp-button-container {
    .add-to-quote {
      margin-top: 1.5rem;
    }
  }
}

// my quote quantity countPill
#my-quote-entry {
  position: relative;
  .quote-quantity.countPill {
    min-width: unset !important;
    margin: 0;
    right: 0;
    top: -16px;
  }
}

# Vault

  • assets/scss/theme.scss

    add the folloing code at the end of the file:

    // Hide the page when initializing to solve the problem of page flashing
.page_type_editaccount {

  .account {
    form {
      display: none;
    }
  }
}

.page_type_account_orderstatus,
.page_type_account_returns,
.page_type_account_inbox,
.page_type_account_addressbook,
.page_type_wishlists,
.page_type_account_recentitems {

  .account {
    display: none;
  }
}

.navBar--account {
  display: none;
}
.button:hover,
.button:focus,
.button.is-active,
.button.active {
    color: inherit!important;
}
.button {
  color: inherit;
  border-color: #2f2f2b;
}
.button:hover {
  color: inherit;
  border-color: #2f2f2b;
}
.button--primary {
  color: white;
  border-color: #e74c3c;
}
.button--primary:hover {
  color: white;
  border-color: #ff762b;
}
.pagination {
  width: auto!important;
}
.pagination-item.pagination-item--next > a.pagination-link {
  padding: 6px 6px 4px 19px !important;
}

.swal2-container {
  z-index: 100009!important;
}

.shopping-list-status .form-select {
  width: 180px;
}

#shopping_list_table .col-action {
  padding-bottom: 0!important;
}
td.col-action .action-wrap .action-lists {
  position: relative!important;
}

#pc-quickorderpad-entry {
  display: flex;
  min-width: 150px;
}
#my-quote-entry {
  display: flex;
  min-width: 120px;
}
#quickSearch {
  min-width: 250px !important;
  padding-left: 0 !important;
}

.b2b-loading-overlay {
  z-index: 99999!important;
}

header div#menu {
  z-index: 999!important;
}
.salerep-infobox {
  z-index: 1000!important;
}
.tingle-modal {
  z-index: 100000!important;
}
.account-orderStatus-label {
    color: stencilColor('color-textBase')!important;
}
.previewCartAction-checkout, 
.previewCartAction-viewCart {
    padding-left: unset!important;
}
#shopping_list_table .col-action .action-lists {
  width: 176px!important;
  bottom: -18px!important;
}
.rfq-form-wrapper .form-container {
  z-index: 100000!important;
}

#account-dropdown-signout-list .navBar--sub {
  margin-bottom: 0;
}
.modal-background {
  z-index: 100004;
}
#modal-user-management-edit-form,
#modal-user-management-new-form,
#previewModal {
  z-index: 100005 !important;
}

#modal {
  z-index: 100005!important;
}
.modal {
  z-index: 100005!important;
}
.quotes .quotes-search-form {
  line-height: normal !important;
}

#quote-list-container {
  .dropdown-menu.show-action {
      width: unset !important;
  }
}

#add-to-cart-wrapper {
  .rfq-button-container.rfq-pdp-button-container  {
    .add-to-quote {
      border-radius: 25px;
    }
  }
}

  • assets/js/theme/global.js

    export default class Global extends PageManager {
    onReady() {
     // other code
      
     // add the following code
        window.b3themeConfig.useText = {
            'global.required.label': '*',
        }

        window.b3themeConfig.useContainers = {
            'tpa.button.container--s': '.navPages .sticky-navpages',
            'quickOrderPad.button.container--s': '.navPages .sticky-navpages',
            'dashboard.endMasquerade.container': '.logo-user-section.container',
            'orders.container': 'main.account',
            'buyAgain.container': '.container .page .page-content',
        }

        window.b3themeConfig.useJavaScript = {
            login: {
                callback(instance) {
                    $('.body').show();
                    const { B3RoleId } = instance.utils.B3Storage;
                    const roleId = B3RoleId.value;

                    const hideWishList = () => {
                        $('[href^="/wishlist.php"]').remove();
                        $('[action^="/wishlist.php"]').remove();
                        $('head').append(`<style>
                      [href^="/wishlist.php"], [action^="/wishlist.php"] {
                        display: none !important;
                      }
                    </style>`);
                    };

                    const renderMobileNavs = () => {
                        if (!instance.isMobile) return;
                        $('.navPages .sticky-navpages .b3-mobile-nav').remove();

                        const $navs = $('.navBar--account .navBar-section').eq(0).children('.navBar-item');
                        $navs
                            .removeClass('navBar-item')
                            .addClass('navPages-item')
                            .addClass('b3-mobile-nav')
                            .children('a')
                            .removeClass('navBar-action')
                            .addClass('navPages-action');

                        $('.navPages .sticky-navpages').append($navs);

                        instance.renderB3Navs({
                            containerSelector: '.navPages .sticky-navpages',
                            navItemClassName: 'navPages-item b3-mobile-nav',
                            insertType: 'beforeEnd',
                        });

                        hideWishList();
                    };

                    const hideJuniorSaw = () => {
                        const isJunior = roleId === '2';
                        if (isJunior) {
                            // pdp
                            $('#form-action-addToCart').parent().remove();
                        }
                    };

                    const renderDropDownMenu = () => {
                        $('#account-dropdown-signout-list .b3-dropdown-menu').remove();
                        instance.renderB3Navs({
                            containerSelector: '#account-dropdown-signout-list .navBar-section',
                            navItemClassName: 'navBar-item signout-list b3-dropdown-menu',
                            insertType: 'afterbegin',
                        });

                        // is show invoice in dropdown menu
                        if (instance.canShowB2BNav && instance.haveIPPermission) {
                            const invoiceEl = `<li class="navBar-item signout-list b3-dropdown-menu">
                                                <a class="navBar-action" href="/invoices/">Invoices</a>
                                          </li>`;
                            $('#account-dropdown-signout-list li:first-child').before(invoiceEl);
                        }
                    };

                    const bindMasqueradAction = () => {
                        ((selectors) => {
                            selectors.forEach(selector => {
                                $('body').on('click', selector, async () => {
                                    await instance.getIsShowAddressBook();
                                    renderDropDownMenu();
                                    renderMobileNavs();
                                    const { B3CompanyId } = instance.utils.B3Storage;
                                    const prevCompanyId = B3CompanyId.value;
                                    const timer = setInterval(() => {
                                        const { B3CompanyId } = instance.utils.B3Storage;
                                        const currCompanyId = B3CompanyId.value;
                                        if (prevCompanyId !== currCompanyId) {
                                            clearInterval(timer);
                                            renderDropDownMenu();
                                            renderMobileNavs();
                                        }
                                    });
                                });
                            });
                        })(['[action-begin-masquerade]', '[end-masquerade]']);
                    };

                    if (roleId) {
                        renderDropDownMenu();
                        renderMobileNavs();
                        bindMasqueradAction();
                        hideJuniorSaw();
                    }
                },
            },
        };
    }
}

  • assets/temlates/layout/home.html and product.html

    add the following code to script tag:

    <script>
  // Exported in app.js
  window.stencilBootstrap("{{page_type}}", {{jsContext}}).load();
	
	+ window.jsContext = JSON.parse({{jsContext}})
</script>

    add the following code to head tag:

    {{~inject "customer" customer}}
{{~inject 'store_hash' settings.store_hash}}
{{~inject "settings" settings}}
{{~inject "page_type" page_type}}
{{~inject "currency_selector" currency_selector}}

  • If you are using Vault-1.1.2+, please use the following links to do some extra configuration. templates/layout/base.html add the following code to head tag:

    {{inject 'themeSettings' theme_settings}}

# Roots

  • assets/js/theme/global.js

    export default class Global extends PageManager {
    onReady() {
        // other code
      
        // add the following code
        window.b3themeConfig.useContainers = {
            'pdp.shoppinglist.container': '#product_detail_page_action',
            'dashboard.endMasquerade.container': '.header-logo--wrap',
        };
    }
}

  • assets/scss/theme.scss

    add the folloing code at the end of the file:

    // Hide the page when initializing to solve the problem of page flashing
.page_type_editaccount {

  .account {
    form {
      display: none;
    }
  }
}

.page_type_account_orderstatus,
.page_type_account_returns,
.page_type_account_inbox,
.page_type_account_addressbook,
.page_type_wishlists,
.page_type_account_recentitems {

  .account {
    display: none;
  }
}

.navBar--account {
  display: none;
}

.button:hover,
.button:focus,
.button.is-active,
.button.active,
#search_button {
  background-color: stencilColor('button--default-backgroundColorHover');
  border-color: stencilColor('button--default-borderColor');
  color: white;
}

.button.button--small.dropdown-menu-item a {
  color: white !important;
}

.table-wrap .dropdown-menu .button a {
  padding: 7px 10px !important;
}

.button.modal-close.modal-close--button {
  color: white !important;
}

#new_shopping_list_form {
  .form-actions {

    a,
    input {
      height: 38px !important;
    }
  }
}

#shoppingList-pagination {
  width: 100%;
}

#add-new-shopping-list {
  display: inline-block;
}

#save_new_address {
  height: 38px !important;
}

#filter_open_button {
  display: inline-block !important;
}

.logo-wrap a {
  line-height: inherit !important;
}

.button-status-approval,
.button-status-reject {
  display: inline-block !important;
}

#filter_cancel_button,
#filter_apply_button {
  display: inline-block;
}

#shopping-list-pagination {
  float: unset !important;
}

.productView-options .form-action {
  margin-top: 0 !important;
}

.quotes-filter-form {
  .filter-fields {
    .filter-status {
      width: unset;
    }
  }
}
// invoice payment pagination
#payment-pagination {
  float: none !important;
}

← Changelog →