瞭解 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:個人檔案(購買明細)畫面。
▲在佈景主題管理畫面點選當前使用的佈景主題的樣式名。
▲在「建立覆蓋」分頁點選要複製的版型項目。