Pesquisa no eCatalog

Última atualização em 2023-11-03
  • Criado para:
  • Developer
    User

O eCatalog Search Viewer é um visualizador de catálogo que exibe folhetos eletrônicos em uma página espelhada ou página por página. O eCatalog permite que os usuários naveguem pelo catálogo usando elementos adicionais da interface do usuário ou o modo dedicado de miniaturas. Os usuários também podem ampliar cada página para obter mais detalhes.

Esse visualizador funciona com ecatalogs e oferece suporte a mapas de imagem opcionais e ferramentas de compartilhamento em redes sociais. Ele tem ferramentas de zoom, ferramentas de navegação no catálogo, suporte para tela cheia, miniaturas e um botão de fechamento opcional. O visualizador também oferece suporte a ferramentas de compartilhamento em redes sociais, Impressão, Download e Favoritos. Ele foi projetado para funcionar em desktops e dispositivos móveis.

O usuário também pode fazer uma pesquisa com base em palavras-chave ou frases no conteúdo do catálogo.

OBSERVAÇÃO

Imagens que usam IR (Renderização de Imagem) ou UGC (Conteúdo Gerado pelo Usuário) não são compatíveis com esse visualizador.

Visualizador tipo 513.

Consulte Requisitos e pré-requisitos do sistema.

URL de demonstração

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/

Utilização do eCatalog Viewer

O Visualizador de pesquisa do eCatalog representa um arquivo JavaScript principal e um conjunto de arquivos auxiliares (um único JavaScript inclui todos os componentes do SDK do visualizador usados por esse visualizador específico, ativos, CSS) baixados pelo visualizador em tempo de execução

Você pode usar o Visualizador de pesquisa do eCatalog no modo pop-up usando uma página de HTML pronta para produção fornecida com os Visualizadores IS ou no modo incorporado, onde ela é integrada à página da Web de destino usando a API documentada.

A configuração e a aparência são semelhantes às dos outros visualizadores. Toda a atribuição de capa é obtida por meio de CSS personalizado.

Consulte Referência de comando comum a todos os visualizadores - Atributos de configuração e Referência de comando comum a todos os visualizadores - URL

Interação com o Visualizador de pesquisa do eCatalog

O eCatalog Search Viewer aceita os seguintes gestos de toque comuns em outros aplicativos móveis.

Gesto

Descrição

Toque único

Seleciona a nova miniatura nas amostras.

Toque duas vezes

Amplia um nível até atingir a ampliação máxima. O próximo gesto de toque duplo redefine o visualizador para o estado de visualização inicial.

Apertar

Aumenta ou diminui o zoom.

Passar ou mover horizontalmente

Rola pela lista de páginas do catálogo se uma transição de quadro de slide for usada.

Passar o dedo ou mover-se verticalmente

Quando a imagem está em um estado de redefinição, ela executa uma rolagem de página nativa.

Quando as miniaturas estão ativas, ela rola a lista de miniaturas.

É possível ativar um efeito de animação de inversão de página realista para navegar entre páginas de catálogo. Nesses casos, um usuário pode segurar e arrastar um canto da página e virar a página.

Esse visualizador também oferece suporte à entrada por toque e à entrada do mouse em dispositivos Windows com tela sensível ao toque e mouse. No entanto, esse suporte está limitado apenas aos navegadores Chrome, Internet Explorer 11 e Edge.

Ferramentas de compartilhamento de redes sociais com o eCatalog Search Viewer

O Visualizador de pesquisa do eCatalog é compatível com ferramentas de compartilhamento em redes sociais. Eles estão disponíveis como um botão na barra de controle principal, que se expande para uma barra de ferramentas de compartilhamento quando um usuário clica ou toca nela.

