eCatalog搜尋 ecatalog-search

Last update: Sat Nov 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：
Dynamic Media Classic,Viewers,SDK/API,eCatalog Search

建立對象：

Developer
User

eCatalog Search Viewer是一種目錄檢視器，可依跨頁或逐頁方式在跨頁中顯示電子手冊。 eCatalog可讓使用者使用其他使用者介面元素或專用縮圖模式導覽目錄。使用者還可以放大每個頁面，以取得更詳細的資訊。

此檢視器可與eCatalog搭配使用，並支援選用的影像地圖和社交分享工具。它有縮放工具、目錄導覽工具、全熒幕支援、縮圖和選用的關閉按鈕。檢視器也支援社交分享工具、列印、下載和我的最愛。專為桌上型電腦和行動裝置所設計。

使用者也可以對目錄內容進行關鍵字或片語搜尋。

NOTE

此檢視器不支援使用IR （影像演算）或UGC （使用者產生的內容）的影像。

檢視器型別513。

另請參閱系統需求和先決條件.

示範URL section-e1c3106f5b3e445d9b95be337c2f94e2

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/

使用eCatalog檢視器 section-e6c68406ecdc4de781df182bbd8088b4

eCatalog搜尋檢視器代表檢視器在執行階段下載的主要JavaScript檔案和一組協助程式檔案（單一JavaScript包含此特定檢視器使用的所有Viewer SDK元件、資產、CSS）

您可以在快顯視窗模式中使用eCatalog Search Viewer，只要使用隨IS-Viewers提供的生產就緒HTML頁面，或透過內嵌模式使用檔案說明的API將其整合至目標網頁。

組態和外觀設定與其他檢視器的組態和外觀設定類似。所有外觀設定都是透過自訂CSS來達成。

另請參閱所有檢視器通用的命令參考 — 組態屬性和所有檢視器通用的命令參考 — URL

與eCatalog搜尋檢視器互動 section-642e66ca38cd4032992840ec6c0b0cd2

eCatalog Search Viewer支援下列其他行動應用程式中常見的觸控手勢。

手勢

說明

點一下滑鼠

選取色票中的新縮圖。

點兩下

放大一個層級，直到達到最大放大倍數。下一個雙點手勢會將檢視器重設為初始檢視狀態。

捏合

放大或縮小。

水準撥動或輕觸

如果使用投影片影格切換，則捲動目錄頁面的清單。

垂直撥動或輕觸

當影像處於重設狀態時，會執行原生頁面捲動。

當縮圖作用中時，它會捲動縮圖清單。

您可以啟用逼真的頁面翻轉動畫效果，以便在目錄頁面之間導覽。在這種情況下，使用者可以按住並拖曳頁面角落並翻轉頁面。

此檢視器也支援在配備觸控熒幕和滑鼠的Windows裝置上進行觸控輸入和滑鼠輸入。不過，這項支援僅限Chrome、Internet Explorer 11和Edge網頁瀏覽器。

使用eCatalog搜尋檢視器的社群媒體共用工具 section-eb575084a99647c3a9591f439f40b412

eCatalog搜尋檢視器支援社交分享工具。這些按鈕可在主要控制列作為按鈕使用，當使用者按一下或點選共用工具列時，主控制列會展開為共用工具列。

共用工具列包含各種支援的共用管道型別圖示，包括Facebook、Twitter、電子郵件共用、內嵌程式碼共用和連結共用。啟動電子郵件共用、內嵌共用或連結共用工具時，檢視器會顯示模型對話方塊，其中包含對應的資料輸入表單。呼叫Facebook或Twitter時，檢視器會將使用者從社交服務重新導向至標準共用對話方塊。因為Web瀏覽器安全限制，所以無法在全熒幕模式中使用共用工具。

檢視器的「搜尋」功能可在主工具列中顯示為鏡面圖示。按一下或點選圖示會啟動包含輸入欄位的「搜尋」面板。輸入關鍵字或片語並按Enter鍵後，檢視器會在面板中呈現搜尋結果，並在主檢視中反白顯示的文字。

內嵌eCatalog搜尋檢視器 section-6bb5d3c502544ad18a58eafe12a13435

