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

Customize other popular themes
- Camden
- 22 Savile Row
- Supermarket
- Vault
- Roots

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

← RESTful APIs call