Donnerstag, 8. Februar 2018

Shirtee-Shop in 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.

Es besteht die Möglichkeit per PHP den Source Code des eigenen Shirtee-Shops zu extrahieren und diesen Quelltext in die eigene Webseite einzubinden. Zudem besteht die Möglichkeit die Produktbilder per PHP in ein Verzeichnis zu downloaden.

Bei beiden in diesem Tutorial erklärten PHP Scripts wird die originale Ansicht mit Auswahl und Sortierung aus dem eigenen Shirtee Shop übernommen. Die Produkte sind verlinkt zu den Kampagnen-Seiten bei shirtee.com. Zudem gibt es einen Button "Mehr anzeigen" mit Link zum eigenen Shirtee Shop.
Shirtee-Shop in eigene Webseite einbinden

JavaScript: Leider besteht keine Möglichkeit den eigenen Shirtee-Shop per JavaScript in die eigene Webseite einzubinden, da vom Server ein Header "X-Frame-Options: SAMEORIGIN" gesendet wird, der dies verhindert.

Hinweis: Leider besteht ein Problem mit der Verlinkung der Produkte zum eigenen Shop. Manchmal werden die verlinkten Kampagnen im eigenen Shop angezeigt, manchmal im Marktplatz. Die URL von beiden Ansichten ist leider die gleiche.

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

Tutorial Shirtee Shop in eigene Webseite einbinden

Die folgenden PHP Codes jeweils in eine .php Datei kopieren und von dieser den Source Code mittels (Beispiel:) "view-source:http://www.example.com/shirteephpcode.php" aufrufen, oder die .php Datei auf der Kommandozeile starten und das Ergebnis in eine Datei schreiben lassen (php shirtee.php >sourcecode.txt).

Wichtig: Was benötigt wird ist nicht die Browser-Ansicht, die von diesem PHP Script erzeugt wird (weil da noch das CSS fehlt), sondern der Quelltext, der über (Beispiel:) "view-source:http://www.example.com/path/to/shirteephpscript.php" einsehbar ist und von dort kopiert werden kann.


1. Methode (Produktbilder immer von Shirtee laden)

Mit diesem PHP Script wird ein Quellcode erzeugt, bei dem die <img src="..."> gleich bleibt, also die Produktbilder-Source ist shirtee.com. Die Produktbilder werden bei jedem Aufruf des später eingebundenen Quelltextes immer von shirtee.com geladen.

Im PHP Script muss folgendes angepasst werden:
  1. URL zum Shop
  2. Anzahl der anzuzeigenden Produkte
<?php
// YOUR SHIRTEE SHOP URL
$shirteeshopurl = "https://www.shirtee.com/de/store/myshop/";
//
// THE LIMIT FOR DISPLAYING PRODUCTS (24/32/48)
$shirteeshoplimit = "48";
//
// Extract the Store Name for the URL Query String
$shirteeshopurlexplode = explode("/", $shirteeshopurl);
$shirteestorename = $shirteeshopurlexplode[5];
//
$shirteeshopurllimit = $shirteeshopurl . "?limit=" . $shirteeshoplimit;
$shirteeshop = file_get_contents($shirteeshopurllimit);
//
if (((bool) $shirteeshop === true)) {
$shirteeshopexplodeone = explode('<ul class="products', $shirteeshop);
$shirteeshopexplode = explode('</div></div></div></div></li></ul>', $shirteeshopexplodeone[1]);
$shirteeshopold = '<div class="products' . $shirteeshopexplode[0] . '</div></div></div></div></li></div>';
//
// Put the URL Querystring at the campaign URLs START
$shirteestorecampaignhrefarray = [];
$shirteestorecampaignhrefnewarray = [];
$shirteestorecampaignhrefmatchesunique = array_unique($shirteestorecampaignhrefmatches[2]);
$shirteestorecampaignhrefmatchesuniquenew = array_values($shirteestorecampaignhrefmatchesunique);
//
for ($i = 0; $i < count($shirteestorecampaignhrefmatchesuniquenew); $i++ ) {
//
$shirteestorecampaignhref = $shirteestorecampaignhrefmatchesuniquenew[$i];
array_push($shirteestorecampaignhrefarray, $shirteestorecampaignhref);
//
if (strpos($shirteestorecampaignhref, "?")) {
$shirteestorecampaignhrefnew = $shirteestorecampaignhref . '&amp;shop=' . $shirteestorename;
} else {
$shirteestorecampaignhrefnew = $shirteestorecampaignhref . '?shop=' . $shirteestorename;
}
//
array_push($shirteestorecampaignhrefnewarray, $shirteestorecampaignhrefnew);
//
}
$shirteeshopold = str_replace($shirteestorecampaignhrefarray, $shirteestorecampaignhrefnewarray, $shirteeshopold);
// Put the URL Querystring at the campaign URLs END
$shirteeshopspacetonewline = preg_replace("/>\s</", ">\n<", $shirteeshopold);
$shirteeshoplitodiv = preg_replace("/<\/li><li/", "</div>\n\n<div", $shirteeshopspacetonewline);
$shirteeshoplitodiv = str_replace("<li", "\n\n<div", $shirteeshoplitodiv);
$shirteeshopnew = str_replace("li>", "div>\n\n", $shirteeshoplitodiv);
//
echo '<div class="shirteeshop">';
echo $shirteeshopnew;
echo '</div>';
}
?>
Diese Methode eignet sich zum einbinden in Wordpress.