不同的網頁對檢視者的行為有不同的需求。有時，網頁會提供連結，在選取時會在個別瀏覽器視窗中開啟檢視器。在其他情況下，需要直接將檢視器內嵌在託管頁面中。在後一種情況下，網頁可能會有靜態頁面佈局，或使用在不同裝置上或不同瀏覽器視窗大小下顯示不同的回應式設計。為了滿足這些需求，檢視器支援三種主要操作模式：快顯視窗、固定大小嵌入和回應式設計嵌入。

關於彈出式模式

在快顯視窗模式中，檢視器會在個別的網頁瀏覽器視窗或標籤中開啟。它會取用整個瀏覽器視窗區域，並在瀏覽器調整大小或行動裝置方向變更時進行調整。

快顯視窗模式最常用於行動裝置。網頁會使用載入檢視器 window.open() javascript呼叫，已正確設定 A HTML元素或任何其他適當的方法。

建議您為快顯視窗操作模式使用現成可用的HTML頁面。在此案例中，它被稱為 eCatalogSearchViewer.html 且位於 html5/ 標準IS-Viewers部署的子資料夾：

<s7viewers_root>/html5/eCatalogSearchViewer.html

您可以套用自訂CSS以實現視覺化自訂。

以下是在新視窗中開啟檢視器的HTML程式碼範例：

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

關於固定大小內嵌模式和回應式設計內嵌模式

在內嵌模式中，檢視器會新增至現有網頁，其中可能已有某些與檢視器無關的客戶內容。檢視器通常只會佔用網頁的一部分空間。

主要使用案例是針對桌上型電腦或平板電腦裝置的網頁，以及可依據裝置型別自動調整版面的回應式設計頁面。

當檢視器在初始載入後未變更其大小時，會使用固定大小內嵌。這是靜態佈局網頁的最佳選擇。

回應式設計內嵌假設檢視器在執行階段可能需要調整大小以回應容器大小變更 DIV. 最常見的使用案例是將檢視器新增到使用彈性頁面配置的網頁。

在回應式設計內嵌模式中，檢視器的行為會因網頁大小其容器的方式而異 DIV. 如果網頁僅設定容器的寬度 DIV，只要其高度不受限制，檢視器就會根據所使用資產的外觀比例，自動選擇高度。此功能可確保資產完全符合檢視方式，且兩側不會有任何邊框間距。此使用案例最常用於使用回應式佈局架構(例如Bootstrap、Foundation等)的網頁。

否則，如果網頁同時設定檢視器容器的寬度和高度 DIV，檢視器會填滿該區域，並遵循網頁版面提供的大小。一個好的範例是內嵌檢視器至強制回應覆蓋圖，其中覆蓋圖會根據網頁瀏覽器視窗大小而調整。

固定大小內嵌

您可以執行下列動作，將檢視器新增至網頁：

正在將檢視器JavaScript檔案新增至您的網頁。
定義容器DIV。
設定檢視器大小。
正在建立和初始化檢視器。
正在將檢視器JavaScript檔案新增至您的網頁。

建立檢視器需要您在HTML標題中新增指令碼標籤。在可以使用檢視器API之前，請務必加入 eCatalogSearchViewer.js. 此 eCatalogSearchViewer.js 檔案位於 html5/js/ 標準IS-Viewers部署的子資料夾：

<s7viewers_root>/html5/js/eCatalogSearchViewer.js

如果檢視器部署在其中一個部署的Dynamic Media伺服器上，且從相同網域提供，則Adobe可以使用相對路徑。否則，您可以指定已安裝IS-Viewers的其中一個AdobeDynamic Media伺服器的完整路徑。

相對路徑如下所示：

<script language="javascript" type="text/javascript" src="/s7viewers/html5/js/eCatalogSearchViewer.js"></script>

定義容器DIV。

新增空的DIV元素至要顯示檢視器的頁面。 DIV元素必須定義其ID，因為此ID稍後會傳遞至檢視器API。

預留位置DIV是定位元素，表示 position CSS屬性已設定為 relative 或 absolute.

以下為已定義預留位置DIV元素的範例：

code language-html
`<div id="s7viewer" style="position:relative"></div>`

設定檢視器大小

您可以宣告檢視器的靜態大小 .s7ecatalogsearchviewer 頂層CSS類別（以絕對單位表示），或使用 stagesize 修飾元。

