สร้าง box เพิ่มเองให้กับ sidebar ใน magento
เราสามารถเพื่มข้อมูลของเราเองได้ใน Sidebar ทั้งซ้ายและขวาของ magento ตัวอย่างก็แบบรูปด้านบน ซึ่งผมจะดึงเอา code เก่าของ theme นั้นมาแก้ไขและใส่ข้อมูลของเราเอง จะใส่รูปภาพ ข้อความ หรือ banner ก็ตามสะดวกครับ มาดูวิธีทำกัน
อธิบายกันก่อนว่าผมนั้นไม่ค่อยมีความรู้ xml ซะเท่าไร ผมได้ลองผิดลองถูกจนมันสามารถนำมาใช้งานได้ยังไงก็ลองไปปรับตามที่ตัวเองต้องการนะครับ
1. ให้เราไปที่ app/design/frontend/default/f002/template/catalog/navigation ( f002 คือ theme ที่ผมใช้งาน ) สร้างไฟล์ชื่อ social.phtml
2. เปิดไฟล์ social.phtml ขึ้นมาและนำ code ด้านล่างไปใส่
<div class="box base-mini">
<div class="head"><h4><?php echo $this->__('ชื่อหัวข้อ') ?></h4></div>
<div class="content">
</div>
</div>
3. โดย code ด้านบนนั้นจะเป็นเหมือน template ของ box ส่วนที่แก้ไขได้จะมีในส่วนของ
<?php echo $this->__('Follow US') ?>โดยในส่วนนี้จะเป็นหัวข้อ ผมก็แก้เป็น Follow US และภายใน div content จะเป็นส่วนของการแสดงผลออกมาเราจะใส่ข้อความอะไรไปก็ตามสะดวก แต่ผมจะทำ box ที่โชว์ไอคอน twitter และ facebook ให้ลูกค้าสามารถกดลิงค์ไปได้
<div class="content">
<a href="http://twitter.com/snappytux"> <img src="<?php echo $this->getSkinUrl($this->getImgSrc()) ?>images/media/twitter.png" alt="twitter" /></a>
<a href="http://facebook.com/snappytux"><img src="<?php echo $this->getSkinUrl($this->getImgSrc()) ?>images/media/facebook.png" alt="facebook" /> </a>
</div>
อธิบายก็คือ
< ?php echo $this->getSkinUrl($this->getImgSrc()) ?>
เวลาแสดงผลออกมาจะได้แบบนี้ http://domain.com/skin/frontend/default/f002/ ฉะนั้นแล้วรูปภาพที่เราจะใช้งานก็ควรอัพขึ้นไปที่ skin/frontend/default/f002/images
4. เสร็จแล้วให้ทำการ save โดยไฟล์ social.phtml จะยังอยู่ใน app/design/frontend/default/f002/template/catalog/navigation/
5. เปิดไฟล์ app/design/frontend/default/f002/layout/catalog.xml เพื่อทำการแก้ไขเพื่อ code ด้านล่างลงไป ให้อยู่ในระหว่าง default
<reference name="right"> <block type="catalog/navigation" name="catalog.social" template="catalog/navigation/social.phtml" /> </reference>
ที่ reference name ถ้าอยากให้อยู่ด้านซ้ายก็เปลี่ยนเป็น left จากนั้นทำการบันทึก
6. refresh หน้าแรกของเราใหม่ ถ้าไม่แสดงผลให้ทำการ clear cache magento ครับ
ก็ลองไปปรับแต่งแก้ไขดูนะครับให้เหมาะสมกับเรานี่เป็นแนวทางเฉยๆ
บทความแนะนำ
