Redakcja WebInsider.pl zaprasza na WordCamp 2018 Poznań. Poznajmy się w Poznaniu!

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…


Spodobał Ci się artykuł? Zapisz się do naszego Newslettera - ZERO SPAMu, same konkrety, oraz dostęp do dodatkowych materiałów przeznaczonych dla subskrybentów!
Na podany adres e-mail otrzymasz od nas wiadomość e-mail, w której znajdziesz link do potwierdzenia subskrypcji naszego Newslettera. Dzięki temu mamy pewność, że nikt nie dodał Twojego adresu przez przypadek. Jeśli wiadomość nie przyjdzie w ciągu najbliższej godziny (zazwyczaj jest to maksymalnie kilka minut) sprawdź folder SPAM.
Roztańczona Karolina skorzystała z promocji dla czytelników WebInsider.pl i zapłaciła 80% mniej za księgowość internetową wFirma
WebInsider poleca księgowość wFirma
WebInsider korzysta z VPSa w HitMe.pl
WebInsider poleca VPSy DigitalOcean
WebInsider poleca serwis Vindicat
Napisz komentarz
wipl_napisz-komentarz_01Jeśli informacje zawarte na tej stronie okazały się pomocne, możesz nam podziękować zostawiając poniżej swój komentarz.

W tej formie możesz również zadać dodatkowe pytania dotyczące wpisu, na które – w miarę możliwości – spróbujemy Ci odpowiedzieć.
Linki partnerskie
Niektóre z linków na tej stronie to tzw. „linki partnerskie”, co oznacza, że jeśli klikniesz na link i dokonasz wymaganej akcji (np. zakup/rejestracja) możemy otrzymać za to prowizję. Pamiętaj, że polecamy tylko te produkty i usługi, z których sami korzystamy, i uważamy, że są tego na prawdę warte… :-)
Znaki towarowe i nazwy marek
W niektórych wpisach (oraz innych miejscach na stronie) mogą być przedstawione/użyte znaki towarowe i/lub nazwy marek, które stanowią własność intelektualną tych podmiotów, a zostały użyte wyłącznie w celach informacyjnych.
Monika ćwiczy przed kongresem ko..., ale zapisała się do Newslettera WebInsider.pl, choć... i tak nic nie widzi