:spreadshop: Tipps und Tricks: Die besten Lifehacks

Deutsch Spreadshop
, , , , ,
#2

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

Vorher:

12
121024×1096 128 KB

Nachher:

12
121154×1102 146 KB

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
"Design anpassen" ist zu unauffällig
"Design anpassen" ist zu unauffällig
#3

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:

08
08600×786 167 KB

Nachher:

23
23626×686 230 KB

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:

55
552398×822 361 KB

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
Tipps und Tricks: Die besten Lifehacks Q&A
#4

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

#16

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

Nachher:

35
35688×998 80.9 KB

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:
https://help.spreadshirt.com/hc/de/articles/207487815-Webseiten-Integration-per-JavaScript

1 Like
#19

Danke für deine Tips :heart:

1 Like
#20

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

Tipps und Tricks: Die besten Lifehacks Q&A
#21

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

#22

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
#23

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 - Spreadshop - Forum - Spreadshirt

#24

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
#25

Du möchtest die Social Icons im Header ausblenden?

Füge folgendes ein:

.sprd-social-bar--header {
  display:none
}
1 Like
Icons Social Media im Shop
#26

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
#27

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
#28

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
#29

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
#30

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:

47
471970×1182 258 KB

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

36
362000×842 238 KB

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:

59
592562×1172 221 KB

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:

36
36594×554 52.6 KB

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:

#31

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

4 Likes
Rabatt im Wordpress Shop weiterreichen
Rabatt im Wordpress Shop weiterreichen
#32

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

Codes & Beispiel hier:

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:

39
391199×790 183 KB

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

4 Likes
#33

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

3 Likes
#35

Austauschen von “Über uns” per CSS

#sprd-department-filter > div:last-child {font-size:0}
#sprd-department-filter > div:last-child a::before { content: 'Über mich ...'; font-size: 1rem; }

29
29718×290 17 KB

2 Likes
:spreadshop: Was ist eure Meinung zur neuen "Über uns" Seite im Spreadshop?