在經營電子商務網站時，商品圖片的整理與上傳往往是佔用最多管理時間的環節之一。原生的 OpenCart 系統在編輯商品時，若要新增多張附加圖片，必須逐一複製欄位、單張選取並重複上傳，對於擁有多張圖片展示需求的商品而言，操作流程較為繁瑣。
為了解決此痛點，我們開發了「批次商品圖片管理模組」，提供給 OpenCart 架站的老闆們免費使用。此模組以獨立的彈出視窗（Popup Modal）方式呈現，讓網站管理員能以更直覺、流暢的方式，一次搞定單一商品的所有圖片配置。
一、 主要功能
1. 本地圖片批次上傳
- 多選上傳：管理員可以點擊按鈕一次選取多張電腦本地端的圖片，或直接選取整批圖檔拖曳（Drag & Drop）放置到虛線上傳區中。
- 即時傳送：系統會自動進行批次上傳，並即時在視窗中以精美的卡片形式顯示上傳完成的圖片與縮圖，無須手動重整。
2. 伺服器端目錄多選匯入
- 串接原生文件管理器：模組整合了 OpenCart 原生的伺服器文件管理器（Filemanager）。
- 多選勾選機制：當瀏覽主機端現有的商品圖片時，模組會自動將單選關閉模式切換為「多選勾選模式」。管理員可在多張圖片縮圖上點擊進行勾選，確認後即可一鍵批次匯入管理器中，免去反覆打開文件管理器的不便。
3. 直覺的圖像化拖曳排序
- 順序拖拉調整：在批次管理視窗中，所有圖片卡片皆支援滑鼠拖曳排序。
- 主圖自動標示：排在第一位的圖片會自動被標示為「主要圖片」（商品主圖），第二位之後的圖片則自動轉為「附加圖片」（商品副圖），標章狀態隨拖曳順序即時變更。
4. 動態目錄智慧歸檔（目錄設定）
- 動態目錄解析：模組提供目錄路徑的設定功能，支援多種動態代碼變數。
- 路徑自動替換：您可以設定路徑規則為例如
catalog/products/{manufacturer}/{year}/，上傳時系統會自動抓取該商品目前填寫的「品牌名稱」與「年份」建立對應資料夾（例如上傳到catalog/products/Sony/2026/），省去手動建立與切換資料夾的力氣。
二、 模組特色
- 獨立彈窗設計，低系統耦合度 模組採用了獨立的彈出視窗作為工作區。這意味著它不會破壞 OpenCart 原生的商品編輯頁面版面，也不會影響其他功能欄位。在彈出視窗中完成編輯並「套用」後，資料會自動填入原商品表單，保持商品儲存機制的安全與純淨。
- 自動檔名防衝突機制 當批次上傳本地圖片時，若伺服器端目標目錄已存在同名檔案，系統會自動在檔名後方補上數字序號（例如
iphone-1.jpg、iphone-2.jpg），避免覆蓋掉現有的圖片。 - 完整多語系支援 (i18n) 模組完全遵循 OpenCart 系統的語系載入標準，提供獨立的語言檔案。目前已預先配置「繁體中文 (zh-TW)」與「英文 (en-gb)」語系包，會自動隨管理員目前登入的後台語系切換顯示介面。
三、 核心效益
- 大幅提升上架效率 過往新增 10 張附加圖片可能需要點擊數十次滑鼠並反覆等待文件管理器載入；現在透過批次上傳或伺服器多選，僅需滑鼠一鍵勾選或拖拉放置，數秒內即可套用完畢，將商品上架的圖片處理時間縮短 80% 以上。
- 維持主機目錄條理 藉由動態上傳路徑變數（例如按品牌、年份、月份歸檔），上傳的圖片會自動歸類到對應的資料夾，避免成千上萬張圖片雜亂堆積在同一個目錄中，便於網站日後的維護與備份。
- 友善的操作體驗 去除了原版模組中繁雜且容易造成混淆的浮水印、圖片壓縮比例等工程設定，將介面精簡至「上傳」、「瀏覽」、「排序」、「刪除」四個核心動作，即使是不懂程式碼的網站小編或店長，也能在數分鐘內上手操作。
四、 結論
本「批次商品圖片管理模組」專為解決 OpenCart 商家在商品圖檔管理上的繁瑣流程而設計。藉由流暢的 HTML5 拖拉排序與多選匯入機制，在保留 OpenCart 系統穩定性的前提下，提供了極致便利的圖片配置體驗，是提升日常電商網站營運效率不可或缺的工具。