PDJ Brandbox

product-filter 

<section class="product-filter">
    <div class="product-filter__inner">
        <div class="product-filter__selected">

        </div>

        <div class="product-filter__categories">
            <div class="product-filter__category" data-filter-category="compatible_software">
                <div class="product-filter__header" data-filter-toggle>
                    <span class="product-filter__label">Compatible software</span>

                    <span class="product-filter__amount" data-filter-amount="0"></span>

                    <span class="product-filter__trigger">
                        <span class="product-filter__icon"><svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                                <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                            </svg>
                        </span>
                    </span>
                </div>

                <div class="product-filter__content">
                    <div class="product-filter__filters">
                        <div class="product-filter__item">
                            <div class="checkbox">
                                <label class="checkbox__inner">
                                    <input type="checkbox" name="" value="" class="product-filter__filter">

                                    <span class="checkbox__spoof">
                                        <span class="checkbox__icon">
                                            <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                                                <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                                            </svg>

                                        </span>
                                    </span>

                                    <span class="checkbox__label">
                                        rekordbox
                                    </span>
                                </label>
                            </div>

                        </div>
                        <div class="product-filter__item">
                            <div class="checkbox">
                                <label class="checkbox__inner">
                                    <input type="checkbox" name="" value="" class="product-filter__filter">

                                    <span class="checkbox__spoof">
                                        <span class="checkbox__icon">
                                            <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                                                <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                                            </svg>

                                        </span>
                                    </span>

                                    <span class="checkbox__label">
                                        Serato DJ Pro
                                    </span>
                                </label>
                            </div>

                        </div>
                        <div class="product-filter__item">
                            <div class="checkbox">
                                <label class="checkbox__inner">
                                    <input type="checkbox" name="" value="" class="product-filter__filter">

                                    <span class="checkbox__spoof">
                                        <span class="checkbox__icon">
                                            <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                                                <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                                            </svg>

                                        </span>
                                    </span>

                                    <span class="checkbox__label">
                                        Serato DJ Lite
                                    </span>
                                </label>
                            </div>

                        </div>
                        <div class="product-filter__item">
                            <div class="checkbox">
                                <label class="checkbox__inner">
                                    <input type="checkbox" name="" value="" class="product-filter__filter">

                                    <span class="checkbox__spoof">
                                        <span class="checkbox__icon">
                                            <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                                                <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                                            </svg>

                                        </span>
                                    </span>

                                    <span class="checkbox__label">
                                        Included Serato voucher
                                    </span>
                                </label>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="product-filter__category" data-filter-category="number_of_channels">
                <div class="product-filter__header" data-filter-toggle>
                    <span class="product-filter__label">Number of channels</span>

                    <span class="product-filter__amount" data-filter-amount="0"></span>

                    <span class="product-filter__trigger">
                        <span class="product-filter__icon"><svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                                <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                            </svg>
                        </span>
                    </span>
                </div>

                <div class="product-filter__content">
                    <div class="product-filter__filters">
                        <div class="product-filter__item">
                            <div class="checkbox">
                                <label class="checkbox__inner">
                                    <input type="checkbox" name="" value="" class="product-filter__filter">

                                    <span class="checkbox__spoof">
                                        <span class="checkbox__icon">
                                            <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                                                <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                                            </svg>

                                        </span>
                                    </span>

                                    <span class="checkbox__label">
                                        4
                                    </span>
                                </label>
                            </div>

                        </div>
                        <div class="product-filter__item">
                            <div class="checkbox">
                                <label class="checkbox__inner">
                                    <input type="checkbox" name="" value="" class="product-filter__filter">

                                    <span class="checkbox__spoof">
                                        <span class="checkbox__icon">
                                            <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                                                <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                                            </svg>

                                        </span>
                                    </span>

                                    <span class="checkbox__label">
                                        2
                                    </span>
                                </label>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="product-filter__category" data-filter-category="controller_type">
                <div class="product-filter__header" data-filter-toggle>
                    <span class="product-filter__label">Controller type</span>

                    <span class="product-filter__amount" data-filter-amount="0"></span>

                    <span class="product-filter__trigger">
                        <span class="product-filter__icon"><svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                                <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                            </svg>
                        </span>
                    </span>
                </div>

                <div class="product-filter__content">
                    <div class="product-filter__filters">
                        <div class="product-filter__item">
                            <div class="checkbox">
                                <label class="checkbox__inner">
                                    <input type="checkbox" name="" value="" class="product-filter__filter">

                                    <span class="checkbox__spoof">
                                        <span class="checkbox__icon">
                                            <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                                                <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                                            </svg>

                                        </span>
                                    </span>

                                    <span class="checkbox__label">
                                        Main controller
                                    </span>
                                </label>
                            </div>

                        </div>
                        <div class="product-filter__item">
                            <div class="checkbox">
                                <label class="checkbox__inner">
                                    <input type="checkbox" name="" value="" class="product-filter__filter">

                                    <span class="checkbox__spoof">
                                        <span class="checkbox__icon">
                                            <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                                                <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                                            </svg>

                                        </span>
                                    </span>

                                    <span class="checkbox__label">
                                        Sub controller
                                    </span>
                                </label>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="product-filter__category" data-filter-category="real_mixer">
                <div class="product-filter__header" data-filter-toggle>
                    <span class="product-filter__label">Real mixer</span>

                    <span class="product-filter__amount" data-filter-amount="0"></span>

                    <span class="product-filter__trigger">
                        <span class="product-filter__icon"><svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                                <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                            </svg>
                        </span>
                    </span>
                </div>

                <div class="product-filter__content">
                    <div class="product-filter__filters">
                        <div class="product-filter__item">
                            <div class="checkbox">
                                <label class="checkbox__inner">
                                    <input type="checkbox" name="" value="" class="product-filter__filter">

                                    <span class="checkbox__spoof">
                                        <span class="checkbox__icon">
                                            <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                                                <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                                            </svg>

                                        </span>
                                    </span>

                                    <span class="checkbox__label">
                                        Yes
                                    </span>
                                </label>
                            </div>

                        </div>
                        <div class="product-filter__item">
                            <div class="checkbox">
                                <label class="checkbox__inner">
                                    <input type="checkbox" name="" value="" class="product-filter__filter">

                                    <span class="checkbox__spoof">
                                        <span class="checkbox__icon">
                                            <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                                                <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                                            </svg>

                                        </span>
                                    </span>

                                    <span class="checkbox__label">
                                        No
                                    </span>
                                </label>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="product-filter__category" data-filter-category="on_jog_display">
                <div class="product-filter__header" data-filter-toggle>
                    <span class="product-filter__label">On jog display</span>

                    <span class="product-filter__amount" data-filter-amount="0"></span>

                    <span class="product-filter__trigger">
                        <span class="product-filter__icon"><svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                                <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                            </svg>
                        </span>
                    </span>
                </div>

                <div class="product-filter__content">
                    <div class="product-filter__filters">
                    </div>
                </div>
            </div>
            <div class="product-filter__category" data-filter-category="number_of_usb">
                <div class="product-filter__header" data-filter-toggle>
                    <span class="product-filter__label">Number of USB type B port</span>

                    <span class="product-filter__amount" data-filter-amount="0"></span>

                    <span class="product-filter__trigger">
                        <span class="product-filter__icon"><svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                                <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                            </svg>
                        </span>
                    </span>
                </div>

                <div class="product-filter__content">
                    <div class="product-filter__filters">
                    </div>
                </div>
            </div>
            <div class="product-filter__category" data-filter-category="jog_size">
                <div class="product-filter__header" data-filter-toggle>
                    <span class="product-filter__label">Jog size</span>

                    <span class="product-filter__amount" data-filter-amount="0"></span>

                    <span class="product-filter__trigger">
                        <span class="product-filter__icon"><svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                                <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                            </svg>
                        </span>
                    </span>
                </div>

                <div class="product-filter__content">
                    <div class="product-filter__filters">
                        <div class="product-filter__item">
                            <div class="checkbox">
                                <label class="checkbox__inner">
                                    <input type="checkbox" name="" value="" class="product-filter__filter">

                                    <span class="checkbox__spoof">
                                        <span class="checkbox__icon">
                                            <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                                                <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                                            </svg>

                                        </span>
                                    </span>

                                    <span class="checkbox__label">
                                        Big
                                    </span>
                                </label>
                            </div>

                        </div>
                        <div class="product-filter__item">
                            <div class="checkbox">
                                <label class="checkbox__inner">
                                    <input type="checkbox" name="" value="" class="product-filter__filter">

                                    <span class="checkbox__spoof">
                                        <span class="checkbox__icon">
                                            <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                                                <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                                            </svg>

                                        </span>
                                    </span>

                                    <span class="checkbox__label">
                                        Small
                                    </span>
                                </label>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="product-filter__category" data-filter-category="screen_size">
                <div class="product-filter__header" data-filter-toggle>
                    <span class="product-filter__label">Screen size</span>

                    <span class="product-filter__amount" data-filter-amount="0"></span>

                    <span class="product-filter__trigger">
                        <span class="product-filter__icon"><svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                                <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                            </svg>
                        </span>
                    </span>
                </div>

                <div class="product-filter__content">
                    <div class="product-filter__filters">
                        <div class="product-filter__item">
                            <div class="checkbox">
                                <label class="checkbox__inner">
                                    <input type="checkbox" name="" value="" class="product-filter__filter">

                                    <span class="checkbox__spoof">
                                        <span class="checkbox__icon">
                                            <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                                                <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                                            </svg>

                                        </span>
                                    </span>

                                    <span class="checkbox__label">
                                        9 inch
                                    </span>
                                </label>
                            </div>

                        </div>
                        <div class="product-filter__item">
                            <div class="checkbox">
                                <label class="checkbox__inner">
                                    <input type="checkbox" name="" value="" class="product-filter__filter">

                                    <span class="checkbox__spoof">
                                        <span class="checkbox__icon">
                                            <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                                                <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                                            </svg>

                                        </span>
                                    </span>

                                    <span class="checkbox__label">
                                        7 inch
                                    </span>
                                </label>
                            </div>

                        </div>
                        <div class="product-filter__item">
                            <div class="checkbox">
                                <label class="checkbox__inner">
                                    <input type="checkbox" name="" value="" class="product-filter__filter">

                                    <span class="checkbox__spoof">
                                        <span class="checkbox__icon">
                                            <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                                                <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                                            </svg>

                                        </span>
                                    </span>

                                    <span class="checkbox__label">
                                        FL (3.9 x 1.6 inch)
                                    </span>
                                </label>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="product-filter__category" data-filter-category="dvs_control">
                <div class="product-filter__header" data-filter-toggle>
                    <span class="product-filter__label">DVS control</span>

                    <span class="product-filter__amount" data-filter-amount="0"></span>

                    <span class="product-filter__trigger">
                        <span class="product-filter__icon"><svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                                <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                            </svg>
                        </span>
                    </span>
                </div>

                <div class="product-filter__content">
                    <div class="product-filter__filters">
                    </div>
                </div>
            </div>
            <div class="product-filter__category" data-filter-category="soundcard">
                <div class="product-filter__header" data-filter-toggle>
                    <span class="product-filter__label">Soundcard (Bit rate)</span>

                    <span class="product-filter__amount" data-filter-amount="0"></span>

                    <span class="product-filter__trigger">
                        <span class="product-filter__icon"><svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                                <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                            </svg>
                        </span>
                    </span>
                </div>

                <div class="product-filter__content">
                    <div class="product-filter__filters">
                    </div>
                </div>
            </div>
            <div class="product-filter__category" data-filter-category="color">
                <div class="product-filter__header" data-filter-toggle>
                    <span class="product-filter__label">Color</span>

                    <span class="product-filter__amount" data-filter-amount="0"></span>

                    <span class="product-filter__trigger">
                        <span class="product-filter__icon"><svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                                <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                            </svg>
                        </span>
                    </span>
                </div>

                <div class="product-filter__content">
                    <div class="product-filter__filters">
                        <div class="product-filter__item">
                            <div class="checkbox">
                                <label class="checkbox__inner">
                                    <input type="checkbox" name="" value="">

                                    <span class="checkbox__spoof">
                                        <span class="checkbox__icon">
                                            <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                                                <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                                            </svg>

                                        </span>
                                    </span>

                                    <span class="checkbox__label">

                                    </span>
                                </label>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
 