A barra de ferramentas de compartilhamento contém ícones para cada tipo de canal de compartilhamento compatível, que inclui Facebook, Twitter, compartilhamento de email, compartilhamento de código incorporado e compartilhamento de link. Quando as ferramentas de compartilhamento de email, compartilhamento incorporado ou compartilhamento de link são ativadas, o visualizador exibe uma caixa de diálogo modal com um formulário de entrada de dados correspondente. Quando Facebook ou Twitter é chamado, o visualizador redireciona o usuário para uma caixa de diálogo de compartilhamento padrão a partir de um serviço social. As ferramentas de compartilhamento não estão disponíveis no modo de tela cheia devido a restrições de segurança do navegador da Web.

O recurso Pesquisar do visualizador está disponível como um ícone de vidro na barra de ferramentas principal. Clicar ou tocar no ícone ativa o painel Pesquisar com um campo de entrada. Depois de inserir uma palavra-chave ou frase e pressionar Enter, o visualizador renderiza os resultados da pesquisa no painel e realça as palavras encontradas na exibição principal.

Incorporação do visualizador de pesquisa do eCatalog

Páginas da Web diferentes têm necessidades diferentes para o comportamento do visualizador. Às vezes, uma página da Web fornece um link que, quando selecionado, abre o visualizador em uma janela do navegador separada. Em outros casos, é necessário incorporar o visualizador diretamente na página de hospedagem. No último caso, a página da Web pode ter um layout de página estático ou usar um design responsivo que é exibido de forma diferente em diferentes dispositivos ou para diferentes tamanhos de janela do navegador. Para acomodar essas necessidades, o visualizador é compatível com três modos de operação principais: pop-up, incorporação de tamanho fixo e incorporação de design responsiva.

Sobre o modo pop-up

No modo pop-up, o visualizador é aberto em uma janela ou guia separada do navegador da Web. Ele ocupa toda a área da janela do navegador e se ajusta caso o navegador seja redimensionado ou a orientação de um dispositivo móvel seja alterada.

O modo pop-up é o mais comum para dispositivos móveis. A página da Web carrega o visualizador usando window.open() Chamada de JavaScript, configurada corretamente A elemento HTML ou qualquer outro método adequado.

É recomendável usar uma página de HTML pronta para uso para o modo de operação pop-up. Nesse caso, é chamado de eCatalogSearchViewer.html e estiver localizado na html5/ subpasta da implantação padrão do IS-Viewers:

<s7viewers_root>/html5/eCatalogSearchViewer.html

Você pode obter personalização visual aplicando CSS personalizado.

Veja a seguir um exemplo do código HTML que abre o visualizador em uma nova janela:

<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>

Sobre o modo de incorporação de tamanho fixo e o modo de incorporação de design responsivo

No modo incorporado, o visualizador é adicionado à página da Web existente, que pode já ter algum conteúdo de cliente não relacionado ao visualizador. O visualizador normalmente ocupa apenas uma parte do patrimônio imobiliário de uma página da Web.

Os principais casos de uso são páginas da Web orientadas para desktops ou dispositivos tablets e também páginas projetadas responsivas que ajustam o layout automaticamente dependendo do tipo de dispositivo.

A incorporação de tamanho fixo é usada quando o visualizador não altera seu tamanho após o carregamento inicial. Essa é a melhor opção para páginas da Web com layout estático.

A incorporação responsiva de design presume que o visualizador pode precisar redimensionar em tempo de execução em resposta à alteração de tamanho de seu contêiner DIV. O caso de uso mais comum é adicionar um visualizador a uma página da Web que usa um layout de página flexível.

No modo de incorporação de design responsivo, o visualizador se comporta de forma diferente, dependendo da forma como a página da Web dimensiona seu contêiner DIV. Se a página da Web definir somente a largura do container DIV, deixando sua altura irrestrita, o visualizador escolhe automaticamente sua altura de acordo com a proporção do ativo usado. Essa funcionalidade garante que o ativo se ajuste perfeitamente à exibição sem qualquer preenchimento nas laterais. Esse caso de uso é o mais comum para páginas da Web que usam estruturas de layout responsivas, como Bootstrap, Foundation e assim por diante.

