Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Magento
Code

Magento主題開發:產品頁面,第1部分

by
Length:LongLanguages:
This post is part of a series called Magento Theme Development.
Magento Theme Development: Category Page, Part 2
Magento Theme Development: Product Page, Part 2

Chinese (Traditional) (中文(繁體)) translation by Wei Zhang (you can also view the original English article)

現在我們已經完成了主頁和類別頁面,在本教程中,我們將開始編輯電子商務網站的第三個最重要的頁面:產品頁面。 讓我們首先打開產品頁面,看看它現在的樣子以及我們希望它看起來如何。

HTML設計中的產品頁面如下所示:

HTML design of product page

我們當前的產品頁面如下所示:

Product Page before editing

要開始編輯它,我們將執行與目前為止數十次相同的步驟,即啟用模板提示以確定哪些模板文件負責呈現此頁面。

Enabling template hints

我們可以看到,該頁面是十幾個文件的彙編,但幸運的是我們不必編輯所有這些文件。 我們只需編輯其中的三個或四個文件,其餘的我們只需修改樣式,使它們看起來像我們的設計,而不會弄亂phtml文件。

如果仔細觀察,產品部分的整體結構來自\ template \ catalog \ product \ view.phtml文件。 我已經通過上圖中的箭頭指出了這一點。 此文件提供所有組件的外部結構,然後內部部件來自其他模板,但我們將首先編輯此外部模板。

我們將此view.phtml文件複製到我們的新主題中,然後開始編輯它。 此文件的當前代碼如下所示:

現在我們必須查看我們的HTML代碼,然後我們將所有HTML代碼放入此view.phtml文件中,然後開始編輯它。 我們的HTML設計文件中details.html文件的當前代碼是這樣的(我只複製產品部分的代碼,不包括頁眉,頁腳部分等):

我知道這是很多代碼,可能會嚇跑你。 但不要擔心,因為當你開始在其中放置動態標籤時,你會看到,代碼將開始快速融化,我們不必擔心大部分內容。

現在我們將通過從實際的view.phtml文件中插入動態標記來開始編輯此HTML代碼。

首先,我們將在頂部添加這些行,以進行一些初始化:

然後關閉文件末尾的product-view div(第314行):

接下來,我們將產品詳細信息div包裝在表單元素中,就像在實際的view.phtml文件中一樣。 所以我們將在第10行的product-details div中添加這些行:

同樣,我們現在將關閉此form,並在第77行從view.phtml複製此JavaScript:

在下一步中,在tab-box div中(從第129行開始),刪除所有現有代碼,並從view.phtml複製以下選項卡代碼(用這幾行代替大約100行代碼)。 為了確保選項卡JavaScript保持正常工作,我們將添加當前類選項卡tab-box div,因此新代碼將如下所示:

完成所有這些後,現在我們將在刪除現有代碼後在hot-products div中插入<?php echo $this->getChildHtml('related_products')?>標記,以便在第166行看起來像這樣:

看看如何用這三行代替大約150行代碼? 讓我們保存所有內容,看看頁面到目前為止是如何出現的。 如果你做的一切都正確,它應該是這樣的:

Product page after editing viewphtml

它可能看起來很混亂,但相信我,我們越來越接近我們希望頁面看起來像。 在下一篇文章中,我們將編輯負責呈現圖像部分,相關產品等的文件,我們最後會做一些樣式修復,我們的產品頁面就準備好了。

最後,讓我重申一下,上面顯示的大塊代碼可能會讓你感到恐懼,但是一旦你開始用適當的動態標籤替換代碼,你很快就會意識到編輯這些代碼並不是很有用。

在下一篇文章中,我們將通過編輯其他phtml文件來完成本頁的其餘部分。

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.