Portfolio Search – Filter

Description

• adding search, filter category to Portfolio Page
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. Click Gear icon on Portfolio Page

#1.2. Click Advanced > Paste this code

• If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

<!-- 07.26c29v2 Portfolio Search - Filter -->
<script>
window.PortfolioFilterBarConfig = {
  gridSelector: '#gridThumbs',
  order: ['search', 'filters', 'select'],
  enable: { search: true, filters: true, select: true },
  filtersMode: 'dropdown',
  selectAction: 'navigate',
  layout: {
    justify: 'space-between',
    gap: '10px',
    marginTop: '16px',
    marginBottom: '20px',
    sidePaddingDesktop: 'var(--pagePadding)',
    sidePaddingMobile: '6vw',
    gridPaddingTop: '0px',
    mobileBreakpoint: '767px'
  },
  search: {
    placeholder: 'Search projects...',
    width: '100%',
    padding: '12px 16px',
    color: '#333333',
    background: 'transparent',
    border: '1px solid #000',
    borderRadius: '0px',
    iconSize: '20px'
  },
  filters: {
    allLabel: 'All',
    color: '#333333',
    hoverColor: '#000000',
    activeColor: '#000000',
    fontSize: '16px',
    inlineGap: '18px',
    dropdownLabel: 'Category',
    dropdownWidth: '100%'
  },
  select: {
    label: 'Go to project',
    resetLabel: 'All projects',
    width: '100%'
  },
  dropdown: {
    color: '#333333',
    background: 'transparent',
    border: '1px solid #000',
    borderRadius: '0px',
    padding: '12px 16px',
    fontSize: '16px',
    menuBackground: '#ffffff',
    menuBorder: '1px solid #d0d0d0',
    menuMaxHeight: '320px',
    optionPadding: '10px 16px',
    optionHoverBackground: '#f2f2f2'
  },
  noResultsText: 'No projects found'
};
</script>
<script src="https://code.beaverhero.com/portfolio/0726c29v2portfoliosearchfilter.js"></script>
<style>.pfb-bar>div,.pfb-bar button{flex: 1 !important;border-top: none;border-left: none;border-right: none;padding-left: 0px !important;padding-right: 0px !important;
}</style>

#1.3. To add Category Filter to Category Dropdown, you can enter Category text to Item SEO Description, follow these.

First, click on each Portfolio item > Click Settings

Click SEO > at SEO Description, enter your desired category text.

#2. Customize

#2.1. To customize Search box, you can update these lines (line 19 – line 28)

search: {
  placeholder: 'Search projects...',
  width: '100%',
  padding: '12px 16px',
  color: '#333333',
  background: 'transparent',
  border: '1px solid #000',
  borderRadius: '0px',
  iconSize: '20px'
},

#2.2. To customize Category dropdown, update lines (line 29 – line 38)

filters: {
  allLabel: 'All',
  color: '#333333',
  hoverColor: '#000000',
  activeColor: '#000000',
  fontSize: '16px',
  inlineGap: '18px',
  dropdownLabel: 'Category',
  dropdownWidth: '100%'
},

#2.3. To customize Go to project dropdown, update lines (line 39 – line 43)

select: {
  label: 'Go to project',
  resetLabel: 'All projects',
  width: '100%'
},

#2.4. To change style of Dropdown Menu (Category Dropdown + Go to project dropdown), update line 44 – line 56

dropdown: {
  color: '#333333',
  background: 'transparent',
  border: '1px solid #000',
  borderRadius: '0px',
  padding: '12px 16px',
  fontSize: '16px',
  menuBackground: '#ffffff',
  menuBorder: '1px solid #d0d0d0',
  menuMaxHeight: '320px',
  optionPadding: '10px 16px',
  optionHoverBackground: '#f2f2f2'
},

#2.5. To enable/disable Search, Category dropdown or Go to project dropdown, change line 06

• true = enable
• false = disable

enable: { search: true, filters: true, select: true },

#2.6. To change order of Search, Category dropdown, Go to project dropdown, change line 05

order: ['search', 'filters', 'select'],

#2.7. To make Filter Bar sticky on scroll, use this code to Custom CSS box

• remember to update top: 250px in the code, this is space between filter bar – top of screen

div.pfb-wrap {
    position: sticky;
    top: 250px;
    z-index: 99999;
    background-color: #fff;
    padding-top: 5px;
    padding-bottom: 5px;
}

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit Site Footer

Add a Markdown Block

Add this code into Markdown

<script>
window.PortfolioFilterBarConfig = {
  gridSelector: '#gridThumbs',
  order: ['search', 'filters', 'select'],
  enable: { search: true, filters: true, select: true },
  filtersMode: 'dropdown',
  selectAction: 'navigate',
  layout: {
    justify: 'space-between',
    gap: '10px',
    marginTop: '16px',
    marginBottom: '20px',
    sidePaddingDesktop: 'var(--pagePadding)',
    sidePaddingMobile: '6vw',
    gridPaddingTop: '0px',
    mobileBreakpoint: '767px'
  },
  search: {
    placeholder: 'Search projects...',
    width: '100%',
    padding: '12px 16px',
    color: '#333333',
    background: 'transparent',
    border: '1px solid #000',
    borderRadius: '0px',
    iconSize: '20px'
  },
  filters: {
    allLabel: 'All',
    color: '#333333',
    hoverColor: '#000000',
    activeColor: '#000000',
    fontSize: '16px',
    inlineGap: '18px',
    dropdownLabel: 'Category',
    dropdownWidth: '100%'
  },
  select: {
    label: 'Go to project',
    resetLabel: 'All projects',
    width: '100%'
  },
  dropdown: {
    color: '#333333',
    background: 'transparent',
    border: '1px solid #000',
    borderRadius: '0px',
    padding: '12px 16px',
    fontSize: '16px',
    menuBackground: '#ffffff',
    menuBorder: '1px solid #d0d0d0',
    menuMaxHeight: '320px',
    optionPadding: '10px 16px',
    optionHoverBackground: '#f2f2f2'
  },
  noResultsText: 'No projects found'
};
</script>
<script src="https://code.beaverhero.com/portfolio/0726c29v2portfoliosearchfilter.js"></script>
<style>.pfb-bar>div,.pfb-bar button{flex: 1 !important;border-top: none;border-left: none;border-right: none;padding-left: 0px !important;padding-right: 0px !important;
}</style>