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:

    .body {
  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;
      }
    }
  }
}

// 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;
    }
  }
}

// account dropdown 
#accountOptions {
  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;
      }
    }
  }
}

  • 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 roleId = sessionStorage.getItem('B3RoleId');

                    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 companyId = sessionStorage.getItem('B3CompanyId');
                        const addressBookEnabled = sessionStorage.getItem('B3AddressBookIsEnabled');

                        // 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 prevCompanyId = sessionStorage.getItem('B3CompanyId');
                                    const timer = setInterval(() => {
                                        const currCompanyId = sessionStorage.getItem('B3CompanyId');
                                        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/js/theme/global.js

    export default class Global extends PageManager {
    onReady() {
        // other code
      
        // add the following code
        window.b3themeConfig.useContainers = {
            'tpa.container': '.page .page-content',
        }
    }
}

  • assets/scss/theme.scss

    add the folloing code at the end of the file:

    .body {
  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}}

  • assets/scss/theme.scss

    add the folloing code at the end of the file:

    .body {
  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;
}
.c001 table>tbody>tr .dropdown-menu {
  background: stencilColor("navPages-subMenu-backgroundColor")!important;
}

# Supermarket

  • assets/js/theme/global.js

    export default class Global extends PageManager {
    onReady() {
     // other code
      
     // add the following code
      const inPages = () => {
        const urlArray = [
          '/buy-again/',
          '/address-book/',
          '/quote/',
          '/quotes-list/',
          '/dashboard/',
          '/order-detail/',
          '/quick-order-pad/',
          '/shopping-list/',
          '/shopping-lists/',
          '/user-management/',
          '/account.php',
          '/invoices/',
          '/invoice-payment/',
          '/invoice-details/',
          '/invoice-payment-receipt/',
        ];
        const current = window.location.pathname;
        return urlArray.includes(current);
      };
      if (inPages()) {
        const style = document.createElement('style');
        style.innerHTML = `
            .navBar.navBar--sub.navBar--account {
                display: block !important;
            }
        `;
        document.querySelector('head').append(style);
        const sideBar = document.querySelector('.page .page-sidebar');
        sideBar.remove();
      }
      window.b3themeConfig.useContainers = {
          'dashboard.endMasquerade.container': '.emthemesModez-header-userSection.emthemesModez-header-userSection--logo-left',
      };
				
    }
}

  • assets/scss/theme.scss

    add the folloing code at the end of the file:

    .body {
  display: none;
}
#shopping_list_table,.b2b-column-left{
  .input-text {
    padding: 0;
  }
  .product-qty-col{
    input{
      padding: 0;
      text-align: center;
    }
  }
}
  
.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;
}

# Vault

  • assets/scss/theme.scss

    add the folloing code at the end of the file:

    .body {
  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: none;
}

#pc-quickorderpad-entry:first-child {
  display: flex;
  width: 340px;
}
.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: 9999!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;
}
.quotes .quotes-search-form {
  line-height: normal !important;
}

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

  • 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',
      }

      window.b3themeConfig.useJavaScript = {
        login: {
          callback(instance) {
            const roleId = sessionStorage.getItem('B3RoleId')

            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);
              }
              hideWishList()
            }

            const bindMasqueradAction = () => {
              ((selectors) => {
                selectors.forEach(selector => {
                  $('body').on('click', selector, async () => {
                    await instance.getIsShowAddressBook()
                    renderDropDownMenu()
                    renderMobileNavs()
                    const prevCompanyId = sessionStorage.getItem('B3CompanyId')
                    const timer = setInterval(() => {
                      const currCompanyId = sessionStorage.getItem('B3CompanyId')
                      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/scss/theme.scss

    add the folloing code at the end of the file:

    .body {
  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;
}
.salerep-infobox {
  position: fixed!important;
  top: 0;
}
.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;
    }
  }
}

← Changelog →