Allgemeine Fragen
      Zurück zur Startseite
      1. Hilfe-Center
      2. OUTTRA for RETAIL
      3. Allgemeine Fragen

      Wie baue ich die OUTTRA Product Lens auf einer Produkt-Detailseite meines Shops ein?

      Erfahren Sie, wie Sie in wenigen einfachen Schritten die OUTTRA Product Lens in ihre Webseite einbinden können

      Was Sie benötigen

      • Ihre OUTTRA Shop-ID. Sollten Sie diese nicht zur Hand haben, so wenden Sie sich bitte an support-de@outtra.com.
      • Zugriff auf den Webseiten-Code Ihrer Produkt-Detailseite

      Wie Sie die OUTTRA Product Lens einbauen können

      Die OUTTRA Product Lens benötigt nur wenige Zeilen Code bestehend aus einem <div> und einem <script>-Tag:

      <div 
          id="outtra-product-lens-container"
          data-shop_id="_IHRE SHOP ID_"
          data-gtin="_DIE EAN ODER GTIN DES PRODUKTS_"
          data-lang="_DIE GEWÜNSCHTE SPRACHVERSION, ZUM BEISPIEL: de"
          >        
      </div>
      <script src="https://brandwidgets.outtra.com/js/productLens.js" async></script>

      Diesen Code müssen Sie an der Stelle ihrer Webseite einfügen an der die OUTTRA Product Lens erscheinen soll.

      Mehr ist in der Basis-Konfiguration nicht zu tun, die OUTTRA Product Lens wird geladen wenn sie für dieses Produkt verfügbar ist!

      Konfiguration

      Sie können über die data-Attribute des <div>-Containers mit der id "outtra-product-lens-container" die OUTTRA Product Lens konfigurieren.

      Notwendige Parameter

      • data-shop_id
        Wird Ihnen von OUTTRA mitgeteilt und identifiziert Ihren Shop bei den OUTTRA-Systemen.
      • data-gtin
        Die EAN oder GTIN des Produkts. Diese müssen Sie übermitteln, damit die korrekte OUTTRA Product Lens geladen werden kann.

      Optionale Parameter

      • data-lang
        Steuert die Sprachversion der OUTTRA Product Lens. Akzeptiert werden zweistellige Sprachkürzel wie "de", "en", "fr" dem Standard ISO-639-1 folgend.
        Wenn der Parameter fehlt wird "de" als Standard gesetzt.
        Zur Zeit wird nur "de" unterstützt, weitere Sprachversionen folgen.
      • data-autoload
        Wenn Sie diesen Parameter auf "false" setzen, so lädt die OUTTRA Product Lens nicht automatisch sondern muss per Aufruf (siehe unten) geladen werden.
        Wenn der Parameter fehlt oder auf "true" gesetzt ist lädt die OUTTRA Product Lens automatisch.

      Elemente ein- und ausblenden

      Sollte eine OUTTRA Product Lens einmal nicht geladen werden können - bspw. weil die übermittelte GTIN unbekannt ist - so werden durch das Script alle Elemente mit der CSS-Klasse "outtra-toggle-display" ausgeblendet. Sie können die OUTTRA Product Lens mit einer anderen GTIN erneut laden (siehe: JavaScript API / Funktionen) und wenn diese bekannt ist werden die mit der CSS-Klasse versehenen Elemente wieder eingeblendet.

      Dies ist hilfreich wenn Sie zum Beispiel über die OUTTRA Product Lens eine Überschrift gesetzt haben, die nur angezeigt werden soll, wenn das Tool auch geladen werden konnte.

      JavaScript API

      Funktionen

      loadProductLens
      Sie können die OUTTRA Product Lens durch den Aufruf der JavaScript-Funktion "loadProductLens" mit einer von Ihnen übermittelten GTIN neu laden:

      window.outtra.loadProductLens(_IHRE EAN ODER GTIN_)

      So können Sie bspw. auch eine OUTTRA Product Lens laden, die mit dem Parameter "data-autoload" auf "false" initialisiert wurde.

      Events

      outtra-product-lens-script-loaded
      Wenn das OUTTRA Product Lens Script erfolgreich geladen wurde sendet dieses den Event "outtra-product-lens-script-loaded" an das Window-Objekt. So können Sie auf diesen Event hören und eigenen Code im Anschluss ausführen:

      <script>
          window.addEventListener('outtra-product-lens-script-loaded', function(e){
              <!-- IHR CODE -->
          })
      </script>