Category Filters

by goshujomo

HTML

<!DOCTYPE html>
<html dir="ltr" lang="en">

  <head>
    <title></title>
    <!-- START: Goodshuffle Pro Website Integration Head Content-->
    <meta name="gspro-config" content="https://demo-data.goodshuffle.com/vendor/XJH7jYzrbisvuSKHNINs6DT8NWlJcF" />
    <script type="module" src="https://unpkg.com/@goodshuffle/gspro-wc@0.2.6/dist/gspro-wc/gspro-wc.esm.js"></script>
    <script nomodule="" src="https://unpkg.com/@goodshuffle/gspro-wc@0.2.6/dist/gspro-wc/gspro-wc.js"></script>
    <script src="https://unpkg.com/tua-body-scroll-lock"></script>
    <!-- END: Goodshuffle Pro Website Integration Head Content-->
  </head>

  <body>

    <!-- -->
    <h1>
      Goodshuffle Pro Website Wishlist Integration
    </h1>

    <ol>
      <li>Fork this fiddle to make changes of your own.</li>
      <li>Replace meta tag content with <b>your</b> website key.</li>
    </ol>

    <p class="explanation">
      &hellip;update your gspro-config meta element with your own website key!
    </p>

    <input class="website-key" type="text" value="https://data.goodshuffle.com/vendor/YOUR-PUBLIC-WEB-SITE-KEY">

    <h2>Items</h2>
    
    <div class="gspro-gallery-viewer" id="gspro">
      <button
        id="gspro-categories-toggle"
        class="gspro-o-button gspro-o-button--expanded gspro-u-hide-desktop"
      >
        View Categories
      </button>
      <gspro-categories
        id="gspro-categories"
        route="/inventory/:category/:group?"
      ></gspro-categories>
      <gspro-item-list
        size="8"
        category="decor-rentals"
        route="/inventory/:category?/:group?"
      ></gspro-item-list>
    </div>

    <!-- START: Goodshuffle Pro Website Integration "footer" Content -->
    <div class="gspro-gallery-omni-present">
      <gspro-sprite></gspro-sprite>
      <gspro-wishlist></gspro-wishlist>
      <gspro-item-detail data-mode="inactive" class="gspro-u-fullscreen" route="/item/:id/:title*"></gspro-item-detail>
    </div>
    <!-- END: Goodshuffle Pro...

CSS

:root {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
}

.explanation {
  color: rgb(120, 120, 120);
  font-style: italic;
}

.website-key {
  width: 80%;
  padding: 0.3rem;
}

gspro-item-list.gspro-o-card-container {
  padding: 0;
}

/**
 ** Default Goodshuffle Pro Layouts
 **/

/** Basic Category + Item List Page Layout **/

#gspro {
  position: relative;
}

@media screen and (min-width: 767px) {
  #gspro {
    display: flex;
    flex-direction: row;
  }
}

/** Category **/

#gspro gspro-categories {
  min-width: 270px;
  width: 270px;
  background: white;
  display: block;
  transition: visibility 0s linear, opacity 300ms, max-height 1000ms;
}

#gspro gspro-categories[data-mode="inactive"] {
  visibility: hidden;
  max-height: 0vh;
  opacity: 0;
}

#gspro gspro-categories[data-mode="active"] {
  visibility: visible;
  max-height: 100vh;
  opacity: 1;
}

@media screen and (max-width: 767px) {
  #gspro gspro-categories {
    display: none;
  }
  #gspro gspro-categories.gspro-u-active {
    display: block;
    position: absolute;
    top: 0;
    width: 90%;
    max-width: 390px;
    height: 270px;
    overflow-y: scroll;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    z-index: 1;
  }
  #gspro gspro-categories.gspro-u-active::-webkit-scrollbar {
    -webkit-appearance: none;
  }
  #gspro gspro-categories.gspro-u-active::-webkit-scrollbar:vertical {
    width: 11px;
  }
  #gspro gspro-categories.gspro-u-active::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white;
    background-color: rgba(0, 0, 0, 0.5);
  }
}

@media screen and (min-width: 767px) {
  #gspro gspro-categories[data-mode="inactive"] {
    visibility: visible;
    opacity: 1;
    max-height: inherit;
  }
  .gspro-u-hide-desktop {
    display: none;
  }
}

/** Item List Layout **/

#gspro gspro-item-list {
  background: white;
 ...

JavaScript

(function() {
  function initCategoryToggle() {
    // Enable category toggle control.
    let toggler = document.querySelector("#gspro-categories-toggle");
    let categories = document.querySelector("#gspro-categories");
    let body = document.querySelector("body");
    if (!toggler || !categories) {
      return;
    }
    console.log("Goodshuffle Website Integration: Enabling category toggle");
    body.addEventListener("click", () => {
      categories.classList.remove("gspro-u-active");
    });

    toggler.addEventListener("click", event => {
      categories.classList.toggle("gspro-u-active");
      event.stopImmediatePropagation();
    });
  }

  function initBodyScrollLockListener() {
    if (bodyScrollLock == undefined) {
      return;
    }
    // If the gspro-item-detail exists and has the fullscreen utility class
    // then we should watch the attribute that indicates when it is active
    // and inactive.
    let itemDetail = document.querySelector(
      "gspro-item-detail.gspro-u-fullscreen"
    );
    if (!itemDetail) {
      return;
    }
    console.log(
      "Goodshuffle Website Integration: Enabling body scroll lock during item detail display"
    );
    itemDetail.addEventListener("gspro-item-detail.mode", ({ detail }) => {
      if (detail == "active") {
        bodyScrollLock.lock(detail);
      } else {
        bodyScrollLock.unlock(detail);
      }
    });
  }

  function initDetailToggle() {
    var detail = document.querySelector("gspro-item-detail.gspro-u-fullscreen");
    if (!detail) {
      return;
    }
    detail.addEventListener("click", e => {
      if (e.target == detail) {
        detail.close();
      }
    });
  }

  function initSearchListener() {
    var itemList = document.querySelector("#gspro-item-list");
    if (!itemList) {
      return;
    }
    var searchInput = document.querySelector("#gspro-search");
    if (!searchInput) {
      return;
    }
    searchInput.addEventListener("change", e => {
      let value...