Caso contrário, se a página da Web definir a largura e a altura do container do visualizador DIV, o visualizador preenche apenas essa área e segue o tamanho fornecido pelo layout da página da Web. Um bom exemplo é a incorporação do visualizador em uma sobreposição modal, em que a sobreposição é dimensionada de acordo com o tamanho da janela do navegador da Web.

Incorporação de tamanho fixo

Você adiciona o visualizador a uma página da Web fazendo o seguinte:

  1. Adicionar o arquivo JavaScript do visualizador à página da Web.

  2. Definição do container DIV.

  3. Definindo o tamanho do visualizador.

  4. Criar e inicializar o visualizador.

  5. Adicionar o arquivo JavaScript do visualizador à página da Web.

    A criação de um visualizador exige a adição de uma tag de script no cabeçalho de HTML. Antes de usar a API do visualizador, inclua eCatalogSearchViewer.js. A variável eCatalogSearchViewer.js O arquivo está localizado sob o html5/js/ subpasta da implantação padrão do IS-Viewers:

<s7viewers_root>/html5/js/eCatalogSearchViewer.js

Você pode usar um caminho relativo se o visualizador for implantado em um dos servidores Adobe Dynamic Media e for distribuído no mesmo domínio. Caso contrário, você especificará um caminho completo para um dos servidores Adobe Dynamic Media que possuem os Visualizadores IS instalados.

O caminho relativo tem a seguinte aparência:

<script language="javascript" type="text/javascript" src="/s7viewers/html5/js/eCatalogSearchViewer.js"></script>
  1. Definição do container DIV.

    Adicione um elemento DIV vazio à página em que você deseja que o visualizador apareça. O elemento DIV deve ter sua ID definida porque essa ID é passada posteriormente para a API do visualizador.

    O espaço reservado DIV é um elemento posicionado, o que significa que o position A propriedade CSS está definida como relative ou absolute.

    Veja a seguir um exemplo de um elemento DIV de espaço reservado definido:

    <div id="s7viewer" style="position:relative"></div>
    
  2. Definir o tamanho do visualizador

    Você pode definir o tamanho estático do visualizador declarando-o para .s7ecatalogsearchviewer classe CSS de nível superior em unidades absolutas ou usando stagesize modificador.

    Você pode colocar o dimensionamento no CSS diretamente na página do HTML ou em um arquivo CSS do visualizador personalizado, que será posteriormente atribuído a um registro predefinido do visualizador no Dynamic Media Classic ou passado explicitamente usando um comando style.

    Consulte Personalização do eCatalog Viewer para obter mais informações sobre como estilizar o visualizador com CSS.

    Este é um exemplo de definição de um tamanho de visualizador estático na página HTML:

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

    Você pode definir a variável stagesize modificador no registro predefinido do visualizador no Dynamic Media Classic, ou passe-o explicitamente com o código de inicialização do visualizador com params ou como uma chamada de API, conforme descrito na seção Referência de comandos, da seguinte maneira:

    eCatalogSearchViewer.setParam("stagesize",
    "640,480");
    
  3. Inicializando o visualizador.

    Quando tiver concluído as etapas acima, você criará uma instância de s7viewers.eCatalogSearchViewer classe, transmita todas as informações de configuração para seu construtor e chame init() em uma instância do visualizador. As informações de configuração são passadas ao construtor como um objeto JSON. No mínimo, esse objeto tem a função containerId campo que contém o nome da ID do contêiner de visualização e aninhado params Objeto JSON com parâmetros de configuração compatíveis com o visualizador. Neste caso, o params objeto deve ter pelo menos o URL do Servidor de imagens passado como serverUrl propriedade e o ativo inicial como asset parâmetro. A API de inicialização baseada em JSON permite criar e iniciar o visualizador com uma única linha de código.

    É importante adicionar o contêiner do visualizador ao DOM para que o código do visualizador possa encontrar o elemento do contêiner por sua ID. Alguns navegadores atrasam a criação do DOM até o fim da página da Web. No entanto, para obter compatibilidade máxima, chame o init() método antes do fechamento BODY ou no corpo onload() evento.

    Ao mesmo tempo, o elemento de contêiner não deve necessariamente fazer parte do layout da página da Web ainda. Por exemplo, pode ser oculto usando display:none estilo atribuído a ele. Nesse caso, o visualizador atrasa o processo de inicialização até o momento em que a página da Web traz o elemento de contêiner de volta ao layout. Quando isso acontece, o carregamento do visualizador é retomado automaticamente.

    Este é um exemplo de criação de uma instância do visualizador, transmissão das opções de configuração mínimas necessárias para o construtor e chamada de init() método. O exemplo assume eCatalogSearchViewer é a instância do visualizador; s7viewer é o nome do espaço reservado DIV; https://s7d1.scene7.com/is/image/ é o URL do Servidor de imagens e Viewers/Pluralist é o ativo:

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

    O código a seguir é um exemplo completo de uma página da Web trivial que incorpora o Visualizador de pesquisa do eCatalog com um tamanho fixo:

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="https://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":"https://s7d1.scene7.com/is/image/",
     "searchserverurl":"https://s7search1.scene7.com/s7search/"
    }
    }).init();
    </script>
    </body>
    </html>
    

