:spreadshop: Tipps und Tricks: Die besten Lifehacks

lovetee · November 28, 2018, 7:09pm

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

lovetee · November 28, 2018, 7:18pm

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
}

lovetee · November 28, 2018, 7:35pm

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

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
Das ganze sieht natürlich anders aus, wenn ihr den Shop per Javascript einbindet

lovetee · November 29, 2018, 3:03pm

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

lovetee · November 29, 2018, 3:00pm

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:

Mirella.Noel · November 29, 2018, 3:46pm

Danke für deine Tips

lovetee · November 30, 2018, 9:18am

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

lovetee · November 30, 2018, 9:18am

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

lovetee · November 30, 2018, 9:58am

Nach oben Pfeil (Zurück nach oben)

Nachher:

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
}

lovetee · November 30, 2018, 10:02am

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

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

lovetee · November 30, 2018, 11:01am

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.

lovetee · December 18, 2018, 10:17am

Du möchtest die Social Icons im Header ausblenden?

Füge folgendes ein:

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

lovetee · January 7, 2019, 1:57pm

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

lovetee · January 18, 2019, 12:59pm

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>

lovetee · February 10, 2019, 5:22pm

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

Vorher:

Nachher:

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; }

lovetee · February 10, 2019, 5:36pm

Im Breadcrumb `Über uns` austauschen

Vorher:

Nachher:

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'
}

lovetee · February 11, 2019, 11:09am

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

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

lovetee · February 13, 2019, 10:09am

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

lovetee · February 20, 2019, 5:58pm

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/)

lovetee · June 28, 2019, 10:48am

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

:spreadshop: Tipps und Tricks: Die besten Lifehacks

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

EDIT (NEW):

Bild auf der Startseite austauschen

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

Nach oben Pfeil (Zurück nach oben)

Warenkorb per Javascript auslesen

Einzelne Inhalte des Shops auf einer anderen Seite einbinden

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

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

Im Breadcrumb Über uns austauschen

Include Spreadshop in your Joomla Webseite

Promotions anzeigen/auslesen

Alternative (read promotion of your own shop):

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

Im Breadcrumb `Über uns` austauschen