Freitag, 2. Februar 2018

Shirtee-Shop per Shop CSV in die eigene Webseite einbinden

Shirtee ist einer von vielen POD (Print on Demand) Anbietern, die ihren Partnern einen Marktplatz und ein Shop-System anbieten. Beide liegen unter der Domain von Shirtee. Für das Anbieten der eigenen Shirtee-Produkte auf der eigenen Webseite bietet Shirtee derzeit noch keine eigenständige Möglichkeit. Shirtee bietet aber eine CSV Datei für Amazon-Händler und Facebook-Marketing mit den wichtigsten Produkt-Informationen. Mit dieser CSV Datei und PHP können die eigenen Shirtee-Produkte in der eigenen Webseite angezeigt werden.

UPDATE: Die Methode per CSV Shop Datei taugt nicht besonders. In der CSV Datei sind Produktbilder aller möglichen Versionen der Produkte und aller Produktfarben. Es ist nicht so einfach hier Filter einzubauen, damit nicht wahllos alle angezeigt werden.
HIER ist eine Methode ohne CSV Datei erklärt: Shirtee-Shop embedded (Link).

Für WordPress User gibt es das Shirtee WordPress Plugin (Link).

Update 11/2018: Es gab ein Update in der Shirtee-Website-Software. Es ist von daher möglich, dass das folgende Tutorial nicht mehr funktioniert. Die Verwendung des folgenden Codes bitte nur auf eigene Verantwortung verwenden.

Shirtee-Shop in eigene Webseite einbinden


Tutorial Shirtee-Shop per SHOP CSV in eigene Webseite einbinden

Es bestehen 2 Methoden. Bei der ersten Methode werden die Produktbilder immer von Shirtee geladen, bei der zweiten Methode werden die Produktbilder (wenn noch nicht vorhanden) zuerst auf dem eigenen Server/Webhost gespeichert.

Mit diesen beiden Methoden wird nicht ein kompletter Shirtee-Shop in die eigene Webseite eingebunden, sondern werden nur automatisiert die Produkt-Grafiken mit Produkt-Titel, Produkt-Beschreibung, Produkt-Preis und Produkt-Link zum Shirtee-Shop in die eigene Webseite eingebunden.
(Hinweis: Verlinkung der Produktbilder aktuell wegen eines Bugs nach Zufallsprinzip mit Ziel entweder Marktplatz oder eigener Shirtee-Shop [02.02.2018]).

Was benötigt wird:
  • CSV Datei aus einem Shirtee-Shop
  • Eigene Webseite
  • Zugang zu einem Server/Webhost-Verzeichnis mit PHP (evtl. noch ImageMagick).

1.) CSV Datei download

Die CSV Datei ist bei Shirtee im Login-Bereich unter dem linken Sidebar Menüpunkt "Shops" zu erreichen.
Für jeden erstellten Shirtee-Shop gibt es eine extra CSV Datei mit CSV download. Der Donwloadlink ist an dem CSV Symbol zu erkennen.

Shirtee-Shop in eigene Webseite einbinden


2.) CSV Datei upload

Diese Shirtee-Shop CSV Datei jetzt auf dem eigenen Server/Webhost speichern.


3.) PHP Script einbinden

Als nächstes das folgende PHP Script in die eigene Webseite einbinden und einige Parameter anpassen.
Das Script muss in den HTML <body>.
Anzupassen ist der Verweis zur CSV Datei. Wenn der Shop in einem CMS in mehreren Webseiten angezeigt werden soll, dann bitte einen absoluten Verweis verwenden.
Die Reihenfolge der Produkte kann Vorwärts oder Rückwärts sortiert werden. (Mehr Möglichkeiten bestehen derzeit noch nicht).

