:spreadshop: Tipps und Tricks: Die besten Lifehacks

Hi,

ich möchte hier mal ein paar Lifehacks sammeln, die den Spreadshop individualisieren.

Bei Fragen oder Problemen bitte ein “neues” Thema erstellen oder hier posten Tipps und Tricks: Die besten Lifehacks Q&A.

Gruß
Thimo

9 Likes

Dir gefällt der Button “Personalisieren” auf der Detailseite in deinem Spreadshop nicht?

Vorher:

Nachher:

Code:
removed - see below (old outdated)

EDIT (NEW):

.SprdMain .sprd-detail-images__views > button:nth-child(5) {
    position: absolute;
    top: 40%;
    background-color: red;
    color: white;
    width: 155px;
    max-width: 100%;
    height: 60px;
    left: 64px;
    -webkit-border-radius: 0.2em;
    border-radius: 0.2em;
    border: 0;
    overflow: visible
}
.SprdMain .sprd-detail-images__views > button:nth-child(5) svg {
flex: 1;
    width: 28px;
    height: 28px;
    position: absolute;
    left: 12px;
    top: 12px;
    color: white;
}
.SprdMain .sprd-detail-images__views > button:nth-child(5) span {
  display: none;
}
.SprdMain .sprd-detail-images__views > button:nth-child(5)::after {
    content: "";
    position: absolute;
    left: 151px;
    top: 25px;
    width: 0;
    height: 0;
    border-left: 7.5px solid transparent;
    border-right: 7.5px solid transparent;
    border-top: 7.5px solid red;
    clear: both;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.SprdMain .sprd-detail-images__views > button:nth-child(5)::before {
    content: "Willst du das Produkt anpassen?";
    text-align: left;
    position: absolute;
    left: 50px;
    display: block;
    top: 6px;
    padding: 0;
}

.SprdMain .sprd-detail-images__views > button:nth-child(5):hover {
box-shadow: none;
background-color: darkred
}
7 Likes

Bild auf der Startseite austauschen

Das ist viel einfacher mit Javascript und der Javascript-Integration des Spreadshops, aber es geht auch umständlich über CSS:

Vorher:

Nachher:

Code:

.sprd-startpage-product-preview__preview:nth-of-type(1) .sprd-img-spinner__image {
  content: url('https://image.spreadshirtmedia.net/image-server/v1/products/136584081/views/1,width=500,height=500,appearanceId=366,crop=list,modelId=85')
}

Erklärung:

  • nth-of-type(1) bedeutet: nehme das erste Element 1 von allen Bildern der Startseite. Wenn man nur das zweite Bild austauschen möchte wäre es 2,…
  • content:url('') bedeutet: Ersetze den Pfad des vorherigen Bildes mit dem neuen. In der Regel reicht es schon den Link des alten Motivs (XXL-Shirt) zu nehmen und die modelId und appearanceId zu ändern. Hier gebe ich aber gerne Hilfestellung :slight_smile:

Wichtig:
Es muss ein Bild vom Spreadshirt-Server sein, dass heißt ihr könnt auch ein x-beliebiges Bild nehmen, solltet es aber vorher auf Spreadshirt hochladen. Also Beispielsweise ein anderes Vorschaubild, Mockup, Design oder Rechnungslogo. Leider kann man keine eigenen Bilder mehr hochladen :frowning:
Das ganze sieht natürlich anders aus, wenn ihr den Shop per Javascript einbindet :wink:

4 Likes

12 posts were merged into an existing topic: Tipps und Tricks: Die besten Lifehacks Q&A

Rückansicht für mit Javascript bzw. SpreadShop Plugin eingebundene Shops

Nachher:

Code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script>
    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').replace(/modelId\=[0-9]*\,/g, '').replace(/\,version\=[0-9]*\.jpg/g, '');
            $(this).find('.sprd-img-spinner').parent().prepend('<div class="sprd-wrapped-image sprd-loadable sprd-squareSize diff-view"><img class="sprd-img-spinner__image" src="' + newImgSrc + '"></div>');
          }
        });
      }, 1000);
    });
  </script>

