Gallery Example

How to customize gspro-item-card webcomponents using selectors.

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/[email protected]/dist/gspro-wc/gspro-wc.esm.js"></script>
    <script nomodule="" src="https://unpkg.com/@goodshuffle/[email protected]/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>
    <gspro-item-gallery category="furniture-rentals"></gspro-item-gallery>

    <!-- START: Goodshuffle Pro Website Integration "footer" Content -->
    <div class="gspro-gallery-omni-present">
      <gspro-sprite></gspro-sprite>
      <gspro-wishlist></gspro-wishlist>
      <gspro-item-detail></gspro-item-detail>
    </div>
    <!-- END: Goodshuffle Pro Website Integration "footer" Content -->

  </body>

</html>

CSS

/**
  * Customizable sample; this does not use preset variables.
  */

gspro-item-card {
  background: rgb(250, 250, 250);
}

gspro-item-card:hover {
  background: rgb(255, 255, 255);
}

gspro-item-card .gspro-o-card__title {
  color: #1F1F1F;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

gspro-item-card .gspro-o-card__subtitle {
  color: #464646;
}

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

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

/** Wishlist **/

gspro-wishlist[data-mode="collapse"] {
  background: white;
}

gspro-wishlist[data-mode="collapse"] .gspro-c-wishlist__count {
  background: black;
  color: white;
}

gspro-wishlist[data-mode="collapse"] use {
  fill: black;
}

gspro-wishlist[data-mode="expand"] {
  background: hotpink;
}

/** Item Detail **/

gspro-item-detail .gspro-c-item-detail__title {
  color: black;
}

gspro-item-detail .gspro-c-item-detail__price {
  border: 1px solid black;
  color: black;
}

/** Buttons **/

button.gspro-o-button:hover {
  background: rgba(255, 255, 255, 0.2);
}

button.gspro-o-button--primary {
  background: #1F1F1F;
}

button.gspro-o-button--primary:hover {
  background: #3F3F3F;
}

button.gspro-o-button--reverse {
  background: white;
  color: hotpink;
}

button.gspro-o-button--reverse:hover {
  background: rgba(255, 255, 255, 0.8);
  color: hotpink;
}

button.gspro-o-button--icon {
  background: inherit;
}

button.gspro-o-button--icon:hover {
  background: rgba(255, 255, 255, 0.2);
}

button.gspro-o-button--warning {
  background: darkorange;
  color: white;
}

button.gspro-o-button--warning:hover {
  background: darkred;
  color: white;
}

/** Item List **/

gspro-item-list .gspro-o-pagination__button {
  color: darkorange;
}


: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 {
 ...