Incorporação responsiva de design com altura irrestrita

Com a incorporação responsiva de design, a página da Web normalmente tem algum tipo de layout flexível em vigor que determina o tamanho do tempo de execução do container do visualizador DIV. Para os fins deste exemplo, considere que a página da Web permite o container do visualizador DIV para obter 40% do tamanho da janela do navegador web, deixando sua altura irrestrita. O código de HTML da página da Web resultante é semelhante ao seguinte:

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

Adicionar o visualizador a essa página é semelhante à incorporação de tamanho fixo, com a única diferença sendo que você não precisa definir explicitamente o tamanho do visualizador.

  1. Adicionar o arquivo JavaScript do visualizador à página da Web.
  2. Definição do container DIV.
  3. Criar e inicializar o visualizador.

Todas as etapas acima são as mesmas da incorporação de tamanho fixo. Adicionar o contêiner DIV ao "detentor" existente DIV. O código a seguir é um exemplo completo. Você pode ver como o tamanho do visualizador muda quando o navegador é redimensionado e como a taxa de proporção do visualizador corresponde ao ativo.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://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":"https://s7d1.scene7.com/is/image/",
 "searchserverurl":"https://s7search1.scene7.com/s7search/"
}
}).init();
</script>
</body>
</html>

A página de exemplos a seguir ilustra mais casos de uso reais de incorporação de design responsivo com altura irrestrita:

Demonstrações ao vivo

Incorporação de tamanho flexível com largura e altura definidas

No caso de incorporação de tamanho flexível com largura e altura definidas, o estilo da página da Web é diferente. Ou seja, fornece ambos os tamanhos ao " titular" DIV e centraliza na janela do navegador. Além disso, a página da Web define o tamanho da variável HTML e BODY elemento a 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>

As etapas de incorporação restantes são idênticas à incorporação responsiva de design com altura irrestrita. O exemplo resultante é o seguinte:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://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":"https://s7d1.scene7.com/is/image/",
 "searchserverurl":"https://s7search1.scene7.com/s7search/"
}
}).init();
</script>
</body>
</html>

Incorporação usando API baseada em setter

Em vez de usar a inicialização baseada em JSON, é possível usar a API baseada em setter e o construtor sem args. Com essa API, o construtor não aceita parâmetros e os parâmetros de configuração são especificados usando setContainerId(), setParam(), e setAsset() Métodos de API do com chamadas de JavaScript separadas.

O exemplo a seguir mostra a incorporação de tamanho fixo com a API baseada em setter:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://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", "https://s7d1.scene7.com/is/image/");
eCatalogSearchViewer.setParam("searchserverurl", "https://s7search1.scene7.com/s7search/");
eCatalogSearchViewer.setAsset("Viewers/Pluralist");
eCatalogSearchViewer.init();
</script>
</body>
</html>

Nesta página