Recherche de catalogue électronique

Visionneuse de recherche de catalogue électronique est une visionneuse de catalogue qui affiche des brochures électroniques dans une planche par planche ou page par page. Le catalogue électronique permet aux utilisateurs de parcourir le catalogue à l’aide d’éléments d’interface utilisateur supplémentaires ou d’un mode de miniatures dédié. Les utilisateurs peuvent également effectuer un zoom avant sur chaque page pour plus de détails.

Cette visionneuse fonctionne avec des catalogues électroniques et prend en charge les zones cliquables et les outils de partage sur les réseaux sociaux en option. Il comprend des outils de zoom, des outils de navigation catalogue, une prise en charge en plein écran, des miniatures et un bouton de fermeture en option. Le lecteur prend également en charge les outils de partage sur les réseaux sociaux, l’impression, le téléchargement et les favoris. Il est conçu pour fonctionner sur les ordinateurs de bureau et les périphériques mobiles.

L’utilisateur peut également effectuer une recherche basée sur des mots-clés ou des expressions sur le contenu du catalogue.

REMARQUE

Cette visionneuse ne prend pas en charge les images qui utilisent la fonction IR (Image Rendering) ou UGC (User-Generated Content).

Type de visionneuse 513.

Voir Configuration système requise et configuration requise.

URL de la démonstration

https://s7d9.scene7.com/s7viewers/html5/eCatalogSearchViewer.html?emailurl=https://s7d9.scene7.com/s7/emailFriend&serverUrl=https://s7d9.scene7.com/is/image/&config=Scene7SharedAssets/Universal_HTML5_eCatalog_Search&contenturl=https://s7d9.scene7.com/skins/&asset=Viewers/Pluralist&searchserverurl=https://s7search1.scene7.com/s7search/

Utilisation de la visionneuse de catalogue électronique

La visionneuse de recherche de catalogue électronique représente un fichier JavaScript principal et un ensemble de fichiers d’aide (un seul fichier JavaScript est inclus avec tous les composants du SDK de la visionneuse utilisés par cette visionneuse, ressources et CSS) téléchargés par la visionneuse au moment de l’exécution.

Vous pouvez utiliser la visionneuse de recherche de catalogue électronique en mode contextuel à l’aide d’une page HTML prête à l’emploi fournie avec des visionneuses IS ou en mode intégré, où elle est intégrée à la page Web de cible à l’aide d’une API documentée.

La configuration et l’habillage sont similaires à ceux des autres visionneuses. L’habillage est effectué au moyen d’une page CSS personnalisée.

Voir Référence de commande commune à toutes les visionneuses - Attributs de configuration et Référence de commande commune à toutes les visionneuses - URL

Interaction avec la visionneuse de recherche de catalogue électronique

Le lecteur de recherche de catalogue électronique prend en charge les mouvements tactiles suivants, courants dans d’autres applications mobiles.

Mouvement

Description

Touche unique

Sélectionne une nouvelle miniature dans les échantillons.

Doublon

Applique un zoom à un niveau jusqu’à ce que le zoom maximal soit atteint. Le mouvement de pression du doublon suivant réinitialise l’affichage initial de la visionneuse.

Pincer

Applique un zoom avant ou arrière.

Glissement ou clic horizontal

Fait défiler la liste des pages de catalogue si une transition de blocs de diapositives est utilisée.

Glissement ou clic vertical

Lorsque l’image est en état de réinitialisation, elle effectue un défilement de page natif.

Lorsque les miniatures sont principales, elles font défiler la liste des miniatures.

Il est possible d’activer un effet d’animation de retournement de page réaliste pour naviguer entre les pages du catalogue. Dans ce cas, l’utilisateur peut maintenir enfoncé un coin de page et le faire glisser pour retourner la page.

Ce lecteur prend également en charge les entrées tactiles et de souris sur les périphériques Windows dotés d’un écran tactile et d’une souris. Toutefois, cette prise en charge est limitée aux navigateurs Web Chrome, Internet Explorer 11 et Edge uniquement.

Outils de partage sur les réseaux sociaux avec le lecteur de recherche de catalogue électronique

Le lecteur de recherche de catalogue électronique prend en charge les outils de partage sur les réseaux sociaux. Il est disponible sous la forme d’un bouton dans la barre de contrôle principale qui se développe en une barre d’outils de partage lorsqu’un utilisateur clique ou appuie dessus.

