Rückseite im Shop anzeigen

Nachdem Spreadshirt den JavaScript-Shop neu programmiert hat, funktioniert das Anzeigen der Rückseiten von Produkten nicht mehr. Das ist nun schon eine Weile her. Bisher hatte ich keine Zeit da was neues zu machen.

Erstmal Danke Spreadshirt, dass ihr meinen Account gelöscht habt. Nachdem ich mich mit selber Emailadresse neu registriert habe ist alles noch vorhanden, nur habe ich jetzt ein U als Avatar, anstatt wie vorher ein M. Erspart mir bitte irgendwelche Kommentare dazu.

Zurück zum Thema. Da keine individuellen CSS id oder class mehr bestehen, ist eine reine CSS Lösung nicht mehr möglich. Mit Javascript ist es zu realisieren, aber das Spreadshirt-Javascript erzeugt einen Fehler. Hier mal mein Codeschnipsel, plus ein CSS dazu. Das ist erstmal nur Testphase. Also nicht meckern, sondern besser machen. Wieso der Spreadshop aussteigt, weiß ich nicht. Es kommt nach einer Weile die “went wrong” seite.

<script>
setInterval(function(){
var classsprdimgspinnerinnerHTMLlength = document.getElementsByClassName("sprd-img-spinner__image").length;
var i;
for (i = 0; i < classsprdimgspinnerinnerHTMLlength; i++) {
var classsprdimgspinnerinnerHTML = document.getElementsByClassName("sprd-img-spinner")[i].innerHTML;
var classsprdimgspinnerinnerHTMLmatch = (classsprdimgspinnerinnerHTML.match(/itemprop/g) || []).length;
if (classsprdimgspinnerinnerHTMLmatch < 2) {
var classsprdimgspinnerinnerHTMLreplace = classsprdimgspinnerinnerHTML.replace("views/1,width=500,height=500", "views/2,width=100,height=100");
var classsprdimgspinnerinnerHTMLreplacereplace = classsprdimgspinnerinnerHTMLreplace.replace("sprd-img-spinner__image", "sprd-img-spinner__backimage");
document.getElementsByClassName("sprd-img-spinner")[i].innerHTML = classsprdimgspinnerinnerHTML + classsprdimgspinnerinnerHTMLreplacereplace;
}
}
},1000);
</script>

<style>
.sprd-img-spinner__backimage {
    position: absolute;
    width: 100px !important;
    height: 100px !important;
    bottom: 0;
}
</style>

Hi Melibee,

falls du eine Alternative möchtest, hier mit jQuery:
https://jsfiddle.net/thimo/9k85fcjv/

“Individuell” könntest du die jeweiligen Produkte mit CSS-Selektor nth-of-type (CSS :nth-of-type() Selector) selektieren oder du parst die href mit regex, aber ich glaube daran hast du schon selbst gedacht oder?

Gruß
Thimo

2 Likes

Besten Dank lovetee, funktioniert einwandfrei. nur das jquery stört mich. Gehts auch ohne?
aus zeitgründen übernehm ich das jetzt mal so. pure JS wäre mir allerdings lieber.

edit: man könnte für eine css lösung per JS individuelle css classes setzen und die dann per css ::after oder ::before ansprechen, umständlich. das wäre dann aber auch keine pure CSS Lösung. würde aber vielleicht kein “went wrong” erzeugen? … viel zu umständlich.

eine Herausforderung wäre nur Produkte mit Motiv auf Rückseite zu selektieren… automatisiert wohl unmöglich.

egal, nicht so wichtig, wenn SPRD einem die Motive und alle dazugehörigen Produkte einfach so löscht…