Artikel-Slider auf externer Seite einbinden

Bei YouTube kann man bei einem Video den HTML-Code anzeigen lassen, um diesen auf irgendeiner Seite (auch lokale Server) einzubinden.

Gibt es eine Möglichkeit bestimmte Artikel (nach Kategorie oder anderen Kriterien) auf einer externen Seite als Slider anzuzeigen?

 

Ich finde bisher nur den umgekehrten Fall, externen HTML-Code auf einer Shopware Seite einbinden zu können.

oder alternativ, wenn das technisch nicht möglich ist:

Sicherlich hat doch schon mal jemand einen JQuery-Slider auf einer externen (nicht Shopware-Seite) gebaut und vielleicht über eine API die Produktinformationen geladen (aus Shopware) und dargestellt (auf der anderen Seite).

 

 Bei Google habe ich leider keinen Erfolg. Ich beschäftige mich erst seit zwei Wochen mit Shopware und alle Keywords, die ich bei Google eingebe, die zeigen mir Suchergebnisse an, wie ich es schaffe externen Code auf Shopware einzubinden, aber eben nicht, wie man einen Artikelslider auf einer externen Seite einbindet.

 

vielen Dank für eure Vorschläge

Was ist das für eine externe Seite?

Danke für deine Antwort. Worauf möchtest du hinaus? Möchtest du denn wissen, was das für ein CMS-System ist?

Ich verstehe ansonsten nicht, wie relevant die Information ist, da jeder andere, der das selbe Problem hat und hier im Forum auf eine Lösung stoßen möchte, dann leider nur eine Antwort erhält, die nur spezifisch für meinen Anwendungfall gelöst ist.

 

Gehen wir davon aus, dass ich eine einfache HTML-Datei habe, die wie folgt aussieht und als “index.html” auf meinem Desktop gespeichert ist, ohne einen Server dafür am laufen zu haben, der die Seite ausliefert.

 

		Test-Page

Im Container mit der Klasse “sidebar” möchte ich nun ein HTML-Snippet oder ein iFrame einbinden, das mir einen Artikel-Slider darstellt. Damit ich bei Änderungen an meinen Artikeln in Shopware nicht jeden einzelnen Sidebar-Container anpassen muss, suche ich eine Lösung, die die Artikel von Shopware direkt einbindet. Änderungen am Shopware-Preis oder Vorschaubild sollen sich somit sofort auch auf der externen Seite auswirken.

Ich möchte darauf hinaus, was Deine Erwartungen sind. 
Hol Dir Hilfe. 

Ich such mir doch gerade Hilfe hier im Forum. Danke für die geistreiche Belustigung.

Folgendes Plugin habe ich gefunden: https://plugins.netzperfekt.de/plugins/produktboxen-wordpress

Was es wirklich kann, weiß ich noch nicht. Aber es verspricht das zu können, was ich benötige. Leider ist das Plugin nicht verfügbar.

Es muss doch noch andere Shopware-Betreiber geben, die bereits ihre Produkte auf anderen Seiten einbinden. Ich hoffe jemand von denen liest das hier.

Ich meine es ernst, das Thema ist nicht ohne. Und du scheinst es Dir zu leicht vorzustellen. Versuche es mal hiermit: https://forum.shopware.com/categories/job-posting

Für alle die das selbe Problem irgendwas mal haben sollten.
Hier ist meine Lösung mit PHP & JQuery (Javascript)