La barre d’outils de partage contient des icônes pour chaque type de canal de partage pris en charge, notamment Facebook, Twitter, partage de courrier électronique, partage de code incorporé et partage de liens. Lorsque des outils de partage de courrier électronique, de partage incorporé ou de partage de liens sont activés, le lecteur affiche une boîte de dialogue modale avec un formulaire de saisie de données correspondant. Lorsque Facebook ou Twitter est appelé, le lecteur redirige l’utilisateur vers une boîte de dialogue de partage standard à partir d’un service social. Les outils de partage ne sont pas disponibles en mode plein écran en raison des restrictions de sécurité du navigateur Web.

La fonction de recherche du lecteur de contenu est disponible sous la forme d’une icône en forme de vitre dans la barre d’outils principale. Cliquez ou appuyez sur l’icône pour activer le panneau Rechercher avec un champ de saisie. Après avoir saisi un mot-clé ou une expression et appuyé sur Entrée, le lecteur affiche les résultats de la recherche dans le panneau et met en surbrillance les mots trouvés dans la vue principale.

Incorporation de la visionneuse de recherche de catalogue électronique

Différentes pages Web ont des besoins différents en ce qui concerne le comportement des visiteurs. Il arrive qu’une page Web fournisse un lien qui, lorsqu’un utilisateur clique dessus, ouvre le lecteur dans une fenêtre de navigateur distincte. Dans d’autres cas, il est nécessaire d’incorporer le droit du lecteur dans la page d’hébergement. Dans ce dernier cas, la page Web peut avoir une mise en page statique, ou utiliser une conception adaptée qui s’affiche différemment sur différents périphériques ou pour différentes tailles de fenêtre de navigateur. Pour répondre à ces besoins, le lecteur prend en charge trois modes de fonctionnement Principaux : fenêtre contextuelle, incorporation de tailles fixes et incorporation de conceptions réactives.

A propos du mode contextuel

En mode contextuel, le lecteur s’ouvre dans une fenêtre ou un onglet distinct du navigateur Web. Elle prend toute la zone de la fenêtre du navigateur et s’ajuste au cas où le navigateur serait redimensionné ou où l’orientation d’un périphérique mobile serait modifiée.

Le mode contextuel est le plus courant pour les périphériques mobiles. La page Web charge la visionneuse à l’aide de l’appel JavaScript window.open(), d’un élément HTML A correctement configuré ou de toute autre méthode appropriée.

Il est recommandé d’utiliser une page HTML prête à l’emploi pour le mode d’opération contextuel. Dans ce cas, il s’appelle eCatalogSearchViewer.html et se trouve dans le sous-dossier html5/ de votre déploiement des visionneuses IS standard :

<s7viewers_root>/html5/eCatalogSearchViewer.html

Vous pouvez réaliser la personnalisation visuelle en appliquant une page CSS personnalisée.

Voici un exemple de code HTML qui ouvre la visionneuse dans une nouvelle fenêtre :

<a href="https://s7d9.scene7.com/s7viewers/html5/eCatalogSearchViewer.html?emailurl=https://s7d9.scene7.com/s7/emailFriend&serverUrl=https://s7d9.scene7.com/is/image/&config=Scene7SharedAssets/Universal_HTML5_eCatalog_Search&contenturl=https://s7d9.scene7.com/skins/&asset=Viewers/Pluralist&searchserverurl=https://s7search1.scene7.com/s7search/" target="_blank">Open pop-up viewer</a>

A propos du mode d'incorporation de taille fixe et du mode d'incorporation de conception réactif

En mode incorporé, le lecteur est ajouté à la page Web existante, qui peut déjà contenir du contenu client qui n’est pas lié au lecteur. En règle générale, le lecteur occupe uniquement une partie de l’espace d’une page Web.

Les cas d'utilisation Principaux sont les pages Web orientées vers les ordinateurs de bureau ou les tablettes, ainsi que les pages adaptées qui ajustent automatiquement la mise en page en fonction du type de périphérique.

L’incorporation de taille fixe est utilisée lorsque la visionneuse ne change pas de taille après le chargement initial. Il s’agit du meilleur choix pour les pages Web présentant une disposition statique.

