2022-08-18 10:55:57 - 米境通跨境電商
在開(kāi)始本教程前,需要指出theme主題指主題theme目錄(catalog/view/theme/mytheme)下的主題,模板指后綴為.tpl的文件。
第一步建立最基本的主題模板
在目錄catalog/view/theme/下創(chuàng)建新目錄mytheme,則此時(shí)目錄結(jié)構(gòu)如下:
catalog/view/theme/
|->default
|->mytheme
現(xiàn)在到后臺(tái)進(jìn)行操作:Admin->System->Setting->EditStore->TabStore->template->mytheme.
此時(shí)刷新你的網(wǎng)站前臺(tái)頁(yè)面,或許你的網(wǎng)站有些混亂,但此時(shí)你的新主題模板已經(jīng)開(kāi)始工作了!(如果你對(duì)本帖感興趣,歡迎轉(zhuǎn)載,但請(qǐng)注明出處來(lái)自于OpenCart中國(guó)網(wǎng)站)
第二步.基本主題模板
建立目錄并從默認(rèn)主題default中復(fù)制一些文件,但不要復(fù)制所有的文件。按照如下目錄結(jié)構(gòu)進(jìn)行操作:
catalog/view/theme/
|->[color=#BF0040]default[/color]
|->[color=#BF0040]mytheme[/color]
|->image/*.*-拷貝所有的圖片
|->stylesheet/*.*-拷貝所有的css樣式文件
|->template
|->common
|->header.tpl
注意:
需要復(fù)制所有的圖片,因?yàn)閟tylesheet.css文件需要使用這些圖片。
需要復(fù)制IE的樣式文件,因?yàn)閔eader.tpl中包含了它(如果你不在header.tpl中包含它,那就去掉它)
需要復(fù)制slideshow.css因?yàn)樵趏pencart的模塊中用到它。
星級(jí)圖片被硬編碼進(jìn)了相關(guān)頁(yè)面:category,manufacturer_info,product,review,search,special;模塊:bestseller,featured,latest,special。因此包含這些圖片與否,取決于你是否需要這些頁(yè)面,模塊,或者你可以使用新的圖片來(lái)替換它們。
現(xiàn)在使用文本編輯器打開(kāi)header.tpl;
搜索并替換"default"為"mytheme"。
刷新你的網(wǎng)站前臺(tái)頁(yè)面,你會(huì)發(fā)現(xiàn)一切如默認(rèn)模板一樣顯示了。
如果想要不同的視覺(jué)效果,例如改變顏色等,此時(shí)你可以修改文件mytheme/stylesheet/stylesheet.css
第三步定制模板(1):理解控制器
在第二步中,我們已經(jīng)定制了header.tpl這個(gè)模板文件。請(qǐng)記住不要修改默認(rèn)default模板,將你需要的文件復(fù)制到你的目錄下mytheme下即可。看如下例子:
catalog/view/theme/
|->default
|->mytheme
|->image
|->stylesheet
|->template
|->common
|->header.tpl
|->footer.tpl|->information
|->information.tpl|->product
|->product.tpl
|->category.tpl
|->manufacturer_list.tpl
你要使用控制器controller來(lái)定制模板,你需要知道opencart使用的是MVC-L框架。
簡(jiǎn)單解釋如下:
當(dāng)你訪(fǎng)問(wèn)url路徑為route=product/category時(shí),opencart調(diào)用的是控制器controller/product/category.php文件。
這個(gè)控制器(如category.php)將決定哪一個(gè)MV-L被加載(Model,View(tpl),Language)。在category控制器(category.php)控制器中將加載:
3個(gè)數(shù)據(jù)模型Model(category,product,image):$this->load->model('...');
2個(gè)視圖View(category.tpl和not_found.tpl):$this->template='...';
1個(gè)語(yǔ)言文件Language:$this->language->load('...')
該控制器也決定什么數(shù)據(jù)傳輸給模板,并且用戶(hù)輸入的數(shù)據(jù)也在這里進(jìn)行預(yù)處理。
$this->$this->data['text_price']=$this->language->get('text_price');將在模板中生成價(jià)格:
當(dāng)你想在網(wǎng)站前臺(tái)改變產(chǎn)品的顯示(如從顯示15個(gè)改為25個(gè))時(shí),控制器將獲得此請(qǐng)求if(isset($this->request->get['limit'])){...}然后處理它$this->data['limits'][]=array(...'value'=>25,...);
請(qǐng)記住,控制器方面沒(méi)有fallback備用模式,也就是說(shuō),你手動(dòng)修改了相關(guān)的控制器,則當(dāng)升級(jí)opencart時(shí),相關(guān)的控制器會(huì)被覆蓋掉。除了手動(dòng)修改外,你可以使用vQmod對(duì)其進(jìn)行“虛擬改變”。在第五步中將介紹這種方法。
第四步.定制模板(2):理解數(shù)據(jù)模型Model
在MVC架構(gòu)中,一個(gè)數(shù)據(jù)模型Model的作用就是針對(duì)數(shù)據(jù)庫(kù)提取或保存數(shù)據(jù)。在控制器controller獲得或?qū)?shù)據(jù)提交給數(shù)據(jù)模型Model時(shí),需要先加載此特定的數(shù)據(jù)模型。
加載數(shù)據(jù)模型Model:$this->load->model('catalog/product');
從數(shù)據(jù)模型獲取數(shù)據(jù):$this->model_catalog_product->getTotalProducts()
提交數(shù)據(jù)給數(shù)據(jù)模型:$this->model_catalog_product->editProduct()
$this->load->model('catalog/product')告訴opencart在網(wǎng)站后臺(tái)admin或網(wǎng)站前臺(tái)catalog中加載該數(shù)據(jù)模型Model(model/catalog/product.php)。getTotalProducts(),editProduct()是數(shù)據(jù)模型model/catalog/product.php中的兩個(gè)函數(shù)。
打開(kāi)文件model/catalog/product.php并找到publicfunctiongetProduct.
問(wèn)題是,如果getProduct()獲取了所有的產(chǎn)品數(shù)據(jù),為何不在前臺(tái)分類(lèi)頁(yè)面全部顯示呢?這是因?yàn)榉诸?lèi)控制器決定了是否顯示所有數(shù)據(jù)。
打開(kāi)文件controller/product/category.php,找到$this->data['products'][]=array就明白了。