1. Methode - Produktbilder immer von Shirtee laden (nicht empfohlen)
<div class="shirteeshop">
<div class="shirteeshopheader">My Privat Shirtee-Shop</div>
<div class="shirteeshopdescription">T-Shirts - Girlies - Tank-Tops - Sweatshirts</div>
<?php
// PATH TO CSV FILE - Please swap the "//" at the beginning of the line.
// relativer Pfad
$shirteecsvfile = file('shopname_facebook_feed.csv', FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
// absoluter Pfad
//$shirteecsvfile = file('/var/www/html/shopname_facebook_feed.csv', FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
// URL Pfad
//$shirteecsvfile = file('https://www.example.com/shopname_facebook_feed.csv', FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
//
// SORT: swap the "//" at the beginning of the line.
for ($i = 0; $i < count($shirteecsvfile); $i++ ) { // sort forward
//for ($i = (count($shirteecsvfile) -1); $i > -1; $i-- ) { // sort backward
//
$shirteecsvfileexplode = explode(";", $shirteecsvfile[$i]);
//
// BCTU004_16 - T-Shirt Männer
// A880_16 - T-Shirt Frauen (Girlie)
// G64200_16 - Tank-Top Männer
// 3361_16 - Tank-Top Frauen
// JH030_1624 - Sweatshirt Unisex
// PRODUCT ID EINFÜGEN - eine oder zwei (oder selbst erweitern) - Please swap the "//" at the beginning of the line.
if (strpos($shirteecsvfileexplode[0], "BCTU004_16")) {
//if (strpos($shirteecsvfileexplode[0], "BCTU004_16") || strpos($shirteecsvfileexplode[0], "A880_16")) {
//
$shirteecsvfileexplodelinkexplode = explode("?", $shirteecsvfileexplode[5]);
$shirteecsvfileexplodelink = $shirteecsvfileexplodelinkexplode[0];
$shirteecsvfileexplodeimgurl = $shirteecsvfileexplode[4];
$shirteecsvfileexplodetitle = preg_replace("/(^\"|\"$)/", "", $shirteecsvfileexplode[6]);
$shirteecsvfileexplodeprice = preg_replace("/(^\"|\"$)/", "", $shirteecsvfileexplode[7]);
$shirteecsvfileexplodedescription = preg_replace("/(^\"|\"$)/", "", $shirteecsvfileexplode[3]);
//
echo '<div class="shirteeproductdiv">';
echo '<div class="shirteeproductimgdiv"><a href="' . $shirteecsvfileexplodelink . '" target="_blank">';
echo '<img class="shirteeproductimg" src="' . $shirteecsvfileexplodeimgurl . '" width="200px" height="" alt="' . $shirteecsvfileexplodetitle . '" title="' . $shirteecsvfileexplodetitle . '">';
echo '</a></div>';
echo '<div class="shirteeproducttitlediv"><span>' . $shirteecsvfileexplodetitle . '</span></div>';
echo '<div class="shirteeproductpricediv"><span>' . $shirteecsvfileexplodeprice . '</span></div>';
echo '<div class="shirteeproductdescriptiondiv"><span>' . $shirteecsvfileexplodedescription . '</span></div>';
echo '</div>';
echo "\n";
}
}
?>
</div>
Die Auswahl der Produkte wird mittels der (gekürzten) Produkt-ID vorgenommen. Die Produkt-IDs können der CSV Datei entnommen werden. Einige Produkt-IDs sind im PHP Script vermerkt. Es ist möglich die PHP if-Regel mit einem ODER (||) zu erweitern, dann können mehrere Produkte angezeigt werden.


2. Methode - Produktbilder auf eigenem Server/Webhost speichern (empfohlen/recommended) 

Mit diesem Script werden die Produktbilder zuerst von Shirtee gedownloaded und auf dem eigenen Server/Webhost gespeichert, wenn sie dort noch nicht vorhanden sind.
Die URLs der Produktbilder aus der CSV Datei haben eine falsche Dateiendung (File Extension). Es sind keine "jpeg", sondern "png" Dateien. Im Script wird die File Extension geändert.
Bitte das Ziel-Verzeichnis für das Speichern der Produktbilder im PHP Script angeben (Vorauswahl: "shirteeimages").
<div class="shirteeshop">
<div class="shirteeshopheader">My Private Shirtee Shop</div>
<div class="shirteeshopdescription">T-Shirts - Girlies - Tank-Tops - Sweatshirts</div>
<?php
// PATH TO CSV FILE - Please swap the "//" at the beginning of the line.
// relativer Pfad
$shirteecsvfile = file('shopname_facebook_feed.csv', FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
// absoluter Pfad
//$shirteecsvfile = file('/var/www/html/shopname_facebook_feed.csv', FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
// URL Pfad
//$shirteecsvfile = file('https://www.example.com/shopname_facebook_feed.csv', FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
//
// SORT: Please swap the "//" at the beginning of the line.
for ($i = 0; $i < count($shirteecsvfile); $i++ ) { // sort forward
//for ($i = (count($shirteecsvfile) -1); $i > -1; $i-- ) { // sort backward
//
$shirteecsvfileexplode = explode(";", $shirteecsvfile[$i]);
//
// BCTU004_16 - T-Shirt Männer
// A880_16 - T-Shirt Frauen (Girlie)
// G64200_16 - Tank-Top Männer
// 3361_16 - Tank-Top Frauen
// JH030_1624 - Sweatshirt Unisex
// PRODUCT ID EINFÜGEN - eine oder zwei (oder selbst erweitern) - Please swap the "//" at the beginning of the line.
if (strpos($shirteecsvfileexplode[0], "BCTU004_16")) {
//if (strpos($shirteecsvfileexplode[0], "BCTU004_16") || strpos($shirteecsvfileexplode[0], "A880_16")) {
//
$shirteecsvfileexplodelinkexplode = explode("?", $shirteecsvfileexplode[5]);
$shirteecsvfileexplodelink = $shirteecsvfileexplodelinkexplode[0];
$shirteecsvfileexplodeimgurl = $shirteecsvfileexplode[4];
$shirteecsvfileexplodetitle = preg_replace("/(^\"|\"$)/", "", $shirteecsvfileexplode[6]);
$shirteecsvfileexplodeprice = preg_replace("/(^\"|\"$)/", "", $shirteecsvfileexplode[7]);
$shirteecsvfileexplodedescription = preg_replace("/(^\"|\"$)/", "", $shirteecsvfileexplode[3]);
//
// DIRECTORY TO SAVE THE IMAGES - it's possible: "../../path/to/shirteeimages" (don't set a "/" at the start).
$shirteeimagesdir = "shirteeimages"; // relative path
if (!file_exists($shirteeimagesdir)) {
mkdir($shirteeimagesdir, 0755);
}
$shirteeimagespath = explode("/", $shirteecsvfileexplodeimgurl);
$shirteeimagesfilename = end($shirteeimagespath);
$shirteeimagesfilenamepng = preg_replace('"\.(jpeg)$"', '.png', $shirteeimagesfilename);
$shirteeimagespathfilename = $shirteeimagesdir . "/" . $shirteeimagesfilenamepng;
if (!file_exists($shirteeimagespathfilename)) {
$shirteecsvfileexplodeimg = imagecreatefrompng($shirteecsvfileexplodeimgurl);
imagepng($shirteecsvfileexplodeimg, $shirteeimagespathfilename, 9, PNG_ALL_FILTERS);
//
// PRODUKTBILDER RESIZE WENN IMAGEMAGICK INSTALLIERT: remove the "//" at the beginning of the second line.
$shirteeimagesresize = "mogrify -path " . $shirteeimagesdir . " -format png -resize 345x377 " . $shirteeimagespathfilename;
//shell_exec($shirteeimagesresize);
}
//
echo '<div class="shirteeproductdiv">';
echo '<div class="shirteeproductimgdiv"><a href="' . $shirteecsvfileexplodelink . '" target="_blank">';
echo '<img class="shirteeproductimg" src="' . $shirteeimagespathfilename . '" width="200px" height="" alt="T-Shirt Tank-Top Sweatshirt ' . $shirteecsvfileexplodetitle . '" title="T-Shirt Tank-Top Sweatshirt ' . $shirteecsvfileexplodetitle . '">';
echo '</a></div>';
echo '<div class="shirteeproducttitlediv"><span>' . $shirteecsvfileexplodetitle . '</span></div>';
echo '<div class="shirteeproductpricediv"><span>' . $shirteecsvfileexplodeprice . '</span></div>';
echo '<div class="shirteeproductdescriptiondiv"><span>' . $shirteecsvfileexplodedescription . '</span></div>';
echo '</div>';
echo "\n";
}
}
?>
</div>
INFO: Die Produktbild-Dateien haben eine sehr große Dateigröße bei 577x630 Pixel PNG. Ein Resize Image ist im Script eingebaut und kann freigeschalten werden, wenn ImageMagick auf dem Server installiert ist.

Check on the command line if ImageMagick is installed on the server:
mogrify --version


4.) CSS Stylesheet (Beispiel)

Jetzt noch ein passendes CSS Stylesheet dazu in die Webseite kopieren.
.shirteeshop {
width: 970px;
margin: 0 auto;
text-align: center;
border-top-style: dotted;
border-top-color: #0f0;
border-top-width: 6px;
border-bottom-style: dotted;
border-bottom-color: #0f0;
border-bottom-width: 6px;
padding-bottom: 20px;
}
.shirteeshopheader {
font-size: 3em;
font-weight: bold;
margin-top: 20px;
margin-bottom: 20px;
}
.shirteeshopdescription {
font-size: 1.4em;
margin-bottom: 20px;
}
.shirteeproductdiv {
width: 220px;
display: inline-block;
vertical-align: top;
margin: 5px;
}
.shirteeproductimgdiv {
padding: 5px;
}
.shirteeproductimg {
border: none;
border-radius: 10px;
}
.shirteeproducttitlediv {
font-weight: bold;
text-transform: uppercase;
}
.shirteeproductpricediv {
color: #080;
font-weight: bold;
text-decoration: underline;
}
.shirteeproductdescriptiondiv {
color: #666;
}
.shirteeproductimg:hover {
transform: scale(1.5,1.5);
border-style: dashed;
border-color: #0f0;
border-width: 15px;
border-radius: 30px;
}
Das Ergebnis:
Shirtee-Shop in eigene Webseite einbinden

5.) Sortierung und WORDPRESS

Für eine manuelle Sortierung, oder für das Einbinden in Wordpress, jetzt einfach den HTML Quellcode kopieren, die Produkte sortieren und anstatt dem PHP Script diesen Quellcode in die eigene Webseite sowie einen Wordpress-Artikel oder eine Wordpress-Page kopieren und das CSS Stylesheet sowie bei Methode 2 die Produktbilder nicht vergessen.


Keine Garantie. Keine Gewährleistung. Kein Support.
Verwendung auf eigenes Risiko.