L’incorporation de la conception réactive suppose que la visionneuse doit peut-être être redimensionnée au moment de l’exécution en réponse au changement de taille de son conteneur DIV. Le cas d’utilisation le plus courant consiste à ajouter une visionneuse à une page Web qui utilise une disposition de page souple.

En mode d’incorporation de conceptions réactives, le lecteur se comporte différemment selon la manière dont la page Web dimensionne son conteneur DIV. Si la page Web ne définit que la largeur du conteneur DIV, en ne limitant pas sa hauteur, le lecteur sélectionne automatiquement sa hauteur en fonction des proportions du fichier utilisé. Cette fonctionnalité permet de s’assurer que la ressource s’intègre parfaitement à la vue sans remplissage sur les côtés. Ce cas d’utilisation est le plus courant pour les pages Web utilisant des structures de mise en page réactives telles que Bootstrap, Foundation, etc.

Sinon, si la page Web définit à la fois la largeur et la hauteur du conteneur DIV du lecteur, celui-ci remplit cette zone et suit la taille fournie par la mise en page Web. Un bon exemple est l’incorporation de la visionneuse dans une incrustation modale, où l’incrustation est dimensionnée en fonction de la taille de la fenêtre du navigateur Web.

Incorporation de taille fixe

Pour ajouter la visionneuse à une page Web, procédez comme suit :

  1. Ajouter le fichier JavaScript de la visionneuse sur votre page Web.

  2. Définition de la balise DIV de conteneur.

  3. Définition de la taille de la visionneuse.

  4. Création et initialisation de la visionneuse.

  5. Ajouter le fichier JavaScript de la visionneuse sur votre page Web.

    Pour créer une visionneuse, vous devez ajouter une balise de script dans l’en-tête HTML. Avant de pouvoir utiliser l’API du lecteur de contenu, veillez à inclure eCatalogSearchViewer.js. Le fichier eCatalogSearchViewer.js se trouve sous le sous-dossier html5/js/ de votre déploiement des visionneuses IS standard :

<s7viewers_root>/html5/js/eCatalogSearchViewer.js

Vous pouvez utiliser un chemin relatif si le lecteur est déployé sur l’un des serveurs Dynamic Media d’Adobe et qu’il est diffusé à partir du même domaine. Sinon, vous spécifiez un chemin d’accès complet à l’un des serveurs Dynamic Media d’Adobe sur lesquels les visionneuses IS sont installées.

Le chemin relatif ressemble à ce qui suit :

