360°Shots: Integration des Viewers

Deutsches Forum
1

Hallo,

ich würde gerne in meinen Shop den Player für 360-Grad-Ansichten von 360°Shots integrieren. Es gab dazu bereits einen Thread, in dem allerdings nur der Tipp gegeben wurde, dass dies recht einfach in der design.tpl des Themes zu bewerkstelligen sei. Da ich aber eher aus der Design- als aus der PHP-Ecke komme, hilft mir das nur partiell weiter. Könnte mir vielleicht nochmal jemand anhand der Anleitung bei 360°Shots etwas detaillierter erklären, wie ich vorgehen muss?

Herzlichen Dank!

Björn

2

Hmm, da ist nix mit php … schon mal den Artikel durchgelesen ?

du haust einfach in der angesprochenen Form die Bilder für das Produkt in das Template und schreibst noch den dargestellten JS code mit oxscript dazu und wie es aussieht sollte das Ding dann Fluppen.

Grüße

Rafael

3

Hallo Rafael,

danke für die Antwort! Ich glaube, irgendwas verstehe ich da falsch. :wink: Wenn ich den Code aus der Anleitung in die details.tpl (/out/azure/tpl/page/details) des Templates Azure lege, sieht das ganze auf meinem Testshop so aus. Die Bilder sind auch im richtigen Pfad…

Die details.tpl sieht dann so aus (360° fett und rot hervorgehoben):

[{capture append="oxidBlock_content"}]
  [{assign var="oDetailsProduct" value=$oView->getProduct()}]
  [{assign var="oPictureProduct" value=$oView->getPicturesProduct()}]
  [{assign var="currency" value=$oView->getActCurrency()}]
  [{assign var="sPageHeadTitle" value=$oDetailsProduct->oxarticles__oxtitle->value|cat:' '|cat:$oDetailsProduct->oxarticles__oxvarselect->value}]

    [{if $oView->getPriceAlarmStatus() == 1}]
        [{assign var="_statusMessage1" value="PAGE_DETAILS_THANKYOUMESSAGE1"|oxmultilangassign|cat:" "|cat:$oxcmp_shop->oxshops__oxname->value}]
        [{assign var="_statusMessage2" value="PAGE_DETAILS_THANKYOUMESSAGE2"|oxmultilangassign|cat:" "}]
        [{assign var="_statusMessage3" value="PAGE_DETAILS_THANKYOUMESSAGE3"|oxmultilangassign|cat:" "|cat:$oView->getBidPrice()|cat:" "|cat:$currency->sign|cat:" "}]
        [{assign var="_statusMessage4" value="PAGE_DETAILS_THANKYOUMESSAGE4"|oxmultilangassign}]
        [{include file="message/success.tpl" statusMessage=`$_statusMessage1``$_statusMessage2``$_statusMessage3``$_statusMessage4`}]
    [{elseif $oView->getPriceAlarmStatus() == 2}]
        [{assign var="_statusMessage" value="PAGE_DETAILS_WRONGVERIFICATIONCODE"|oxmultilangassign}]
        [{include file="message/error.tpl" statusMessage=$_statusMessage}]
    [{elseif $oView->getPriceAlarmStatus() === 0}]
        [{assign var="_statusMessage1" value="PAGE_DETAILS_NOTABLETOSENDEMAIL"|oxmultilangassign|cat:"<br> "}]
        [{assign var="_statusMessage2" value="PAGE_DETAILS_VERIFYYOUREMAIL"|oxmultilangassign}]
        [{include file="message/error.tpl" statusMessage=`$_statusMessage1``$_statusMessage2`}]
    [{/if}]

    
    <div id="details">
        [{ if $oView->getSearchTitle() }]
          [{ assign var="detailsLocation" value=$oView->getSearchTitle()}]
        [{else}]
          [{foreach from=$oView->getCatTreePath() item=oCatPath name="detailslocation"}]
          [{if $smarty.foreach.detailslocation.last}]

            [{assign var="detailsLocation" value=$oCatPath->oxcategories__oxtitle->value}]
            [{/if}]
          [{/foreach}]
        [{/if }]

        
    [B] <div id='viewer'>
    $('#viewer').gestalt({
    url: 'http://www.bjoernglitscher.de/shop/out/360grad/test2/',
    size: 'small',
    controls: 'false',
    animate: 'once'
    });
    </div>[/B]

        [{* details locator  *}]
        [{assign var="actCategory" value=$oView->getActiveCategory()}]
        <div id="overviewLink">
            <a href="[{ $actCategory->toListLink }]" class="overviewLink">[{ oxmultilang ident="WIDGET_BREADCRUMB_OVERVIEW" }]</a>
        </div>
        <h2 class="pageHead">[{$sPageHeadTitle|truncate:80}]</h2>
        <div class="detailsParams listRefine bottomRound">
            <div class="pager refineParams clear" id="detailsItemsPager">
                [{if $actCategory->prevProductLink}]<a id="linkPrevArticle" class="prev" href="[{$actCategory->prevProductLink}]">[{oxmultilang ident="DETAILS_LOCATOR_PREVIUOSPRODUCT"}]</a>[{/if}]
                <span class="page">
                   [{oxmultilang ident="DETAILS_LOCATOR_PRODUCT"}] [{$actCategory->iProductPos}] [{oxmultilang ident="DETAILS_LOCATOR_FROM"}] [{$actCategory->iCntOfProd}]
                </span>
                [{if $actCategory->nextProductLink}]<a id="linkNextArticle" href="[{$actCategory->nextProductLink}]" class="next">[{oxmultilang ident="DETAILS_LOCATOR_NEXTPRODUCT"}]</a>[{/if}]
            </div>
        </div>
        
       

        <div id="productinfo" itemscope itemtype="http://schema.org/Product">
            [{include file="page/details/inc/fullproductinfo.tpl"}]
        </div>
        
        
    </div>
    [{ insert name="oxid_tracker" title="DETAILS_PRODUCTDETAILS"|oxmultilangassign product=$oDetailsProduct cpath=$oView->getCatTreePath() }]