<section class="product-filter">
  <div class="product-filter__inner">
    <div class="product-filter__selected">

    </div>

    <div class="product-filter__categories">
      {{#each categories }}
      <div class="product-filter__category" data-filter-category="{{ id }}">
        <div class="product-filter__header" data-filter-toggle>
          <span class="product-filter__label">{{ label }}</span>

          <span class="product-filter__amount" data-filter-amount="0"></span>

          <span class="product-filter__trigger">
            <span class="product-filter__icon">{{render '@icon-chevron' }}</span>
          </span>
        </div>

        <div class="product-filter__content">
          <div class="product-filter__filters">
            {{#each filters }}
            <div class="product-filter__item">
              {{render '@checkbox' this }}
            </div>
            {{/each}}
          </div>
        </div>
      </div>
      {{/each}}
    </div>
  </div>
</section>
 
categories:
  - label: Compatible software
    id: compatible_software
    filters:
      - label: rekordbox
        id: rekordbox
        checked: false
        class: product-filter__filter
      - label: Serato DJ Pro
        id: serato_dj_pro
        checked: false
        class: product-filter__filter
      - label: Serato DJ Lite
        id: serato_dj_lite
        checked: false
        class: product-filter__filter
      - label: Included Serato voucher
        id: included_serato_voucher
        checked: false
        class: product-filter__filter
  - label: Number of channels
    id: number_of_channels
    filters:
      - label: 4
        id: 4
        checked: false
        class: product-filter__filter
      - label: 2
        id: 2
        checked: false
        class: product-filter__filter
  - label: Controller type
    id: controller_type
    filters:
      - label: Main controller
        id: controller_type-main
        checked: false
        class: product-filter__filter
      - label: Sub controller
        id: controller_type-sub
        checked: false
        class: product-filter__filter
  - label: Real mixer
    id: real_mixer
    filters:
      - label: 'Yes'
        id: real_mixer-yes
        checked: false
        class: product-filter__filter
      - label: 'No'
        id: real_mixer-no
        checked: false
        class: product-filter__filter
  - label: On jog display
    id: on_jog_display
  - label: Number of USB type B port
    id: number_of_usb
  - label: Jog size
    id: jog_size
    filters:
      - label: Big
        id: big
        checked: false
        class: product-filter__filter
      - label: Small
        id: small
        checked: false
        class: product-filter__filter
  - label: Screen size
    id: screen_size
    filters:
      - label: 9 inch
        id: 9_inch
        checked: false
        class: product-filter__filter
      - label: 7 inch
        id: 7_inch
        checked: false
        class: product-filter__filter
      - label: FL (3.9 x 1.6 inch)
        id: fl
        checked: false
        class: product-filter__filter
  - label: DVS control
    id: dvs_control
  - label: Soundcard (Bit rate)
    id: soundcard
  - label: Color
    id: color
    filters:
      - label: null
  • Content: 
    const PRODUCTFILTER = ((w, d, undefined) => {

  'use strict';

  const selectors = {
    theCategory: '.product-filter__category',
    theContent: '.product-filter__content',
    theFilterWrap: '.product-filter__filters',
    theFilter: '.product-filter__filter',
    theToggler: '[data-filter-toggle]',
    theAmount: '.product-filter__amount',
  };

  const classes = {
    isVisible: 'is-visible',
  };

  const els = {};

  const s = {};

  const init = () => {
    els.theCategories = d.querySelectorAll(selectors.theCategory);

    if (!els.theCategories || els.theCategories.length <= 0) {
      return;
    }

    [...els.theCategories].forEach((theCategory) => {
      const theTogglers = theCategory.querySelectorAll(selectors.theToggler);
      const theFilters = theCategory.querySelectorAll(selectors.theFilter);

      setHeight(theCategory);

      [...theTogglers].forEach((theToggler) => {
        theToggler.addEventListener('click', () => {
          toggleIt(theCategory);
        });
      });

      [...theFilters].forEach((theFilter) => {
        theFilter.checked && updateAmount(theCategory, theFilter.checked);

        theFilter.addEventListener('change', () => {
          updateAmount(theCategory, theFilter.checked ? 1 : -1);
        });
      });
    });
  };

  const toggleIt = (theCategory) => {
    if (!theCategory) {
      return;
    }

    theCategory.classList.contains(classes.isVisible) ? theCategory.classList.remove(classes.isVisible) : theCategory.classList.add(classes.isVisible);
  };

  const updateAmount = (theCategory, amount) => {
    if (!theCategory || amount === null) {
      return;
    }

    const theAmount = theCategory.querySelector(selectors.theAmount);

    theAmount.dataset.filterAmount = ~~theAmount.dataset.filterAmount + amount;
  };

  const updateSelection = () => {

  };

  const setHeight = (theCategory) => {
    if (!theCategory) {
      return;
    }

    const theContent = theCategory.querySelector(selectors.theContent);
    const theFilterWrap = theCategory.querySelector(selectors.theFilterWrap);

    theContent.style.height = theFilterWrap ? `${theFilterWrap.offsetHeight}px` : 'auto';
  };

  d.addEventListener('DOMContentLoaded', init);

})(window, window.document);
  • URL: /components/raw/product-filter/product-filter.js
  • Filesystem Path: ../src/03_molecules/product-filter/product-filter.js
  • Size: 2.3 KB
  • Content: 
    .product-filter {
  font-size: 14px;
}

.product-filter__category {
  margin-top: var(--gap--4);
  padding-top: var(--gap--4);
  border-top: 1px solid var(--color--neutrals-3);

  &:first-child {
    margin-top: 0;
  }
}

.product-filter__category [data-filter-toggle] {
  cursor: pointer;
}

.product-filter__header {
  display: flex;
  align-items: center;
  user-select: none;
}

.product-filter__label {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
}

.product-filter__amount {
  margin-left: auto;
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 0;
}

[data-filter-amount]:before {
  content: attr(data-filter-amount);
  font-size: inherit;
  line-height: 1;
}

[data-filter-amount="0"]:before {
  content: '';
}

.product-filter__trigger {
  transition: transform 250ms;
  margin-left: var(--gap--3);
  flex: 0 0 14px;

  .product-filter__category.is-visible & {
    transform: rotateX(180deg);
  }
}

.product-filter__icon {
  transform: rotate(90deg);
  display: block;
}

.product-filter__content {
  transition: height 250ms, opacity 250ms;
  opacity: 1;
  overflow: hidden;

  .product-filter__category:not(.is-visible) & {
    height: 0 !important;
    opacity: 0;
  }
}

.product-filter__filters {
  padding: var(--gap--5) var(--gap--4) 0;
}

.product-filter__item {
  margin-top: var(--gap--3);

  &:first-child {
    margin-top: 0;
  }
}
  • URL: /components/raw/product-filter/product-filter.scss
  • Filesystem Path: ../src/03_molecules/product-filter/product-filter.scss
  • Size: 1.4 KB

No notes defined.