<script language="javascript" type="text/javascript" src="/s7viewers/html5/js/eCatalogSearchViewer.js"></script>
  1. Définition de la balise DIV de conteneur.

    Ajoutez un élément DIV vide sur la page où doit apparaître le lecteur de contenu. L’identifiant de l’élément DIV doit être défini, car il est transmis ultérieurement à l’API du lecteur de contenu.

    L’espace réservé DIV est un élément positionné, ce qui signifie que la propriété CSS position est définie sur relative ou absolute.

    Voici un exemple d’élément DIV d’espace réservé défini :

    <div id="s7viewer" style="position:relative"></div>
    
  2. Définition de la taille de la visionneuse

    Vous pouvez définir la taille statique de la visionneuse en la déclarant pour la classe CSS de niveau supérieur .s7ecatalogsearchviewer en unités absolues ou en utilisant le modificateur stagesize.

    Vous pouvez placer le dimensionnement en CSS directement sur la page HTML ou dans un fichier CSS de visionneuse personnalisée, qui est ensuite affecté à un enregistrement de paramètre prédéfini de visionneuse dans Dynamic Media Classic ou transmis explicitement à l’aide d’une commande de style.

    Voir Personnalisation de la visionneuse de catalogue électronique pour plus d’informations sur le style de la visionneuse avec CSS.

    Voici un exemple de définition de la taille d’une visionneuse statique dans une page HTML :

    #s7viewer.s7ecatalogsearchviewer { 
     width: 640px; 
     height: 480px; 
    }
    

    Vous pouvez définir le modificateur stagesize soit dans l’enregistrement de paramètre prédéfini de la visionneuse dans Dynamic Media Classic, soit le transmettre explicitement avec le code d’initialisation de la visionneuse avec la collection params, soit en tant qu’appel d’API comme décrit dans la section Référence de commande, comme suit :

    eCatalogSearchViewer.setParam("stagesize", 
    "640,480");
    
  3. Initialisation de la visionneuse.

    Une fois les étapes ci-dessus terminées, vous créez une instance de classe s7viewers.eCatalogSearchViewer, vous transmettez toutes les informations de configuration à son constructeur et vous appelez la méthode init() sur une instance de lecteur. Les informations de configuration sont transmises au constructeur sous la forme d’un objet JSON. Au minimum, cet objet a le champ containerId qui contient le nom de l’ID de conteneur de la visionneuse et l’objet JSON imbriqué params avec les paramètres de configuration pris en charge par la visionneuse. Dans ce cas, l’objet params doit avoir au moins la propriété Image Serving URL transmise en tant que propriété serverUrl et la ressource initiale en tant que paramètre asset. L’API d’initialisation basée sur JSON vous permet de créer et de début le lecteur avec une seule ligne de code.

    Il est important que le conteneur de la visionneuse soit ajouté au modèle DOM afin que le code de la visionneuse puisse trouver l’élément de conteneur en fonction de son identifiant. Certains navigateurs retardent la création du modèle DOM jusqu’à la fin de la page Web. Pour une compatibilité maximale, cependant, appelez la méthode init() juste avant la balise de fermeture BODY ou sur le événement body onload().

    En même temps, l’élément conteneur ne doit pas nécessairement faire partie de la mise en page de la page Web pour le moment. Par exemple, il peut être masqué à l’aide du style display:none qui lui est affecté. Dans ce cas, le lecteur retarde son processus d’initialisation jusqu’au moment où la page Web ramène l’élément de conteneur à la mise en page. Dans ce cas, le chargement du lecteur reprend automatiquement.

    Voici un exemple de création d’une instance de visionneuse, de transmission des options de configuration minimales nécessaires au constructeur et d’appel de la méthode init(). L’exemple suppose que eCatalogSearchViewer correspond à l’instance de visionneuse ; s7viewer est le nom de l'espace réservé DIV; http://s7d1.scene7.com/is/image/ correspond à l’URL de diffusion d’images et Viewers/Pluralist à la ressource :

    <script type="text/javascript"> 
    var eCatalogSearchViewer = new s7viewers.eCatalogSearchViewer({ 
     "containerId":"s7viewer", 
    "params":{ 
     "asset":"Viewers/Pluralist", 
     "serverurl":"http://s7d1.scene7.com/is/image/", 
     "searchserverurl":"http://s7search1.scene7.com/s7search/" 
    } 
    }).init(); 
    </script>
    

    Le code suivant est un exemple complet d’une page Web triviale qui incorpore la visionneuse de recherche de catalogue électronique avec une taille fixe :

    <!DOCTYPE html> 
    <html> 
    <head> 
    <script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/eCatalogSearchViewer.js"></script> 
    <style type="text/css"> 
    #s7viewer.s7ecatalogsearchviewer { 
     width: 640px; 
     height: 480px; 
    } 
    </style> 
    </head> 
    <body> 
    <div id="s7viewer" style="position:relative"></div> 
    <script type="text/javascript"> 
    var eCatalogSearchViewer = new s7viewers.eCatalogSearchViewer({ 
     "containerId":"s7viewer", 
    "params":{ 
     "asset":"Viewers/Pluralist", 
     "serverurl":"http://s7d1.scene7.com/is/image/", 
     "searchserverurl":"http://s7search1.scene7.com/s7search/" 
    } 
    }).init(); 
    </script> 
    </body> 
    </html>
    

Incorporation de conception réactive avec une hauteur libre

Avec l’incorporation de conceptions réactives, la page Web dispose normalement d’une sorte de disposition souple qui détermine la taille d’exécution du conteneur DIV du lecteur. Pour les besoins de cet exemple, supposons que la page Web permette au conteneur DIV du lecteur de prendre 40 % de la taille de la fenêtre du navigateur Web, en laissant sa hauteur libre. Le code HTML de la page Web qui en résulte ressemble à ce qui suit :

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
.holder { 
 width: 40%; 
} 
</style> 
</head> 
<body> 
<div class="holder"></div> 
</body> 
</html>

Ajouter le lecteur à une telle page est similaire à l’incorporation de tailles fixes, à la seule différence que vous n’avez pas besoin de définir explicitement la taille de la visionneuse.

  1. Ajouter le fichier JavaScript de la visionneuse sur votre page Web.
  2. Définition de la balise DIV de conteneur.
  3. Création et initialisation de la visionneuse.

