10. PackshotCreator - Ortery Capture pour sites web
Intégration d'une animation unique
En intégrant une animation autonome dans le site web, vous donnez aux clients plusieurs vues dans une seule fenêtre. Il n'est pas nécessaire de cliquer sur différentes vignettes pour essayer de trouver l'image ou l'angle du produit que vous recherchez. Le client peut commencer à interagir avec l'animation dès qu'il est prêt à voir son point de vue préféré.
<!-- include program files -->
<link rel="stylesheet" href="libs/creator.css" />
<script type="text/javascript" src="libs/jquery.js"></script>
<script type="text/javascript" src="libs/jquery.plugin.js"></script>
<script type="text/javascript" src="libs/creator.js"></script>
<!-- define an animation container -->
<div id="sample360" class="animate-creator-container" style="width:600px; height:600px;"></div>
<script>
jQuery(function ($) {
// use id of the elem to call animate360 method
$('#sample360').animate360({
object: {
name: 'watch',
model: 'cylindrical',
columns: 24,
width: 500,
height: 276
},
path: {
image: './watch/images/'
}
});
});
</script>Générer une animation dynamique
Dans cette section, nous utilisons un langage de programmation côté serveur (ex. php) pour générer une page d'animation de manière dynamique. Tout d'abord, nous devons modifier la structure des fichiers et placer les animations ensemble. Ensuite, nous ajoutons une page .html pour lister un produit, après avoir cliqué sur le lien du produit, nous passons le paramètre correspondant au fichier .php. Enfin, nous ajoutons un extrait pour recevoir le paramètre permettant de décider quel produit nous affichons.
// File Structure
- icons/
- *.png
- *.svg
- libs/
- *.js
- *.css
- DBGlassses/
- images/
- *.jpg
- OakleyGlasses/
- images/
- *.jpg
- RedWatch/
- images/
- *.jpg
- HomePage.html
- PHPViewer.php
<!-- HomePage.html -->
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
</head>
<body>
<li><a href="#" onclick="openAnimation(this)">DBGlasses</a></li>
<li><a href="#" onclick="openAnimation(this)">OakleyGlasses</a></li>
<li><a href="#" onclick="openAnimation(this)">RedWatch</a></li>
<script type="text/javascript">
function openAnimation (pressedBtn) {
var btnValue = pressedBtn.innerText;
window.location = './PHPViewer.php?name=' + btnValue;
};
</script>
</body>
</html> <!-- PHPViewer.php -->
<?php
$objName = $_GET["name"];
?>
<!-- include program files -->
<link rel="stylesheet" href="libs/creator.css" />
<script type="text/javascript" src="libs/jquery.js"></script>
<script type="text/javascript" src="libs/jquery.plugin.js"></script>
<script type="text/javascript" src="libs/creator.js"></script>
<!-- define an animation container -->
<div id="sample360" class="animate-creator-container" style="width:600px; height:600px;"></div>
<script>
jQuery(function ($) {
// use id of the elem to call animate360 method
$('#sample360').animate360({
object: {
name: '<?php echo $objName; ?>',
model: 'cylindrical',
columns: 24,
width: 500,
height: 276
},
path: {
image: './<?php echo $objName; ?>/images/'
}
});
});
</script>
Intégration d'animations avec vignettes (miniatures)
Cette animation intégrée utilise la même fenêtre de visualisation pour les deux vignettes de leur image et les animations 360. Il suffit de passer la souris sur la vignette de l'image/animation que vous souhaitez visualiser pour qu'elle remplisse l'écran plus grand. L'approche sans clic rend la transition entre les images et l'animation plus fluide.
<style>
.embeded-animation-view {
position: relative;
}
.embeded-animation-view ul {
text-align: center;
}
.embeded-animation-view ul li {
position: absolute;
box-sizing: border-box;
top: 0px;
left: 0px;
display: none;
width: 100%;
height: 100%;
}
.embeded-animation-view ul li:first-child {
display: block;
}
.embeded-animation-view ul li div {
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
</style>
<div class="embeded-animation-view">
<ul>
<li>
<div style="background-image:url(images/mario/Lv2/img02.jpg);"></div>
</li>
<li>
<div style="background-image:url(images/mario/Lv2/img11.jpg);"></div>
</li>
<li>
<iframe src="https://truview.ortery.com/guide.page/samples/mario.html" frameborder="0" width="100%" height="100%"></iframe>
</li>
</ul>
</div>
<div class="embeded-animation-slider">
<div style="background-image:url(images/thumbnail/mario-front.jpg);"></div>
<div style="background-image:url(images/thumbnail/mario-back.jpg);"></div>
<div style="background-image:url(images/360.jpg);"></div>
</div>
<script>
$('.embeded-animation-slider').on('mouseover', '.doc-thumbnail', function () {
var index, items;
// get current index of thumbnail
index = $('.embeded-animation-slider .doc-thumbnail').index(this);
items = $('.embeded-animation-view li');
// hide all <li> elements and show the matched index
items.css('display', 'none').eq(index).css('display', 'block');
});
</script>
Une image fixe, une animation 360, une vidéo vous disent tout ce que vous devez savoir sur le produit et donnent au client un accès facile à sa méthode de média préférée. Les clients ont besoin de différentes supports visuels dans leur processus de décision. Avec une seule image, certains clients peuvent faire cet achat, tandis que d'autres peuvent avoir besoin de voir une animation 360 et/ou une vidéo pour valider leur commande.
<style>
.multiple-media-view {
position: relative;
}
.multiple-media-view ul {
text-align: center;
}
.multiple-media-view ul li {
position: absolute;
box-sizing: border-box;
top: 0px;
left: 0px;
display: none;
width: 100%;
height: 100%;
}
.multiple-media-view ul li:first-child {
display: block;
}
.multiple-media-view ul li div {
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
</style>
<div class="multiple-media-view">
<ul>
<li>
<div style="background-image:url(images/franz/Lv2/img02.jpg);"></div>
</li>
<li>
<iframe src="https://truview.ortery.com/guide.page/samples/franz.html" frameborder="0" width="100%" height="100%"></iframe>
</li>
<li>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/pG82eqNXvew" frameborder="0"></iframe>
</li>
</ul>
</div>
<div class="multiple-media-slider">
<div style="background-image:url(images/thumbnail/franz.jpg);"></div>
<div style="background-image:url(images/360.jpg);"></div>
<div style="background-image:url(images/youtube.jpg);"></div>
</div>
<script>
$('.multiple-media-slider').on('click', '.doc-thumbnail', function () {
var index, items;
// get current index of thumbnail
index = $('.multiple-media-slider .doc-thumbnail').index(this);
items = $('.multiple-media-view li');
// hide all <li> elements and show the matched index
items.css('display', 'none').eq(index).css('display', 'block');
});
</script>
Cliquer pour visualiser une animation
Si vous souhaitez que l'animation apparaisse dans une fenêtre séparée, cette approche peut être la bonne. Vous pouvez utiliser une belle image du produit comme point d'accès à une animation à 360 degrés qui s'ouvre dans une fenêtre séparée. Dites simplement à votre client "Cliquez pour voir l'animation en 360".
<!--
Implement shadow box effect by colorbox plugin.
(http://www.jacklmoore.com/colorbox/)
-->
<link rel="stylesheet" type="text/css" href="styles/colorbox.css" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.colorbox.js"></script>
<a class="doc-thumbnail-bumblebee" href="./images/bumblebee/Lv2/img01.jpg">
<div style="background-image:url(./images/thumbnail/bumblebee_front.jpg);"></div>
</a>
<a class="doc-thumbnail-bumblebee" href="./images/bumblebee/Lv2/img20.jpg">
<div style="background-image:url(./images/thumbnail/bumblebee_right.jpg);"></div>
</a>
<a class="doc-thumbnail-bumblebee" href="./images/bumblebee/Lv2/img13.jpg">
<div style="background-image:url(./images/thumbnail/bumblebee_back.jpg);"></div>
</a>
<a class="doc-thumbnail-bumblebee" href="https://truview.ortery.com/guide.page/samples/bumblebee.html">
<div style="background-image:url(images/360.jpg);"></div>
</a>
<script>
// use class to call colorbox method
// use rel property to group elements together for a gallery
// the transition type can be set to "elastic", "fade", or "none"
$('.doc-thumbnail-bumblebee').colorbox({rel: 'doc-thumbnail-bumblebee', transition: 'fade', width:'80%', height:'80%', maxWidth: '80%', maxHeight: '80%'});
// set iframe property true to ask program open last one by <iframe>
$('.doc-thumbnail-bumblebee').last().colorbox({iframe: true});
</script>
Intégration de plusieurs animations
Vous souhaitez comparer visuellement votre produit à d'autres produits similaires. Intégrer plusieurs animations sur la même page simplifie le processus de comparaison visuelle pour le client. Elle peut être utilisée pour inciter un client potentiel à choisir un produit plus attrayant ou pour lui suggérer un autre produit qui pourrait mieux répondre à ses besoins.
<!-- include program files -->
<link rel="stylesheet" href="libs/creator.css" />
<script type="text/javascript" src="libs/jquery.js"></script>
<script type="text/javascript" src="libs/jquery.plugin.js"></script>
<script type="text/javascript" src="libs/creator.js"></script>
<!-- define an animation container -->
<div id="sample360" class="animate-creator-container" style="width:600px; height:600px;"></div>
<script>
jQuery(function ($) {
// use id of the elem to call animate360 method
$('#sample360').animate360([
{ // the first item
object: {
name: 'hat',
model: 'cylindrical',
columns: 20,
width: 500,
height: 321
},
path: {
image: './hat/images/'
}
},
{ // the second item
object: {
name: 'cowboy_hat',
model: 'cylindrical',
columns: 16,
width: 499,
height: 267
},
path: {
image: './cowboy_hat/images/'
}
}
]);
});
</script>Shadow box
Faites apparaître des animations de produits à l'écran sans quitter la page du produit. Gardez les clients sur la page, gardez-les à proximité du bouton "Acheter maintenant".
Related Articles
11. PackshotViewer pour les sites web
Intégration d'une animation En intégrant une animation sur votre site web, vous donnez aux clients plusieurs vues d'un produit dans une seule fenêtre. Il n'est pas nécessaire de cliquer sur différentes vignettes pour essayer de trouver l'image ou ...
12. ImageCreator pour les sites web
Intégration d'une animation En intégrant une animation sur votre site web, vous donnez aux clients plusieurs vues d'un produit dans une seule fenêtre. Il n'est pas nécessaire de cliquer sur différentes vignettes pour essayer de trouver l'image ou ...
00. Intégration HTML sur AspDotNetStorefront
Etapes à suivre pour l'intégration Etape 1. Entrez dans la page “Create Product” Cliquez sur “Products > Create Product” dans la barre de tâches Etapes 2. Ouvrez “HTML Source Editor” Cliquez ensuite sur le bouton “HTML” au bas du formulaire de ...
04. Magento 2
PackshotCreator - OrteryCapture Etape 1. Installez l'extension Ouvrez le répertoire racine de Magento, et créez le répertoire app/code/directory. Ensuite, désarchivez le fichier .zip du module. Ouvrez "Terminal", et allez dans le répertoire racine de ...
03. Magento
PackshotCreator - OrteryCapture Etape 1. Installez l'extension Entrez dans ''Magento Connect Manager'' Téléchargez l'extension depuis le disque local Actualisez les données Etape 2. Paramétrage de l'extension Connectez-vous dans le panneau ...