Page tree
Skip to end of metadata
Go to start of metadata

Anwendungsbeispiel eines Multitaps

In diesem Beispiel des Frontends sehen Sie lediglich eine mögliche Darstellungsvariante. Dadurch das Sie mit HTML und CSS frei arbeiten können, ist Ihrer Fantasie keine Grenzen gesetzt!

Und hier der CSS und HTML Code dazu. Wenn Sie diese Darstellungsvariante auf Ihrer Seite testen möchten, können Sie den Code einfach in Ihre Grundeinstellungen Ihres Tab Managers kopieren.

CSS
div.uvtest_boxframe {
    height: 100%;
    width: 100%;
}

div.uvtest_articledesc {
    hyphens: none;
    text-align: justify;
    word-break: normal;
}

div.uvtest_twoboxesframe {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
}
div.uvtest_twoboxesframe div.uvtest_twoboxes {
    align-self: stretch;
    order: 0;
    flex: 4 1 auto;
}
HTML
<div class="uvtest_boxframe">
    <div class="uvtest_articledesc">
        <h1>Artikelbeschreibung</h1>
        ##article_desc_long##
    </div>
    <div class="uvtest_twoboxesframe">
        <div class="uvtest_twoboxes">
            <h1>Videos</h1>
            ##article_all_videos##
        </div>
        <div class="uvtest_twoboxes">
            <h1>PDF-Dokumente</h1>
            ##article_all_pdf_docs##
        </div>
    </div>
    <div>
        <h1>Bewertungen</h1>
        ##article_reviews##
    </div>
</div>

PDF Dokumente

In diesem Beispiel verwenden wir ein PDF Dokument, welches auf dem Server von Shopware liegt, es kann auf mehrere Varianten eingebunden werden. Das Schema zur Darstellung können Sie in dem Eingabefeld "PDF Darstellungsschema" definieren. Das Schema wird bei jeder Einbindung einer PDF Datei herangezogen, die betreffende PDF Datei bzw. deren URL wird mittels Platzhalter "##url_to_replace##" ersetzt. Sofern Sie immer den gleichen Pfad nutzen, können Sie aber auch die URL direkt ins Schema schreiben und lediglich den Detailaufruf in dem Standard PDF Eingabefeld in den Grundeinstellungen hinterlegen oder im jeweiligen Produkt in einer der vier Eingabefelder zum PDF.

Seit der Plugin Version V1.0.1 ist folgende PDF Ausgabeschema-Variante als Standard hinterlegt:

<object data="##url_to_replace##" width="100%" height="400px">
    <p><a href="https://docs.google.com/viewerng/viewer?url=##url_to_replace##" target="_blank">Öffnen mit Google PDF Viewer</a></p>
    <p><a href="##url_to_replace##">PDF Download</a></p>
</object>


Das Object Tag verfügt über ein Fallback, welcher Endgeräte die PDFs nicht von alleine einbetten können (Android Handys), mit den nötigen Informationen versorgt. Bei diesem Code hat der Shop Besucher zwei Fallbacks zur Verfügung, er kann das PDF downloaden oder es über den Google PDF Viewer anzeigen lassen.

IFrame Videos

Bei der URL ist unbedingt darauf zu achten, dass es sich nicht um die URL aus dem Browser handel, sondern um die URL, welche zum Einbinden von Videos aus in ein IFrame geeignet ist. Um immer die passende URL zu verwenden, haben wir für die gängigsten Anbieter unter dem Punkt "Tipps zum Einbinden der Videos" in dieser Anleitung eine kleine Zusammenstellung vorbereitet.

In diesem Beispiel verwenden wir ein Video von Youtube aus dem Channel von Shopware. Die Ausgabe im Frontend erfolgt letztlich durch das Video Darstellungsschema, in diesem wird die URL mit dem Platzhalter "##url_to_replace##" ersetzt. Sie haben daher vollen Zugriff auf den gesamten HTML Code und können diesen beliebig anpassen.

In diesem Beispiel verwenden wir das gleiche Video bei YouTube wie im vorherigen. Da wir hier wissen, dass alle Videos sowieso von Youtube stammen, kann man die URL in das Schema legen und mit den beiden Standard Videos aus den Grundeinstellungen sowie den vier Videos aus der Artikelverwaltung, lediglich die Video-ID übergeben.

Tipps zum Einbinden der Videos

Im Administrationsbereich in Ihrem Shop in den Grundeinstellungen können Sie das Schema des IFrames ändern. In den Grundeinstellungen sowie den vier Eingabefelder in der Artikelverwaltung kann die URL eingetragen werden. Da aber die URL für das IFrame NICHT die URL des z.B. Youtube Videos im Browser ist, hier eine kleine Anleitung wie man am schnellsten die URL findet.

YouTube

Klicken Sie auf Youtube auf ein beliebiges Video. Unterhalb vom Abonnieren Button, finden Sie den "Teilen" Button, klicken Sie darauf. Es erscheint darunter eine Box, klicken Sie auf "Einbetten", anschließend erscheint der vollständige Code mit dem IFrame. Die URL, welche Sie nutzen können finden Sie zwischen den "" im src="" Attribut.

Vimeo

Klicken Sie auf ein Vimeo Video, auf der rechten Seite oben, innerhalb vom Video, finden Sie den "Teilen" Button. Klicken Sie auf den Button, es öffnet sich nun ein Fenster. Im Fenster sehen Sie den vollständigen IFrame Code zum Einbinden. Die nutzbare URL finden Sie zwischen den "" in dem src="" Attribut.

Facebook

Klicken Sie auf ein beliebiges Video bei Facebook, suchen Sie die drei Punkte (entweder oberhalb oder unterhalb des Videos). Klicken Sie auf die drei Punkte, es öffnet sich ein Menü direkt daneben, klicken Sie auf "Einbetten". Im darauffolgenden Fenster finden Sie den vollständigen IFrame Code, die nutzbare URL finden Sie zwischen den "" in dem src="" Attribut.

  • No labels