Summary Block Filter (Category/Tags)

Description

• adding Filter (Category/Tags) to Summary Block. This is extra code of Summary Block 30 items limit plugin. It won’t work if you use regular Summary Block or Summary Block with Lazy Load Plugin
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. First, make sure you installed Summary Block 30 items limit plugin (free) to remove 30 items limit on Summary Block

Note: You can install it and set it show 30 items, under or higher, not important.

#1.2. Make sure you enabled Category/Tags

#1.3. Add this code ABOVE Summary Block 30 items limit code (in Page Header Injection or Markdown [if you use Personal/Basic Plan])

<!-- 06.26c23v3(2) Summary Block Filter (Category/Tags) -->
<script>
window.SummaryFilterConfig = {
  sectionId: '',
  format: 'searchbar',
  logic: 'AND',
  multiSelect: false,
  showCount: false,
  hideEmpty: true,
  divider: '/',

  hideMeta: {
    cats: true,
    tags: true
  },

  filters: [
    {
      label: 'Destination',
      source: 'cats',
      options: ['Italy', 'Brazil', 'US', 'Singapore', 'Canada', 'UK', 'France', 'Japan'],
      // allLabel: 'All',
      // logic: 'or',
      // enable: true,
    },
    {
      label: 'Guests',
      source: 'tags',
      options: ['0 - 19', '20 - 100', '101 - 500', '501 - 1000'],
      // allLabel: 'All',
      // logic: 'or',
      // enable: true,
    },
    {
      label: 'Feature',
      source: 'tags',
      options: ['Sea views', 'City skyline', 'Beachfront', 'Mountain views'],
      // allLabel: 'All',
      // logic: 'or',
      // enable: true,
    }
  ],

  search: {
    enable: false,
    placeholder: 'Search...',
    fields: ['title', 'excerpt', 'tags', 'categories'],
    width: '240px',
    background: '#ffffff',
    border: '1px solid #000000',
    borderRadius: '4px',
    textSize: '14px',
    textColor: '#000000',
    placeholderColor: '#888888'
  },

  applyButton: {
    label: 'Find venues  →',
    background: '#d94f3d',
    textColor: '#ffffff',
    textSize: '14px',
    fontWeight: '600',
    borderRadius: '40px',
    padding: '0 28px'
  },

  searchbar: {
    background: '#ffffff',
    borderRadius: '40px',
    padding: '6px',
    segmentPadding: '0px 20px',
    segmentMinWidth: '150px',
    valueMaxWidth: '160px',
    divider: '1px solid #ececec',
    labelColor: '#9a9a9a',
    labelSize: '11px',
    valueColor: '#1a1a1a',
    valueSize: '16px',
    placeholder: '...',
    mobileGap: '8px',
    mobileSegmentPadding: '12px 20px'
  },

  loading: {
    enable: true,
    delay: 400,
    size: '36px',
    color: '#d94f3d',
    dimList: true
  },

  noResults: {
    enable: true,
    text: 'No venues match your selection.',
    textColor: '#888888',
    textSize: '15px'
  },

  style: {
    gap: '8px',
    rowGap: '16px',
    marginBottom: '24px',
    fontSize: '13px',
    labelWeight: '600',
    activeColor: 'transparent',
    activeTextColor: '#000000',
    inactiveColor: 'transparent',
    inactiveTextColor: '#000000',
    dropdown: {
      minWidth: '160px',
      background: '#ffffff',
      border: '1px solid #dddddd',
      borderRadius: '8px',
      textSize: '14px',
      textColor: '#000000',
      panelBackground: '#ffffff',
      hoverBackground: '#f2f2f2'
    }
  },

  plugins: []
};
</script>
<script src="https://code.beaverhero.com/summaryblock/0626c23v32summaryblogfilter30limit.js"></script>
<style>.smf-bar {justify-content: center;}@media screen and (max-width:767px) {#sm-pages .smf-apply {padding: 15px !important;border-top-left-radius: 0 !important;border-top-right-radius: 0 !important;}}</style>

#1.4. Update Category/Tags here (Line 17 to Line 42)

filters: [
  {
    label: 'Destination',
    source: 'cats',
    options: ['Italy', 'Brazil', 'US', 'Singapore', 'Canada', 'UK', 'France', 'Japan'],
    // allLabel: 'All',
    // logic: 'or',
    // enable: true,
  },
  {
    label: 'Guests',
    source: 'tags',
    options: ['0 - 19', '20 - 100', '101 - 500', '501 - 1000'],
    // allLabel: 'All',
    // logic: 'or',
    // enable: true,
  },
  {
    label: 'Feature',
    source: 'tags',
    options: ['Sea views', 'City skyline', 'Beachfront', 'Mountain views'],
    // allLabel: 'All',
    // logic: 'or',
    // enable: true,
  }
],

#1.4-2. label

• label: ‘Destination’,
• label: ‘Guests’,
• label: ‘Feature’,

will apear here

#1.4-3. source

• cats = category
• tags = tags

#1.4.-4. options: options you want to make appears in Dropdown

#2. Customize

#2.1. To change “Find Venue” button & its style, change Line 57 – Line 65

applyButton: {
  label: 'Find venues  →',
  background: '#d94f3d',
  textColor: '#ffffff',
  textSize: '14px',
  fontWeight: '600',
  borderRadius: '40px',
  padding: '0 28px'
},

#2.2. To change no result text, change Line 92 – Line 97

noResults: {
  enable: true,
  text: 'No venues match your selection.',
  textColor: '#888888',
  textSize: '15px'
},

#2.3. Filter supports 3 types of layout:

• searchbar (current layout)
• inline
• dropdown (simple dropdown)

You can adjust Line 05

format: 'searchbar',

to something like this

format: 'inline',

or

format: 'dropdown',

#2.4. Looking at the code, you’ll see many other options that you can explore further.