您可以將CSS的大小直接放在HTML頁面上，或放在自訂檢視器CSS檔案中，稍後再將其指派給Dynamic Media Classic中的檢視器預設集記錄，或使用樣式命令明確傳遞。

另請參閱自訂eCatalog檢視器以取得有關使用CSS設定檢視器樣式的詳細資訊。

以下是在HTML頁面中定義靜態檢視器大小的範例：

code language-html
`#s7viewer.s7ecatalogsearchviewer { width: 640px; height: 480px; }`

您可以設定 stagesize 在Dynamic Media Classic的檢視器預設集記錄中修飾元，或使用檢視器初始化程式碼明確傳遞 params 集合，或作為API呼叫，如命令參考區段所述，如下所示：

code language-html
`eCatalogSearchViewer.setParam("stagesize", "640,480");`

正在初始化檢視器。

完成上述步驟後，您會建立 s7viewers.eCatalogSearchViewer 類別，將所有設定資訊傳遞至其建構函式，並呼叫 init() 方法。組態資訊會以JSON物件的形式傳遞至建構函式。此物件至少具有 containerId 包含檢視器容器ID名稱且以巢狀顯示的欄位 params 具有檢視器支援之設定引數的JSON物件。在此案例中， params 物件必須至少將「影像伺服」URL傳遞為 serverUrl 屬性，並將初始資產設為 asset 引數。 JSON型初始化API可讓您使用一行程式碼來建立和啟動檢視器。

請務必將檢視器容器新增至DOM，讓檢視器程式碼可依其ID尋找容器元素。有些瀏覽器會延遲建立DOM，直到網頁結尾為止。不過，為達到最大相容性，請呼叫 init() 方法（在結尾之前） BODY 標籤上，或在內文上 onload() 事件。

同時，容器元素目前不一定會成為網頁配置的一部分。例如，可使用以下專案將其隱藏： display:none 樣式已指派給它。在此情況下，檢視器會延遲其初始化程式，直到網頁將容器元素帶回版面配置為止。發生此情況時，檢視器會自動繼續載入。

以下範例說明如何建立檢視器例項、將最低必要設定選項傳遞至建構函式，以及呼叫 init() 方法。此範例假設 eCatalogSearchViewer 是檢視器例項； s7viewer 是預留位置名稱 DIV； https://s7d1.scene7.com/is/image/ 是「影像伺服」URL，且 Viewers/Pluralist 為資產：

code language-html

code language-html
`<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>`

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

下列程式碼是嵌入固定大小eCatalog搜尋檢視器的簡單網頁的完整範例：

code language-html

code language-html
<!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>

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

高度不受限制的回應式設計內嵌

透過回應式設計內嵌，網頁通常會有某種彈性的版面配置，可指定檢視器容器的執行階段大小 DIV. 在此範例中，假設網頁允許檢視器的容器 DIV 佔用40%的網頁瀏覽器視窗大小，其高度不受限制。產生的網頁HTML程式碼如下所示：

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

將檢視器新增至這類頁麵類似於嵌入固定大小，唯一的差別是您不需要明確定義檢視器大小。

正在將檢視器JavaScript檔案新增至您的網頁。
定義容器DIV。
正在建立和初始化檢視器。

上述所有步驟與內嵌固定大小相同。新增容器 DIV 至現有的「持有者」 DIV. 下列程式碼為完整的範例。您可以檢視瀏覽器調整大小時檢視器大小的變更，以及檢視器外觀比例與資產的相符情形。

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

下列範例頁面說明高度不受限制的回應式設計內嵌的更多實際使用案例：

即時示範

定義寬度和高度的彈性大小內嵌

若是定義寬度和高度的彈性大小內嵌，網頁的樣式會不同。也就是說，它會將兩種大小提供給「托架」 DIV 並將其置中於瀏覽器視窗中。此外，網頁會設定 HTML 和 BODY 元素至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>

其餘的內嵌步驟與高度不受限制的回應式設計內嵌相同。產生的範例如下：

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

使用Setter型API進行內嵌

您可以使用setter式API和no-args建構函式，而不使用JSON式初始化。使用該API建構函式不會接受任何引數，而且設定引數是使用 setContainerId()， setParam()、和 setAsset() API方法與個別的JavaScript呼叫。

下列範例顯示固定大小內嵌以setter為基礎的API：

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

recommendation-more-help

b7426f53-aad9-4c00-83fc-664f30f681e8