# 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-account .navPage-subMenu-list .b3-navs').remove(); instance.renderB3Navs({ containerSelector: '#navPages-account .navPage-subMenu-list', navItemClassName: 'navPage-subMenu-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() renderMobileNavs() } }) }) }) })(['[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; } .b2b-loading-overlay { z-index: 99999!important; } header div#menu { z-index: 999!important; } .salerep-infobox { z-index: 1000!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', } 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() } 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
andproduct.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; }