Rear view in Spreadshop

If you want to display the rear view of articles to your customers in Spreadshop, this might help you a lot.

by Thimo Grauerholz

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<html>

  <head>
    <title>Shop mit rear view</title>
  </head>

  <body>
    <div id="myShop">
      <a href="//shop.spreadshirt.net/welovetee"></a>
    </div>

    <script>
    var spread_shop_config = {
      shopName: 'welovetee',
      locale: 'de_DE',
      prefix: '//shop.spreadshirt.de/',
      baseId: 'myShop',
      startToken: ""
    };
  </script>
  <script type="text/javascript" src="//shop.spreadshirt.de/shopfiles/shopclient/shopclient.nocache.js">
  </script>


  </body>

</html>

CSS

/* Hide intro for this sample */

#header-html {
  display: none !important
}


/* Align rear view */

.diff-view {
  width: 100px;
  align-self: flex-end;
  margin-bottom: 40px;
}


/* Hide rear view, when screensize < 480 */

@media screen and (max-width: 480px) {
  .diff-view {
    display: none !important
  }
}

JavaScript

jQuery(function($) {
      setInterval(function() {
        $('.sprd-product-list-item').each(function() {
          if (!$(this).find('.diff-view').length) {
            var oldImgSrc = $(this).find('div:not(.diff-view)').find('img').attr('src');
            var newImgSrc = oldImgSrc.replace('views/1', 'views/2');
            $(this).find('.sprd-img-spinner').parent().prepend('<div class="sprd-wrapped-image sprd-loadable sprd-squareSize diff-view"><img class="gwt-Image sprd-wrapped-image__img" src="' + newImgSrc + '"></div>');
          }
        });
      }, 1000);
    });