Squarespace Code Snippets

01_squarespace_header.html

<!-- INJECT IN HEADER -->

<meta name="gspro-config"
      content="https://data.goodshuffle.com/vendor/your-public-website-key" />

<!-- These script tags load the Goodshuffle Pro webcomponents,
     The URL contains a version (e.g. "0.2.6") – you may need to change this periodically.  -->
<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>

<!-- This script is used to avoid scrolling issues when displaying item details -->
<script src="https://unpkg.com/tua-body-scroll-lock"></script>

02_squarespace_footer.html

<!-- INJECT IN FOOTER -->

<div class="gspro-gallery-omni-present">
  
  <!-- This is used to display the wishlist (both floating action button and the displayed item. -->
  <gspro-wishlist route="/wishlist"> </gspro-wishlist>

  <!-- This is used to display item detail. -->
  <gspro-item-detail
    data-mode="inactive"
    class="gspro-u-fullscreen"
    route="/item/:id/:title*"></gspro-item-detail>

  <!-- This loads a single file that contains multiple images. -->
  <gspro-sprite></gspro-sprite>

</div>

<!-- These javascript can be customized as you see fit, but you should need to edit them. -->
<script>
(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();
      }
    });
  }

  document.addEventListener("DOMContentLoaded", () => {
    initBodyScrollLockListener();
    initCategoryToggle();
    initDetailToggle();
  });
})();
</script>

03_squarespace_complete_inventory.html

<!-- ADD TO ACTUAL PAGE -->

<!-- Add this to a page inside a "code" block. This will display a list of categories
     and a list of items on a single page. Although it this isn't required, it will
     help you see how things work. -->
<div class="gspro-gallery-viewer" id="gspro">
  <gspro-categories route="/inventory/:category?/:group?"
  ></gspro-categories>
  <gspro-item-list route="/inventory/:category?/:group?"
    category="furniture-rentals"
  ></gspro-item-list>
</div>

04_add_to_design.css

/*** ADD TO SITE DESIGN ***/

/* How do I customize the color and border of an item card? */

gspro-item-card.gspro-o-card {
  background: aqua;
  border: 3px solid navy;
  border-radius: 15px;
}

gspro-item-card.gspro-o-card:hover {
  background: yellow;
  border: 3px solid fuchsia;
  border-radius: 15px;
}

/* How do I customize the item card's add to wishlist button? */

gspro-item-card.gspro-o-card button.gspro-o-button {
  background: red;
}

gspro-item-card.gspro-o-card button.gspro-o-button:hover {
  background: blue;
}

gspro-item-card.gspro-o-card button.gspro-o-button .gspro-o-icon use {
  fill: blue;
}

gspro-item-card.gspro-o-card button.gspro-o-button:hover .gspro-o-icon use {
  fill: red;
}

/* How do I customize the wishlist... */

gspro-wishlist.gspro-c-wishlist .gspro-c-cart__count {
  background: silver;
  color: black;
}

gspro-wishlist.gspro-c-wishlist:hover .gspro-c-cart__count {
  background: black;
  color: silver;
}

gspro-wishlist.gspro-c-wishlist .gspro-c-cart__trigger {
  background: green;
}

gspro-wishlist.gspro-c-wishlist .gspro-o-icon--wishlist use {
  fill: palegoldenrod;
}

gspro-wishlist.gspro-c-wishlist:hover .gspro-c-cart__trigger {
  background: palegoldenrod;
}

gspro-wishlist.gspro-c-wishlist:hover .gspro-o-icon--wishlist use {
  fill: green;
}

/* ...the expanded state. */

gspro-wishlist.gspro-c-wishlist {
  background: black;
  color: white;
}

/* How do I customize the color of the category links and hover states? */

gspro-categories.gspro-c-categories {
  /* No background is provided by default, you can set one.*/
  background: white;
}

gspro-categories.gspro-c-categories a {
  background: inherit;
}

gspro-categories.gspro-c-categories a:hover {
  color: rgb(250, 250, 250);
}

gspro-categories.gspro-c-categories a.gspro-u-active {
  color: rgb(250, 250, 250);
}

gspro-categories.gspro-c-categories ul li a.gspro-u-active:hover {
  color: rgb(250, 250, 250);
}

/* How do I disable the hover state for category links on touch devices? */

@media (hover: none) {
  gspro-categories.gspro-c-categories a:hover {
    color: inherit;
  }
}

05_add_to_design.css

/**
 ** 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;
  overflow-y: auto;
  width: 100%;
}

/** Wishlist **/

gspro-wishlist header::before, gspro-wishlist header::after {
  content: none;
}

/** Item Detail Modal **/

gspro-item-detail.gspro-u-fullscreen {
  position: fixed;
  background: white;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  transition: visibility 0s, opacity 0.5s linear;
  overflow: scroll;
}

gspro-item-detail.gspro-u-fullscreen[data-mode="inactive"] {
  visibility: hidden;
  opacity: 0;
}

gspro-item-detail.gspro-u-fullscreen[data-mode="active"] {
  visibility: visible;
  opacity: 1;
}

@media screen and (min-width: 767px) {
  gspro-item-detail.gspro-u-fullscreen {
    background: rgba(0, 0, 0, 0.3);
    max-height: 100%;
    padding: 0 12px;
  }
  gspro-item-detail.gspro-u-fullscreen>div {
    background: white;
    border-radius: 4px;
    width: 95vw;
    max-width: 980px;
    height: 80vh;
    margin: 10vh auto;
    overflow: auto;
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
  }
}