Na stronie (a konkretnie w sklepie internetowym) jednego z moich klientów wdrażamy właśnie prezentacje 360°/3D produktów wykonane w technologii (z wykorzystaniem narzędzi) Orbitvu, dzięki czemu użytkownik strony (i zarazem potencjalny klient sklepu internetowego) może dokładnie obejrzeć produkt z każdej strony, przy okazji właściwie dowolnie powiększając/przybliżając poszczególne elementy.

W przypadku wykorzystania planów abonamentowych na usługę chmurową (subskrypcja, płatność raz w roku) wygenerowanie kod do umieszczenia na stronie jest wręcz banalne – właściwie wszystko można ustawić w menu graficznym, i tak wygenerowany kod wystarczy wkleić w odpowiednim miejscu na stronie.

Sytuacja trochę bardziej się komplikuje, gdy zamiast usługi chmurowej/abonamentowej (Orbitvu Sun) wybierzemy jednorazowy zakup samej przeglądarki (Orbitvu Viewer), i tym samych hostowanie prezentacji bezpośrednio na własnym serwerze.

Orbitvu Viewer

Niezależnie, czy zdecydujecie się na wdrożenie przeglądarki Orbitvu Viewer zamiast usługi Orbitvu Sun bo wolicie zapłacić raz, niż płacić stałą subskrypcję, czy dodatkowo, by trochę zredukować wykorzystanie limitu wyświetleń na koncie – warto wiedzieć, jak dodać odpowiedni kod do strony.

Zaczynamy od skopiowania przeglądarki na serwer – w naszym przypadku do katalogu:

/var/www/webinsider.pl/html/orbitvu

W tym katalogu znajdą więc się pliki związane z przeglądarką prezentacji, m.in. pliki:

expressInstall.swf
orbitvu.js
orbitvuer12.swf
swfobject.js

Następnie tworzymy katalog dla prezentacji, np. „prezentacje”:

/var/www/webinsider.pl/html/orbitvu/prezentacje

W tym katalogu tworzymy kolejny katalog, tym razem z plikami konkretnej prezentacji

/var/www/webinsider.pl/html/orbitvu/prezentacje/produkt1

Ląduje tu cała zawartość katalogu z prezentacjami, min. katalogi:

images
images2d
thumbnails

Oraz pliki:

config.xml
content.xml
content2.xml
meta.xml
mimetype

Następnie do nagłówka „head” strony dodajemy 2 linijki odpowiedzialne za wywołanie odpowiednich skryptów JavaScript:

<script type="text/javascript" src="https://webinsider.pl/orbitvu/swfobject.js"></script>
<script type="text/javascript" src="https://webinsider.pl/orbitvu/orbitvu.js"></script>

Choć z racji tego, że ja zamierzam korzystać tylko z wersji HTML5, to w moim przypadku wystarczy jedna linijka:

<script type="text/javascript" src="https://webinsider.pl/orbitvu/orbitvu.js"></script>

Oraz kod odpowiedzialny za wyświetlenie prezentacji, który umieszczamy już w miejscu, gdzie ma wyświetlać się prezentacja:

<div id="orbitvu-produkt1">
    <script type="text/javascript">
        inject_orbitvu( "orbitvu-produkt1","https://webinsider.pl/orbitvu/orbitvuer12.swf","https://webinsider.pl/orbitvu/expressInstall.swf",
            {
                ovus_folder: "https://webinsider.pl/orbitvu/prezentacje/produkt1/",
                content2: "yes",
                width: "500",
                height: "850",
                force_html5: "yes"
            }
        );
    </script>
</div>

I ponownie, z racji tego, że będę korzystał tylko z HTML5 mój kod będzie wyglądał tak:

<div id="orbitvu-produkt1">
    <script type="text/javascript">
        inject_orbitvu( "orbitvu-produkt1","https://webinsider.pl/orbitvu/orbitvu.js","",
            {
                ovus_folder: "https://webinsider.pl/orbitvu/prezentacje/produkt1/",
                content2: "yes",
                width: "500",
                height: "850",
                force_html5: "yes"
            }
        );
    </script>
</div>

Jest to najbardziej podstawowa forma kodu – właściwie jedynym dodatkowym elementem konfiguracyjnym z jakiego tu skorzystałem jest parametr „force_html5”, za pomocą którego wymuszam używanie HTML5 zamiast Flasha (do tego wysokość i szerokość, ale to raczej standard).

Więcej parametrów jakie możecie wykorzystać znajdziecie na tej stronie…

Orbitvu Viewer i WordPress

Z racji tego, że wspomniana strona tworzona jest na bazie CMSa WordPress (i wtyczki WooCommerce), to od razu pokaże Wam jak najszybciej wdrożyć powyższe rozwiązanie właśnie na tej platformie.

Zaczynamy od dodania własnego kodu – czy to w formie własnej wtyczki, czy w pliku functions.php – do nagłówka (sekcja „head”) strony:

add_action('wp_head', 'webinsider_add_code2header');
function webinsider_add_code2header() {
?>
    <script type="text/javascript" src="https://webinsider.pl/orbitvu/orbitvu.js"></script>
<?php
}

Wprawdzie sam kod odpowiedzialny za wyświetlanie prezentacji można by dodać bezpośrednio w treści strony, to z doświadczenia wiem, że jest to rozwiązanie mało praktyczne, i przysparza sporo problemów. Dlatego zdecydowanie lepiej skorzystać z krótkich kodów (shortcodes), jakie sami możemy utworzyć:

function webinsider_orbitvu_produkt1() {
    return '<div id="orbitvu-produkt1">
        <script type="text/javascript">
            inject_orbitvu( "orbitvu-produkt1","https://webinsider.pl/orbitvu/orbitvu.js","",
                {
                    ovus_folder: "https://webinsider.pl/orbitvu/prezentacje/produkt1/",
                    content2: "yes",
                    width: "500",
                    height: "850",
                    force_html5: "yes"
                }
            );
        </script>
    </div>';
}
add_shortcode( 'webinsider_orbitvu_produkt1', 'webinsider_orbitvu_produkt1' );

W efekcie czego otrzymamy shortcode:

[webinsider_orbitvu_produkt1]

Teraz wystarczy tylko wstawić ten kod w dowolnym miejscu na stronie/w tekście…