Toutes les étapes ci-dessus sont identiques à celles de l’incorporation de tailles fixes. Ajoutez le conteneur DIV au " détenteur" DIV existant. Le code suivant est un exemple complet. Vous pouvez voir comment la taille de la visionneuse change lorsque le navigateur est redimensionné et comment les proportions de la visionneuse correspondent à la ressource.

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/eCatalogSearchViewer.js"></script> 
<style type="text/css"> 
.holder { 
 width: 40%; 
} 
</style> 
</head> 
<body> 
<div class="holder"> 
<div id="s7viewer" style="position:relative"></div> 
</div> 
<script type="text/javascript"> 
var eCatalogSearchViewer = new s7viewers.eCatalogSearchViewer({ 
 "containerId":"s7viewer", 
"params":{ 
 "asset":"Viewers/Pluralist", 
 "serverurl":"http://s7d1.scene7.com/is/image/", 
 "searchserverurl":"http://s7search1.scene7.com/s7search/" 
} 
}).init(); 
</script> 
</body> 
</html>

La page d’exemples suivante illustre davantage de cas d’utilisation réelle d’incorporation de conceptions réactives avec une hauteur libre :

Démonstrations en direct

Taille flexible incorporée avec définition de la largeur et de la hauteur

Dans le cas d’une incorporation de taille flexible avec des valeurs de largeur et de hauteur définies, le style de la page Web est différent. Autrement dit, il fournit les deux tailles au "détenteur" DIV et le centre dans la fenêtre du navigateur. En outre, la page Web définit la taille des éléments HTML et BODY sur 100 % :

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
html, body { 
 width: 100%; 
 height: 100%; 
} 
.holder { 
 position: absolute; 
 left: 20%; 
 top: 20%; 
 width: 60%; 
height: 60%; 
} 
</style> 
</head> 
<body> 
<div class="holder"></div> 
</body> 
</html>

Les étapes d’incorporation restantes sont identiques à celles d’incorporation de conception adaptée avec une hauteur libre. L’exemple qui en résulte est le suivant :

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/eCatalogSearchViewer.js"></script> 
<style type="text/css"> 
html, body { 
 width: 100%; 
 height: 100%; 
} 
.holder { 
 position: absolute; 
 left: 20%; 
 top: 20%; 
 width: 60%; 
height: 60%; 
} 
</style> 
</head> 
<body> 
<div class="holder"> 
<div id="s7viewer" style="position:relative"></div> 
</div> 
<script type="text/javascript"> 
var eCatalogSearchViewer = new s7viewers.eCatalogSearchViewer({ 
 "containerId":"s7viewer", 
"params":{ 
 "asset":"Viewers/Pluralist", 
 "serverurl":"http://s7d1.scene7.com/is/image/", 
 "searchserverurl":"http://s7search1.scene7.com/s7search/" 
} 
}).init(); 
</script> 
</body> 
</html>

Incorporation à l’aide d’une API basée sur Setter

Au lieu d’utiliser une initialisation basée sur JSON, il est possible d’utiliser une API basée sur un setter et un constructeur sans args. Avec ce constructeur d'API, aucun paramètre n'est utilisé et les paramètres de configuration sont spécifiés à l'aide des méthodes d'API setContainerId(), setParam() et setAsset() avec des appels JavaScript distincts.

L’exemple suivant montre l’incorporation de tailles fixes avec l’API basée sur setter :

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/eCatalogSearchViewer.js"></script> 
<style type="text/css"> 
#s7viewer.s7ecatalogsearchviewer { 
 width: 640px; 
 height: 480px; 
} 
</style> 
</head> 
<body> 
<div id="s7viewer" style="position:relative"></div> 
<script type="text/javascript"> 
var eCatalogSearchViewer = new s7viewers.eCatalogSearchViewer(); 
eCatalogSearchViewer.setContainerId("s7viewer"); 
eCatalogSearchViewer.setParam("serverurl", "http://s7d1.scene7.com/is/image/"); 
eCatalogSearchViewer.setParam("searchserverurl", "http://s7search1.scene7.com/s7search/"); 
eCatalogSearchViewer.setAsset("Viewers/Pluralist"); 
eCatalogSearchViewer.init(); 
</script> 
</body> 
</html>

Sur cette page