Hinweis: Das CSS Stylesheet nicht vergessen (unten).


2. Methode (Produktbilder in ein Verzeichnis speichern) recommended/empfohlen

Mit diesem PHP Script wird ein Quellcode erzeugt, bei dem die Produktbilder in ein Verzeichnis gespeichert werden. Die <img src="..."> ist dann eine absolute oder relative unter der eigenen Domain (Bitte .htaccess "Base" beachten!). Die Produktbilder werden bei jedem Aufruf des später eingebundenen Quelltextes vom eigenen Server/Webhost geladen.

Im PHP Script muss folgendes angepasst werden:
  1. URL zum Shop
  2. Anzahl der anzuzeigenden Produkte
  3. Verzeichnisname für den Speicherort der Produktbilder
  4. Pfad zu den gespeicherten Produktbildern OHNE den Verzeichnisnamen
<?php
// YOUR SHIRTEE SHOP URL
$shirteeshopurl = "https://www.shirtee.com/de/store/shopname/";
//
// THE LIMIT FOR DISPLAYING PRODUCTS (24/32/48)
$shirteeshoplimit = "48";
//
// Extract the Store Name for the URL Query String
$shirteeshopurlexplode = explode("/", $shirteeshopurl);
$shirteestorename = $shirteeshopurlexplode[5];
//
// THE FOLDER-NAME FOR IMAGE SAVING ON YOUR WEBHOST
$shirteeshopimagesdir = "shirteeimages"; // relative path
//
$shirteeshopurllimit = $shirteeshopurl . "?limit=" . $shirteeshoplimit;
$shirteeshop = file_get_contents($shirteeshopurllimit);
if (!file_exists($shirteeshopimagesdir)) {
mkdir($shirteeshopimagesdir, 0755);
}
if (((bool) $shirteeshop === true)) {
$shirteeshopexplodeone = explode('<ul class="products', $shirteeshop);
$shirteeshopexplode = explode('</div></div></div></div></li></ul>', $shirteeshopexplodeone[1]);
$shirteeshopold = '<div class="products' . $shirteeshopexplode[0] . '</div></div></div></div></li></div>';
//
preg_match_all("/(src=\"(.*?)\")/", $shirteeshopold, $shirteestoreimgsrcmatches, PREG_PATTERN_ORDER);
//
$shirteestoreimagesrcurlarray = [];
$shirteestorenewimagessourcepatharray = [];
for ($i = 0; $i < count($shirteestoreimgsrcmatches[2]); $i++ ) {
//
$shirteestoreimagesrcurl = $shirteestoreimgsrcmatches[2][$i];
array_push($shirteestoreimagesrcurlarray, $shirteestoreimagesrcurl);
//
$shirteeshopimagesurlexplode = explode("/", $shirteestoreimagesrcurl);
$shirteeshopimagesfilename = end($shirteeshopimagesurlexplode);
$shirteeshopimagesdirfilename = $shirteeshopimagesdir . "/" . $shirteeshopimagesfilename;
//
if (!file_exists($shirteeshopimagesdirfilename)) {
$shirteeshopimagecreatefrompng = imagecreatefrompng($shirteestoreimagesrcurl);
imagealphablending($shirteeshopimagecreatefrompng, false);
imagesavealpha($shirteeshopimagecreatefrompng, true);
imagepng($shirteeshopimagecreatefrompng, $shirteeshopimagesdirfilename, 9, PNG_ALL_FILTERS);
}
//
// YOUR ABSOLUTE OR RELATIVE PATH TO THE SAVED IMAGES (for the source code <img src="...">)
$shirteestorenewimagessourcepath = "/" . $shirteeshopimagesdirfilename;
array_push($shirteestorenewimagessourcepatharray, $shirteestorenewimagessourcepath);
//
}
$shirteeshopold = str_replace($shirteestoreimagesrcurlarray, $shirteestorenewimagessourcepatharray, $shirteeshopold);
//
// Extract the Shirtee Store Campaign URLs
preg_match_all("/(href=\"(.*?)\")/", $shirteeshopold, $shirteestorecampaignhrefmatches, PREG_PATTERN_ORDER);
//
// Put the URL Querystring at the campaign URLs START
$shirteestorecampaignhrefarray = [];
$shirteestorecampaignhrefnewarray = [];
$shirteestorecampaignhrefmatchesunique = array_unique($shirteestorecampaignhrefmatches[2]);
$shirteestorecampaignhrefmatchesuniquenew = array_values($shirteestorecampaignhrefmatchesunique);
//
for ($i = 0; $i < count($shirteestorecampaignhrefmatchesuniquenew); $i++ ) {
//
$shirteestorecampaignhref = $shirteestorecampaignhrefmatchesuniquenew[$i];
array_push($shirteestorecampaignhrefarray, $shirteestorecampaignhref);
//
if (strpos($shirteestorecampaignhref, "?")) {
$shirteestorecampaignhrefnew = $shirteestorecampaignhref . '&amp;shop=' . $shirteestorename;
} else {
$shirteestorecampaignhrefnew = $shirteestorecampaignhref . '?shop=' . $shirteestorename;
}
//
array_push($shirteestorecampaignhrefnewarray, $shirteestorecampaignhrefnew);
//
}
$shirteeshopold = str_replace($shirteestorecampaignhrefarray, $shirteestorecampaignhrefnewarray, $shirteeshopold);
// Put the URL Querystring at the campaign URLs END
//
$shirteeshopnewline = preg_replace("/>\s</", ">\n<", $shirteeshopold);
$shirteeshoplidiv = preg_replace("/<\/li><li/", "</div>\n\n<div", $shirteeshopnewline);
$shirteeshoplidiv = str_replace("<li", "\n\n<div", $shirteeshoplidiv);
$shirteeshoplidiv = str_replace("li>", "div>\n\n", $shirteeshoplidiv);
$shirteeshopnew = str_replace('href="', 'target="_blank" href="', $shirteeshoplidiv);
//
//
echo '<div class="shirteeshop">';
echo $shirteeshopnew;
echo '</div>';
//
}
//
?>
Hinweise:
  1. Das Verzeichnis mit den gespeicherten Produktbildern nicht vergessen.
  2. Das CSS Stylesheet nicht vergessen (unten)