Code komplett:


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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style>

    /* 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
      }
    }
  </style>
</head>

<body>
  <div id="myShop"> <a href="//shop.spreadshirt.de/welovetee">Lovetee</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>
  <script>
    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').replace(/modelId\=[0-9]*\,/g, '').replace(/\,version\=[0-9]*\.jpg/g, '');
            $(this).find('.sprd-img-spinner').parent().prepend('<div class="sprd-wrapped-image sprd-loadable sprd-squareSize diff-view"><img class="sprd-img-spinner__image" src="' + newImgSrc + '"></div>');
          }
        });
      }, 1000);
    });
  </script>
</body>

</html>

Anleitung für Javascript Integration inkl. Video:

1 Like

Danke für deine Tips :heart:

1 Like

2 posts were merged into an existing topic: Tipps und Tricks: Die besten Lifehacks Q&A

A post was merged into an existing topic: Tipps und Tricks: Die besten Lifehacks Q&A

Nach oben Pfeil (Zurück nach oben)

Nachher:
07

Code:

  • “HTML für Shop-Header bearbeiten” folgendes einfügen:
<a name="top"></a>
  • “HTML für Shop Footer bearbeiten” folgendes einfügen:
<a href="#top" id="back-to-top"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M 12 0.013671875 C 8.924 0.013671875 5.8471719 1.1801719 3.5136719 3.5136719 C -1.1533281 8.1806719 -1.1533281 15.817375 3.5136719 20.484375 C 8.1806719 25.151375 15.817375 25.151375 20.484375 20.484375 C 25.151375 15.817375 25.151375 8.1806719 20.484375 3.5136719 C 18.150875 1.1801719 15.076 0.013671875 12 0.013671875 z M 12 2.0117188 C 14.56325 2.0117187 17.125813 2.9851875 19.070312 4.9296875 C 22.959312 8.8186875 22.959312 15.181312 19.070312 19.070312 C 15.181313 22.959312 8.8186875 22.959312 4.9296875 19.070312 C 1.0406875 15.181313 1.0406875 8.8186875 4.9296875 4.9296875 C 6.8741875 2.9851875 9.43675 2.0117188 12 2.0117188 z M 12 4.9296875 L 4.9296875 12 L 6.640625 13.710938 L 11.003906 9.3476562 L 11 19 L 13 19 L 12.996094 9.3476562 L 17.353516 13.703125 L 19.070312 12 L 12 4.9296875 z"></path>
</svg></a>
  • “Shop CSS bearbeiten” folgendes einfügen:
#back-to-top {
    padding: 10px;
    transition: all .2s;
    position: fixed;
    bottom: 50px;
    right: 0;
    background: #00b2a6;
    color: #fff;
    cursor: pointer;
    border-radius: 2px 0 0 2px;
    box-shadow: -1px 1px 4px -1px rgba(0,0,0,.2);
display:block
}
#back-to-top svg {
      width: 32px;
    height: 32px;
  fill:white
}
5 Likes

Merge hier gerne rein, falls jemand andere Tipps und Tricks auf Lager hat! Zwecks Übersichtlichkeit aber gesperrt :slight_smile:

Für Fragen, Ideen usw. bitte dieses Thema nutzen: Tipps und Tricks: Die besten Lifehacks Q&A

Warenkorb per Javascript auslesen

Ihr möchtet z.B. auf einer anderen Seite den Inhalt des Warenkorbs vom Spreadshop auslesen oder ihr habt den Spreadshop mit Javascript/Wordpress eingebunden und möchtet den Warenkorb auslesen und weiterverarbeiten? Das könnt ihr so:

Z.B. mit jQuery:

// Fester Storage Item "shpbskt"
    let basketID = localStorage.getItem("shpbskt");

        $.get(
            `https://api.spreadshirt.net/api/v1/baskets/${basketID}?mediaType=json`, 
            (r) => {
// hier kommt eure Callback-Function rein, die die Daten verarbeitet und anzeigt.
                console.log(r);
            },
            'json');

Für EU nehmt ihr api.spreadshirt.net für US entsprechend api.spreadshirt.com.

3 Likes

Du möchtest die Social Icons im Header ausblenden?

Füge folgendes ein:

.sprd-social-bar--header {
  display:none
}
1 Like

Einzelne Inhalte des Shops auf einer anderen Seite einbinden

Mittels jQuery laden wir in dem Beispiel den Header inkl. Navigation, Body und Footer.

Es könnte aber sein, das die Links dann nicht mehr funktionieren, also am besten nur für statische Inhalte gedacht :wink:

1 Like

Shop Designer Deep-Link Integration (starten mit Produkt, Artikel oder Design oder,…)

Mit einem bestimmten Produkt:

<div id="myShop"> <a href="//shop.spreadshirt.de/kleidung-gestalten">Designer lädt...</a> </div>
  <script>
    var spread_shop_config = {
      shopName: 'kleidung-gestalten',
      locale: 'de_DE',
      prefix: '//shop.spreadshirt.de/',
      baseId: 'myShop'
    };
  </script><script>
 window.location.hash = "!/create?mode=edit&productType=1089";
  </script>
  <script type="text/javascript" src="//shop.spreadshirt.de/shopfiles/shopclient/shopclient.nocache.js">
  </script>

Mit einem bestimmten Design:

<div id="myShop"> <a href="//shop.spreadshirt.de/kleidung-gestalten">Designer lädt...</a> </div>
  <script>
    var spread_shop_config = {
      shopName: 'kleidung-gestalten',
      locale: 'de_DE',
      prefix: '//shop.spreadshirt.de/',
      baseId: 'myShop'
    };
  </script><script>
 window.location.hash = "!/create?mode=edit&design=115509997";
  </script>
  <script type="text/javascript" src="//shop.spreadshirt.de/shopfiles/shopclient/shopclient.nocache.js">
  </script>

Mit einem bestimmten Suchbegriff:

<div id="myShop"> <a href="//shop.spreadshirt.de/kleidung-gestalten">Designer lädt...</a> </div>
  <script>
    var spread_shop_config = {
      shopName: 'kleidung-gestalten',
      locale: 'de_DE',
      prefix: '//shop.spreadshirt.de/',
      baseId: 'myShop'
    };
  </script><script>
 window.location.hash = "!/create?mode=edit&designSearch=lovetee";
  </script>
  <script type="text/javascript" src="//shop.spreadshirt.de/shopfiles/shopclient/shopclient.nocache.js">
  </script>

Mit in einer bestimmten Kategorie: (ungetestet)

<div id="myShop"> <a href="//shop.spreadshirt.de/kleidung-gestalten">Designer lädt...</a> </div>
  <script>
    var spread_shop_config = {
      shopName: 'kleidung-gestalten',
      locale: 'de_DE',
      prefix: '//shop.spreadshirt.de/',
      baseId: 'myShop',
startToken: '?q=D3' 
    };
  </script><script>
 window.location.hash = "!/create?mode=edit";
  </script>
  <script type="text/javascript" src="//shop.spreadshirt.de/shopfiles/shopclient/shopclient.nocache.js">
  </script>
5 Likes

Im Shop “Folge uns” durch “Folge …” ersetzen

Vorher:
01

Nachher:
14

Code:

.sprd-social-bar--header {font-size:0}
.sprd-social-bar--header a.sprd-social-bar__icon {font-size:initial}
.sprd-social-bar--header::before { content: 'Folge Visutonal'; font-size: 14px; }
3 Likes

Im Breadcrumb Über uns austauschen

Vorher:
16

Nachher:
52

Code:

.sprd-breadcrumb__item a.sprd-c-s2[href*="/about"] span {
  display:none
}
.sprd-breadcrumb__item a.sprd-c-s2[href*="/about"]::after {
  content:'Über mich'
}
3 Likes

Include Spreadshop in your Joomla Webseite

The HTML codes I used. As you might see, it’s the same code, you already used in your html files.

EN-GB

<div id="myShop">
    <a href="https://shop.spreadshirt.nl/rockbiker">rockbiker</a>
</div>

<script>
    var spread_shop_config = {
        shopName: 'rockbiker',
        locale: 'en_GB',
        prefix: 'https://shop.spreadshirt.nl',
        baseId: 'myShop'
    };
</script>

<script type="text/javascript"
        src="https://shop.spreadshirt.nl/shopfiles/shopclient/shopclient.nocache.js">
</script>

NL

<div id="myShop">
    <a href="https://shop.spreadshirt.nl/rockbiker">rockbiker</a>
</div>

<script>
    var spread_shop_config = {
        shopName: 'rockbiker',
        locale: 'nl_NL',
        prefix: 'https://shop.spreadshirt.nl',
        baseId: 'myShop'
    };
</script>

<script type="text/javascript"
        src="https://shop.spreadshirt.nl/shopfiles/shopclient/shopclient.nocache.js">
</script>

That approach is a quite simple one, but you can improve it by using the multi-language capabilities of Joomla.

Notes
During installation, you have the option to activate multi-language:

I did that and imported demo data, so I have a language selection on top of my demo-site:

So the customer can switch between languages “instead” of choosing it from the menu. But lastly it’s just a redirect…

If you enabled the multi-language setting, you can switch the language in the editor and link the shop-article pages:


The most difficult thing here was to enable html/javascript code in the editors, that’s why I used JCE, which allows using javascript-code by default by simply disabling it with that button:


But by enabling the editor again, the code may disappear, so if you want to have additional content on that page, please write it in the editor, then switch it off and paste the javascript code.

Depending on your experiences and knowledge, you could either create your own plugin or module or use another custom html plugin or module, which allows javascript.


Please let me know if you need more details, or the video is too fast and so on :slight_smile:

P.s. to be honest, I’m more a Wordpress guy, so if here are some Joomla guys/gals, which can improve the steps above, feel free :wink:

Promotions anzeigen/auslesen

Read and parse the google calendar feed:

API Documentation: https://developers.google.com/calendar/v3/reference/events/list

Code:

<script src="https://apis.google.com/js/api.js"></script>
<script>
  /**
   * Sample JavaScript code for calendar.events.list
   * See instructions for running APIs Explorer code samples locally:
   * https://developers.google.com/explorer-help/guides/code_samples#javascript
   */

  function loadClient() {
    gapi.client.setApiKey(YOUR_API_KEY);
    return gapi.client.load("https://content.googleapis.com/discovery/v1/apis/calendar/v3/rest")
        .then(function() { console.log("GAPI client loaded for API"); },
              function(err) { console.error("Error loading GAPI client for API", err); });
  }
  // Make sure the client is loaded before calling this method.
  function execute() {
    return gapi.client.calendar.events.list({
      "calendarId": "o7bpn74u6mp2jmfn2d6fkukti8@group.calendar.google.com",
      "timeZone": "Europe/Berlin"
    })
        .then(function(response) {
                // Handle the results here (response.result has the parsed body).
                console.log("Response", response);
              },
              function(err) { console.error("Execute error", err); });
  }
  gapi.load("client");
