瞭解 J2Store 與佈景主題的搭配
佈景主題是 Joomla! 網站在視覺上的定義組合，套用新的佈景主題就能將網站改頭換面。市面上已有很多為 J2Store 設計，具備 RWD 要素的商業佈景主題，你可在 J2Store 官網的「Extensions – Templates」頁面，瀏覽佈景主題廠商為 J2Store 製作的佈景主題產品。
▲依照營運類型或開發商，挑選適合網路商店的 J2Store 設計主題。
付費佈景主題提供多樣展示風格、詳細的參考資料以及後續支援，價格多半在數十美金範圍，不用太多花費就能獲得外貌協會推薦的好看網站。如果你的經費有限，或是尚未確定要採用 J2Store，官網也提供免費佈景資源提供參考。
佈景主題的詳細說明請參考《Joomla! 3.x 素人架站計畫》第五章，本文說明如何利用佈景主題覆寫，以及 J2Store 自訂子佈景主題做到自訂版面修改。
J2Store 子佈景主題資源
還記得在說明 J2Store 顯示設定時提到的「子佈景主題」嗎？子佈景主題是「商品列表畫面」、「依標籤顯示商品」及「商品詳細畫面」的版型檔案集合。你可以建立自己的子佈景主題，調整 J2Store 的運作呈現。
子佈景主題的版型檔案路徑位於「components/com_j2store/templates」，你會看到四個資料夾，其用途如下：
- default：選單運作類型「商品列表畫面」時的子佈景主題「預設」項目，支援 Bootstrap 2。
- bootstrap3：選單運作類型「商品列表畫面」時的子佈景主題「bootstrap3」項目，支援 Bootstrap 3。。
- tag_default：選單運作類型「以標籤顯示商品」時的子佈景主題「預設」項目，支援 Bootstrap 2。
- tag_bootstrap3：選單運作類型「以標籤顯示商品」時的子佈景主題「tag_bootscrap3」項目，支援 Bootstrap 3。
利用 Joomla! 頁面視覺定義檔案的套用順序，實施佈景主題覆寫
Joomla! 在顯示網站畫面時，會先到當前佈景主題資料夾尋找擴充套件運作相關的版型檔案，如果沒有才會使用擴充套件預設的版型定義。透過這個特性，你可以將 J2Store 的子佈景主題資料夾複製至當前佈景主題的元件版型定義路徑之下，之後 J2Store 的運作呈現將會以你的修改為準，讓你自訂的子佈景主題不隨版本更新受到影響。
J2Store 在佈景主題的元件版型定義完整路徑是：templates/佈景主題名/html/com_j2store/templates/自訂子佈景主題名，「依標籤顯示商品」的子佈景主題資料夾名最前面需為「tag_」。如果佈景主題沒有為 J2Store 設計專屬的頁面規劃（含子佈景主題），「com_j2store」與「templates」資料夾得自行建立。
▲利用佈景主題覆寫功能，將子佈景主題檔案複製至當前佈景主題資料夾。
▲自訂的子佈景主題項目在選單項目編輯化中顯示。
子佈景主題修改示範
示範一：調整分類列表畫面中，商品名稱與商品圖片的位置：以單一性商品為例。
Step 01：分類列表畫面中定義單一性商品項目的版型檔案為「default_simple.php」，使用編輯器軟體（如：Sublime Text）開啟。
▲「default_simple.php」檔案中修改部分示意。
Step 02：第 12 至第 15 行是商品圖片的顯示，第 17 至第 20 行是顯示商品名稱（標題）。將這兩部分位置對調後存檔。
▲「default_simple.php」檔案修改後內容示意。
Step 03：重新讀取頁面，觀看變更結果。
▲比較修改前後差異。
示範二：將增量銷售商品與跨類銷售商品，放在商品描述旁顯示：以單一性商品為例。
Step 01：單一性商品的明細畫面定義檔案是「view_simple.php」，使用編輯器軟體開啟。第 62 至 70 部分是商品描述的定義，第 73 至 79 是增量商品與跨類商品的顯示定義。
▲「view_simple.php」檔案修改段落示意。
Step 02：比照上面「商品圖片」區塊與「商品標題、售價等」區塊的敘述方式，為「商品描述」與「增量商品與跨類商品」部分加上 div 標籤合併在一起，並利用樣式定義規定「增量商品與跨類商品」部分在左且寬度為 5，「商品描述」部分在右且寬度為 7。
▲以 div 標籤包覆顯示版面，定義顯示寬度。
Step 03：修改後存檔，在前台觀看結果。
▲觀看修改後結果。
J2Store 其他運作畫面修改資源
上述的修改資訊是「依分類／依標籤的商品列表」以及「商品明細」兩個畫面，那麼「購物車」或是「結帳」畫面呢？請利用佈景主題管理畫面的「建立覆蓋」分頁進行。
在佈景主題管理畫面點選當前使用的佈景主題樣式名連結，在接下來的畫面中點選「建立覆蓋」分頁，再點選「com_j2store（J2Store）」項目，就會看到版型定義的相關資料夾項目，點選項目後會複製版型檔案至佈景主題的「html/com_j2store」資料夾。項目名稱對應的畫面參考如下：
- carts：購物車畫面。
- checkout：結帳畫面。
- myprofile：個人檔案（購買明細）畫面。
▲在佈景主題管理畫面點選當前使用的佈景主題的樣式名。
▲在「建立覆蓋」分頁點選要複製的版型項目。