Hinweis Methode 1 und 2: Es ist nicht empfohlen die beiden PHP Scripts für den dauerhaften Gebrauch in die eigene Webseite einzubinden, weil bei jedem Aufruf der komplette Quelltext der angegebenen Shirtee-Shop-Webseite gedownloaded wird.

Besser: anstatt "echo $shirteeshopnew;" zu verwenden besser das Ergebnis in eine Datei schreiben lassen und per "include" in die Webseite einbinden.

Automatisierung: Die Möglichkeit einer Automatisierung besteht, indem für das PHP Script ein cron job angelegt wird, bei dem das Ergebnis, also der generierte Source Code, in eine Datei geschrieben wird und diese Datei per PHP include in die Webseite eingebunden wird.


3. Das CSS Stylesheet

Das CSS Stylesheet erzeugt die selbe Ansicht mit Effekten wie im eigenen Shirtee Shop und muss in die eigene Webseite eingebunden werden. Entweder per <style></style> in den HTML <head> der Webseite, oder in eine per <link rel="stylesheet" href="styles.css"> verlinkte .css Datei.
/* Shirteeshop Original CSS BEGIN */
.shirteeshopdiv .products-grid {
    max-width: 1114px;
    margin: 0 auto;
padding: 0;
text-align: center;
}
.shirteeshopdiv .products-grid .item {
    width: 23%;
    margin: 0.5%;
    display: inline-block;
}
.shirteeshopdiv .products-grid-campaigns .item {
    margin-bottom: 12px;
    background: #fff;
    border-radius: 1px;
    border: 1px solid #ccc;
    -webkit-transition: transform .2s linear 0s;
    -moz-transition: transform .2s linear 0s;
    -o-transition: transform .2s linear 0s;
    transition: transform .2s linear 0s;
    z-index: 1;
vertical-align: top;
}
.shirteeshopdiv .products-grid-campaigns .product-image .product-image-zoom {
    -webkit-transition: all .2s linear 0s;
    -moz-transition: all .2s linear 0s;
    -o-transition: all .2s linear 0s;
    transition: all .2s linear 0s;
}
.shirteeshopdiv .products-grid .product-image img {
    width: 100%;
    height: auto;
}
.shirteeshopdiv .products-grid-campaigns .product-info {
    padding-bottom: 0;
    padding: 0;
    text-align: left;
    padding: 10px 18px 10px;
    padding-bottom: 10px;
    background: #f0f0f0;
    border-top: 1px solid #b5b5b5;
}
.shirteeshopdiv .products-grid .product-info {
    position: relative;
    padding-bottom: 65px;
}
.shirteeshopdiv .products-grid-campaigns .product-name {
    font-size: 19px;
    font-weight: 400;
    color: #000;
    text-align: left;
    margin: 0 0 7px;
    line-height: 24px;
    height: 24px;
    overflow: hidden;
    font-family: 'Open Sans',sans-serif;
    font-weight: 400;
    text-overflow: ellipsis;
    -webkit-transition: all .2s linear 0s;
    -moz-transition: all .2s linear 0s;
    -o-transition: all .2s linear 0s;
    transition: all .2s linear 0s;
}
.shirteeshopdiv .products-grid .product-name, .products-list .product-name {
    text-transform: uppercase;
    margin-bottom: 5px;
    font-family: "Raleway","Helvetica Neue",Verdana,Arial,sans-serif;
}
.shirteeshopdiv .products-grid h2.product-name, h3.product-name, h4.product-name, h5.product-name, p.product-name {
    margin: 0;
    margin-bottom: .5em;
    color: #636363;
    font-family: "Raleway","Helvetica Neue",Verdana,Arial,sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.2;
    text-rendering: optimizeLegibility;
    text-transform: uppercase;
    font-family: "Helvetica Neue",Verdana,Arial,sans-serif;
    font-weight: normal;
    line-height: 1.4;
}
.shirteeshopdiv .products-grid-campaigns .product-name a {
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Open Sans',sans-serif;
    font-weight: 400;
}
.shirteeshopdiv .products-grid-campaigns .price-box-text {
    float: left;
    font-size: 14px;
    padding: 8px 0 0;
    color: #939393;
white-space: nowrap;
}
.shirteeshopdiv .products-grid-campaigns .price-box {
    margin: 0;
    float: right;
    color: #a0a0a0;
    font-size: 13px;
    margin: 0 0 5px;
white-space: nowrap;
}
.shirteeshopdiv .products-grid-campaigns .price-box .price {
    font-weight: 700;
    font-size: 22px;
    font-weight: 600;
    font-family: 'Open Sans',sans-serif;
    color: #39c;
    line-height: 26px;
}
.shirteeshopdiv .products-grid-campaigns .item:hover {
    -webkit-transform: scale(1.03);
    -moz-transform: scale(1.03);
    -ms-transform: scale(1.03);
    -o-transform: scale(1.03);
    transform: scale(1.03);
    z-index: 2;
    -webkit-box-shadow: 0 0 10px 0 rgba(28,28,28,.4);
    box-shadow: 0 0 10px 0 rgba(28,28,28,.4);
}
.shirteeshopdiv .products-grid-campaigns .product-image:hover .product-image-zoom {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
}
.shirteeshopdiv .products-grid-campaigns .product-image {
    position: relative;
    padding: 0;
    margin: 10px;
    display: block;
    overflow: hidden;
    width: calc(100% - 20px);
}
.shirteeshopdiv .products-grid-campaigns .item:hover .product-info {
    border-radius: 0 0 3px 3px;
}
.shirteeshopdiv .products-grid-campaigns .item:hover .product-name {
    max-height: 80px;
    height: auto;
    white-space: normal;
}
.shirteeshopdiv .products-grid h2.product-name a:hover, h3.product-name a:hover, h4.product-name a:hover, h5.product-name a:hover, p.product-name a:hover {
    color: #39c;
    text-decoration: none;
}
/* Shirteeshop Original CSS END */

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