</script>
<button onclick="loadClient()">load</button>
<button onclick="execute()">execute</button>

Alternative (read promotion of your own shop):

https://codepen.io/thimo1/pen/eLOoPW

4 Likes

Inhalt von der Startseite des Spreadshops auslesen und auf der eigenen Webseite darstellen

Codes & Beispiel hier:
https://codepen.io/thimo1/pen/ZwPgEv

Code HTML:

<div id="mySprdBody"></div>

Code CSS:
... siehe Link

Code Javascript:

jQuery(function ($) {
  $.get("https://shop.spreadshirt.de/mommyshirt1", function (res) {
    doc = $(res);

    var body = doc.find(".sprd-startpage").html();

    $("#mySprdBody").html(body.replace(/href\=\"\//g, 'href="https://shop.spreadshirt.de/#!/'));

  });
});

Wie es aussehen könnte, kann man hier sehen:


(Quelle: https://jesus-shirts.de/)

4 Likes

Eigene Sprachauswahl

Dropdown: https://codepen.io/thimo1/pen/BgJzJG
CSS brauchst du nur ab hier: /******* use here *******/

Das HTML kopierst du bitte in HTML für Shop-Header bearbeiten
Das CSS ab /******* use here *******/ bitte in Shop CSS bearbeiten

4 Likes