Ich habe letztendlich nun die Rest-API von Shopware verwendet. (siehe https://developers.shopware.com/developers-guide/rest-api/api-resource-article/)

 

  1. Ich musste zunächst meinen Shopware-Benutzer eine Erlaubnis für  API-Zugriffe (Checkbox-Häkchen setzen) geben.

  2. Danach habe ich eine PHP-Klasse definiert, die einen CURL Aufruf für mich durchführt. (siehe Shopware 5 REST API einbinden – The Cake Shop)

  3. Die JSON-Antwort auf meine Anfrage habe ich ausgelesen und in ein PHP-Array (Array 1) geworfen, das mir nur noch die Artikelinfos gespeichert hatte, die ich brauchte

  4. Jeden Artikel habe ich in ein neues Array (Array 2) geworfen, das nun alle meine Artikel enthält.

  5. Das Array 2 (mit meinen Artikeln) habe ich als Schleife durchlaufen lassen und an meine Template Engine gegeben (ich benutze nicht Smarty, wie in Shopware, sondern den Minitemplator, siehe http://www.source-code.biz/MiniTemplator/)

  6. Ich musste eine HTML-Vorlage (für MiniTemplator) erstellen, die das nötige HTML für die der Slideshow enthält

  7. Über Jquery habe ich die Slideshow zum Leben erweckt

  8. Damit nicht bei jedem Seitenaufruf meiner externen Seite ein cURL Aufruf stattfinden muss, habe ich die Produktinformationen (Array 2) in einem JSON-Format in einer Datei zwischengespeichert. (Ein anderes Skript prüft den in einem Cronjob den Timestamp, wann der Artikel das letzte Mal von Shopware gefetcht wurde und löscht den Eintrag, nach 7 Tagen), damit ich diese nicht extra in meiner Datenbank speichern muss.

 

Code in PHP

getShopwareArtikel( 'SW10045' );
			$arListeSlider1_Artikel [] = $this->getShopwareArtikel( 'SW10015' );
			
			foreach( $arListeSlider1_Artikel as $intCounter => $arArtikel ){
				$objTemplate->setVariable( "ARTIKEL_COUNTER", $intCounter );
				
				if(! $intCounter ){
					$objTemplate->setVariable( "ARTIKEL_CSS_ACTIVE", 'active' );
				}else{
					$objTemplate->setVariable( "ARTIKEL_CSS_ACTIVE", '' );
				}
				
				$objTemplate->setVariable( "ARTIKEL_IMG_SRC", $arArtikel['image_src'] );
				$objTemplate->setVariable( "ARTIKEL_NAME", $arArtikel['name'] );

				$objTemplate->setVariable( "ARTIKEL_PRICE", $arArtikel['price'] );
				$objTemplate->setVariable( "ARTIKEL_PURCHASE_UNIT", $arArtikel['anzahl_VE'] );
				$objTemplate->setVariable( "ARTIKEL_LINK", $arArtikel['link'] );
				
				$objTemplate->addBlock( "SLIDER_1_ROW_ARTIKEL" );
			}
			
			/**
			 *	Sidebar - Slider 2
			 */
			$arListeSlider2_Artikel = array();
			$arListeSlider2_Artikel [] = $this->getShopwareArtikel( 'SW10022' );
			$arListeSlider2_Artikel [] = $this->getShopwareArtikel( 'SW10021' );
			$arListeSlider2_Artikel [] = $this->getShopwareArtikel( 'SW10017' );
			
			foreach( $arListeSlider2_Artikel as $intCounter => $arArtikel ){
				$objTemplate->setVariable( "ARTIKEL_COUNTER", $intCounter );
				
				if(! $intCounter ){
					$objTemplate->setVariable( "ARTIKEL_CSS_ACTIVE", 'active' );
				}else{
					$objTemplate->setVariable( "ARTIKEL_CSS_ACTIVE", '' );
				}
				
				$objTemplate->setVariable( "ARTIKEL_IMG_SRC", $arArtikel['image_src'] );
				$objTemplate->setVariable( "ARTIKEL_NAME", $arArtikel['name'] );

				$objTemplate->setVariable( "ARTIKEL_PRICE", $arArtikel['price' );
				$objTemplate->setVariable( "ARTIKEL_PURCHASE_UNIT", $arArtikel['anzahl_VE'] );
				$objTemplate->setVariable( "ARTIKEL_LINK", $arArtikel['link'] );
				
				$objTemplate->addBlock( "SLIDER_2_ROW_ARTIKEL" );
			}

			$objTemplate->addBlock( "BLOCK_SIDEBAR_SHOPWARE_ARTICLE_PREVIEW" );

			
			
		}
		

		public function getShopwareArtikel( $strArtikelnummer ){
			return $this->_getStoredArtikel( $strArtikelnummer );
		}
		
		/**
		 *	_getStoredArtikel( $strArtikelnummer, $boolRefresh = false )
		 *
		 *	Gibt Shopware-Artikel zurück, wenn dieser schon gespeichert ist.
		 *	@var string $strArtikelnummer Artikelnummer in Shopware
		 *	@var boolean $boolRefresh Wenn false (default) wird Artikel zurück gegeben. Wenn true, wird Artikel neu aus Shopware geladen und überschrieben
		 */
		private function _getStoredArtikel( $strArtikelnummer, $boolRefresh = false ){
			$strFileShopwareArtikel = dirname( __FILE__ ) . "/../lib/json_storage/shopware_artikel.json";
			
			$arReturn = json_decode(file_get_contents($strFileShopwareArtikel), true);
			
			//--- Wenn diese Datei einfach ausgeliefert werden soll
			if( !$boolRefresh && isset( $arReturn[$strArtikelnummer] ) ){
				return $arReturn[$strArtikelnummer];
			}
			
			$client = new cShopwareApiClient(
				//URL of shopware REST server
				'https://www.shopwareserver.de/api',
				//Username
				'shopwarebackenduser',
				//User's API-Key
				'KEY-HASH'
			);
			
			$arCall = $client->get('articles/'.$strArtikelnummer.'?useNumberAsId=true');
			$arData = $arCall['data'];
			
			$arArticle = array();
			
			$arArticle['id'] = $arData['id'];
			$arArticle['name'] = $arData['name'];
			$arArticle['desc'] = $arData['descriptionLong'];
			$arArticle['anzahl_VE'] = $arData['mainDetail']['purchaseUnit'];
			$arArticle['price'] = $arData['mainDetail']['prices'][0]['price'];
			
			$arArticle['vorschaubild_path'] = $arData['images'][0]['path'];
			$arArticle['vorschaubild_ext'] = $arData['images'][0]['extension'];
			
			$arArticle['image_src'] = 'https://www.shopwareserver.de/media/image/' . $arArticle['vorschaubild_path'] . '.' . $arArticle['vorschaubild_ext'];
			$arArticle['link'] = 'https://www.shopwareserver.de/detail/index/sArticle/' . $arArticle['id'];
			
			$arArticle['timestamp_last_updated'] = strtotime('now');
			
			$arReturn[$strArtikelnummer] = $arArticle;
			
			//--- Datei füllen mit werten
			file_put_contents($strFileShopwareArtikel,json_encode($arReturn));
			
			return $arReturn[$strArtikelnummer];
		}
		
		
	}

Code in HTML 

				${ARTIKEL_NAME}

JQuery-Teil

$( document ).ready( function() {
    var slide_width = parseInt($( ".slide img" ).css("max-width")),
        margin = 0,
        slideshow_width = 0,
        animation = false,
        autoslide;

    $( ".slide" ).each( function() {
        slideshow_width += slide_width;
    });
    slideshow_width -= slide_width;
    
    autoslide = setInterval(function(){ slide("right"); }, 3000);


    $( ".slide-control .left" ).click(function(element) {
        slide("left");
    });

    $( ".slide-control .right" ).click(function(element) {
        slide("right");
    });

    function slide( direction ) {
        if (animation) return;
        clearInterval(autoslide);

        if (direction == "left") {
            margin += slide_width;
            if (margin > 0) {
                margin = 0 - slideshow_width;
            }
        } else if (direction == "right") {
            margin -= slide_width;
            if (Math.abs(margin) > slideshow_width) {
                margin = 0;
            }
        }
        animation = true;
        $( ".sildeshow-inner" ).animate( { "margin-left": margin + "px" }, 500, function() { animation = false; });
        autoslide = setInterval(function(){ slide("right"); }, 3000);
    }

    autoslide = setInterval(function(){ slide("right"); }, 3000);

});

 

@NextMike schrieb:

Ich meine es ernst, das Thema ist nicht ohne. Und du hast scheinbar davon keine Ahnung (nicht böse sein): https://forum.shopware.com/categories/job-posting

Ich meine es auch ernst. Scheinbar hast du keine Ahnung davon, wie leicht es sein kann. Benötigter Zeitaufwand 4 Stunden. Das einzig aufwändige ist die Recherche in den Dokumentationen.

Viele Grüße

PS: Ein teures PlugIn ist hierfür nicht notwendig

1 „Gefällt mir“

Super gemacht! Teure Plugins kosten 300-500 EUR und sind viel mehr als die paar Snippets. Scheinst Deine Zeit nicht zu schätzen.

Aber wenn es für Dich funktioniert ist doch OK. Darum ging es ja.