Built on WIX Headless

文件 小工具 Repeater 小工具

Repeater 小工具

使用 CMS for Harmony 的 Repeater,在 Wix Harmony 上建立由 CMS 驅動的卡片、清單與網格。

Repeater 小工具會將集合欄位對應到重複版面——卡片、清單與網格。在 CMS for Harmony 中,「卡片」指的是 Repeater 版面,不是獨立小工具。

你可以做什麼

  • Data source — Wix CMS 集合,或 External Database(Google Sheets,Pro);請參閱 External databases
  • AI setup — 用平易的語言描述需求,再於 Manual 微調;請見 AI setup
  • 顯示任何集合欄位(可重新排序並分別設定樣式),包含 Address(文字、OpenStreetMap 或兩者)、Color(色票、十六進位或兩者)、Video(模態/點擊播放/靜音自動播放),以及以可讀標籤顯示的 Reference/Multi-reference
  • 網格、清單與列版面,可設定卡片寬度、對齊、背景、內距與陰影
  • Card background — 每張卡片共用 Solid color,或 Image from field(圖片或影片),並設定 Fit、Focus,以及沒有圖片時的 Fallback color
  • 自訂卡片版面:在每張卡片內將欄位放在網格上
  • Date & time 欄位的 Show timezone(訪客本機時區縮寫)
  • 搜尋與篩選(含固定 Choose value 篩選、Dependent filters、Add as URL query params、Reference 欄位、Color 色票,以及 Filters display 上方或側邊)
  • Data refresh — Show refresh button 及/或 Auto-refresh,讓訪客重新載入最新的集合資料
  • Scroll to top on page change — 訪客切換分頁時,捲動至小工具頂部可見
  • Quick view — 開啟彈出視窗顯示額外項目欄位(卡片點擊、按鈕與/或欄位觸發;尺寸、版面與上一筆/下一筆導覽)
  • Payments(Pro)— 當集合已啟用目錄付款時,在每張卡片顯示 Add to cart/Buy now
  • 將整張卡片或按鈕連結到 Dynamic Pages(僅 Wix CMS)
  • 行動版列捲動,含吸附與控制項
  • 標題、內文、按鈕與搜尋介面使用網站字型

設定

  1. 從 Add → Elements → Installed Apps → CMS for Harmony 新增 Repeater(可新增多次)。
  2. 連接集合 — 或將 Data source 設為 External Database 並選擇 Google Sheets 連線(Pro)。或開啟 AI setup,用平易的語言描述版面。
  3. 選擇版面(網格/清單/列)與樣式。
  4. 可選擇連結到項目頁面(Wix CMS)、啟用搜尋/篩選、Data refresh、Scroll to top on page change、Quick view,並開啟付款動作。

AI setup

在面板切換到 AI setup,依簡短描述設定 Repeater(欄位、版面、篩選、設計、Quick view、付款等)。使用 Undo/Continue,或切換到 Manual 微調。詳情:AI setup。

Data refresh

在 Data refresh 中,開啟 Show refresh button 及/或 Auto-refresh,讓訪客重新載入最新的集合資料。Auto-refresh 在分頁隱藏時會暫停。同一頁面上已開啟 Update displays on this page 的 Form 若使用相同集合,提交成功後也可重新載入此小工具。

Scroll to top on page change

啟用分頁時,開啟 Scroll to top on page change,Prev/Next 會捲動頁面,讓小工具頂部保持可見。

Quick view

在 Quick view 面板區段(Wix CMS)中啟用彈出視窗並選擇要顯示的欄位。設定開啟方式(卡片點擊、專用按鈕與/或欄位點擊)、尺寸與版面,以及訪客是否可在項目間上一筆/下一筆移動。若已設定 Dynamic Page 連結,可在彈出視窗使用 View full page。

Address 欄位

對於 CMS Address 欄位,在 Formatting 中開啟該欄位並設定 Display as:

  • Text — 格式化地址列
  • Map — 互動式 OpenStreetMap 標記(值需有座標)
  • Text and map — 兩者皆顯示

你也可以設定地圖高度。若選擇地圖模式但缺少座標,小工具會在可用時改顯示文字。

Video 欄位

對於 Video 欄位(以及藝廊中的影片),將 Video playback 設為在模態開啟、點擊後內嵌播放,或靜音自動播放。

Color 欄位

對於 CMS Color 欄位,將 Display as 設為 Swatch、Hex 或 Swatch and hex,並可選擇調整色票大小。

Reference 欄位

對於 Reference/Multi-reference 欄位,從相關集合選擇 Display field,作為卡片上(以及篩選中)顯示的標籤。

非常適合團隊名錄、產品卡片與作品集。