# 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:

    .salerep-infobox {
      display: none;
      top: 98px !important;
      z-index: 1 !important;
      @include breakpoint("medium") {
        top: 0 !important;
      }
      .container {
        @include breakpoint("large") {
          padding: 0 6rem !important;
        }
      }
    }
    #shoppinglist-dropdown,
    #quick-shoppinglist-dropdown {
      &:before,
      &:after {
        display: none;
      }
    }
    .account-product .account-product-checkItem .form-checkbox + .form-label::after,
    .account-product .account-product-checkItem .form-radio + .form-label::after {
      top: 0.28571rem !important;
    }
    #shopping_list_table .col-action .action-lists {
      width: 175px !important;
    }
    .swal2-icon.swal2-warning {
      width: 80px !important;
      height: 80px !important;
      border-width: 4px !important;
      margin: 20px auto 30px !important;
    }
    
  • assets/js/theme/global.js

    export default class Global extends PageManager {
        onReady() {
         // other code
          
         // add the following code
          window.b3themeConfig.useStyles = {
            'dashboard.search.input': {
              paddingRight: '1rem !important',
            },
            'dashboard.head.container': {
              backgroundColor: '#ebebeb',
              color: '#333',
              display: 'none'
            },
          }
    
          window.b3themeConfig.useJavaScript = {
            login: {
              callback(instance) {
                $('main.page').css({
                  width: '100%'
                })
                const roldId = sessionStorage.getItem('B3RoleId')
    
                const renderMobileNavs = () => {
                  if (!instance.isMobile) return;
                  $('.navPages .navPages-list--user .b3-navs').remove();
    
                  instance.renderB3Navs({
                    containerSelector: '.navPages .navPages-list--user',
                    navItemClassName: 'navPages-item b3-navs',
                  })
    
                  hideWishList()
                }
    
                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 renderDropDownMenu = () => {
                  $('.b3-dropdown-menu').remove();
                  instance.renderB3Navs({
                    containerSelector: '#accountOptions',
                    navItemClassName: 'dropdown-menu-item b3-dropdown-menu',
                    insertType: 'afterbegin'
                  })
    
                  $('.dropdown-menu .navBar-action').removeClass('navBar-action')
    
                  const isSaleRep = roldId === '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()
                          }
                        })
                      })
                    })
                  })(['[action-begin-masquerade]', '[end-masquerade]']);
                }
    
                const hideJuniorSaw = () => {
                  const isJunior = roldId === '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 (roldId) {
                    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>
    

# 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:

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

# 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/',
              '/create-quote/',
              '/quote-detail/',
              '/quote-edit/',
              '/quote-list/',
              '/dashboard/',
              '/order-detail/',
              '/quick-order-pad/',
              '/shopping-list/',
              '/shopping-lists/',
              '/user-management/',
            ];
            const current = window.location.pathname;
            return urlArray.includes(current);
          };
          if (inPages()) {
            const style = document.createElement('style');
            style.innerHTML = `.page-sidebar{display:none;}`;
            document.querySelector('head').append(style);
          }
    				
        }
    }
    
  • assets/scss/theme.scss

    add the folloing code at the end of the file:

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

# Vault

  • assets/scss/theme.scss

    add the folloing code at the end of the file:

    .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;
    }
    
    .dropdown-menu {
      max-height: 300px;
      overflow-y: auto;
    }
    
    .swal2-container {
      z-index: 99999!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;
    }
    
  • 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',
          }
    
          window.b3themeConfig.useJavaScript = {
            login: {
              callback(instance) {
                const roldId = 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 = roldId === '2'
                  if (isJunior) {
                      // pdp
                      $('#form-action-addToCart').parent().remove();
                  }
                }
    
                const renderDropDownMenu = () => {
                  $('.dropdown-menu.signout-list .b3-dropdown-menu').remove();
                  instance.renderB3Navs({
                    containerSelector: '.dropdown-menu .signout-list',
                    navItemClassName: 'dropdown-menu-item signout-list b3-dropdown-menu',
                    insertType: 'afterbegin'
                  })
    
                  $('.dropdown-menu .signout-list')
                    .children()
                    .removeClass('navPages-action')
                    .addClass('signout-list')
    
                  const isSaleRep = roldId === '3'
                  const companyId = sessionStorage.getItem('B3CompanyId')
    
                  hideWishList()
    
                  // restyle the end masquerade box
                  const timer = isSaleRep && companyId && setInterval(() => {
                    const $innerBox = $('.logo-user-section .salerep-infobox')
                    if ($innerBox.length) {
                      clearInterval(timer)
                      $('.logo-user-section').after($innerBox)
                      $innerBox.css({
                        float: 'initial',
                        position: 'relative',
                        top: 0,
                      }).show()
                    }
                  })
    
                }
    
                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 (roldId) {
                    renderDropDownMenu();
                    renderMobileNavs()
                    bindMasqueradAction()
                    hideJuniorSaw();
                }
    
              }
            },
            orders: {
              callback() {
                $('.navBar--account').eq(1).remove()
              }
            }
          }
        }
    }
    
  • 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}}
    

# Roots

  • assets/scss/theme.scss

    add the folloing code at the end of the file:

    #filter_open_button {
      max-width:15rem;
    }
    .modal-body .modal-close {
      color:#fff;
    }
    .salerep-infobox {
      position: fixed!important;
      top: 0;
    }
    .header-logo {
      padding:30px 15px 5px 15px!important;
    }
    #shopping_list_table .button--small {
      padding: 4px 10px;
    }
    [data-update-status].button--small {
      display: inline-block;
    }
    .address-lists-wrap .filter-box .filter-item.button-box {
      max-width: 15rem;
      a {
        margin-left:0!important;
      }
    }
    #shoppinglist-dropdown,
    #quick-shoppinglist-dropdown {
      max-height:300px ;
      overflow-y: auto;
      [add-to-list] {
        background: #fff;
        columns: #333333;
      }
      li {
        button,
        a {
          background:#fff;
          color:#333333;
        }
      }
    }
    [data-shoppinglist-add] .button.dropdown-menu-button {
      border: 1px solid #cccccc;
    }
    .button.dropdown-menu-button svg {
      fill: #424242;
      &:active {
        fill: #ffffff;
      }
    }
    .create-quote-actions,
    .quote-infomation+.float-right {
      display: flex;
    }
    #companyModalBody #modle-pagination {
      float: none;
    }
    .quote-detail-actions {
      display: flex;
      justify-content: flex-end;
    }
    .salerep-infobox {
      span {
        font-size: 15px;
      }
    }
    .swal2-container .swal2-icon-text {
      font-size: 3.75em!important;
    }