[{/capture}]
[{include file="layout/page.tpl" sidebar="Left"}]
4

Jo da haben wir auch schon den übeltäter :wink:

das Rot markierte ist ja Javascript. Das ist das was ich mit oxscript meinte.

Du kannst aber mal versuchen drumherum


<script type="text/javascript">   
 $('#viewer').gestalt({
    url: 'http://www.bjoernglitscher.de/shop/out/360grad/test2/',
    size: 'small',
    controls: 'false',
    animate: 'once'
    });
</script>

zu schreiben.

Aber wenn das die einzigen Änderungen sind die du gemacht hast wirst’e weiterhin nichts sehen :wink:

Grüße

Rafael

5

Huch, geht das fix!

Ja, äh, öh…mehr habe ich in der Tat nicht gemacht - mal abgesehen davon, dass ich das Verzeichnis mit den Bildern hochlud, auf das im Script verwiesen wird. Mehr konnte ich jetzt der Anleitung nicht entnehmen, die “Optionen” sind ja wohl…nun…“optional”. :slight_smile:

Immerhin: Nachdem ich den Eintrag geändert habe, kann man ihn jetzt schon mal nicht mehr auf der Seite sehen…

6

Da fehlen jetzt natürlich noch die js-dateien die dann den Player erstellen.
Bisher ist ja nur der Befehlsaufruf in der Seite.

7

So sollte es auch sein :wink:
Du musst ja noch deren Script einfügen. Dei Datei du dir runterladen musstest. Einfach in out/<aktives template>/js/libs hochladen.

Diese musst du dann noch einbinden.


[{oxscript include="js/libs/gestalt-min.js"}]
[{oxscript add="$(document).ready(function(){
 $('#viewer').gestalt({
    url: 'http://www.bjoernglitscher.de/shop/out/360grad/test2/',
    size: 'small',
    controls: 'false',
    animate: 'once'
    });
});
"}]
<div id='viewer'></div>

Grüße

Rafael

8

Die liegen hier: http://www.bjoernglitscher.de/shop/out/360grad/test2/js

So, wie ich die Dokumentation verstand habe, sucht er sich diese Dateien selber, wenn sie im richtigen Verzeichnis liegen.

9

ähhh nein.

10

Oh, da haben wir parallel geantwortet - ich probier’s gleich aus!

11

Hehe, jetzt bin ich immerhin schonmal soweit, dass er nicht mehr nix, sondern einen Internal Server Error anzeigt, da eine unerwartete Bedingung aufgetreten sei. Ich glaub, ich spiel wieder mit Photoshop, das läuft besser. :smiley: