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 - Spreadshop - Forum - Spreadshirt.
Gruß
Thimo
Vorher:
Nachher:
Code:
removed - see below (old outdated)
.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
}
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 
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:
https://help.spreadshirt.com/hc/de/articles/207487815-Webseiten-Integration-per-JavaScript
Danke für deine Tips 
Nachher:
Code:
<a name="top"></a>
<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>
#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
}
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 - Spreadshop - Forum - Spreadshirt
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.
Du möchtest die Social Icons im Header ausblenden?
Füge folgendes ein:
.sprd-social-bar--header {
display:none
}
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
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>
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; }
Über uns austauschenVorher:
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'
}
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:
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 
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>
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:
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
