วิธีการใช้งาน Layout ใน Opencart

ระบบ Layout ใน Opencart 1.5.x

เป็นระบบใหม่ที่เพิ่มเข้ามาใน Opencart 1.5 ที่ช่วยให้ผู้ใช้สามารถกำหนดการแสดงผลของโมดูลต่างๆ ได้อย่างอิสระ
ตำแหน่งของLayout มี 4 ส่วนดังรูปที่ 1

 

layout opencart

layout opencart

รูปที่ 1 แสดงตำแหน่งของ layout เมื่อเทียบกับเทมเพลท
Column left เป็นตำแหน่งสำหรับแสดงโมดูลให้อยู่ด้านซ้ายของหน้าเว็บ
Content top เป็นตำแหน่งสำหรับแสดงโมดูลให้อยู่ตรงกลางด้านบนของหน้าเว็บ
Content bottom เป็นตำแหน่งสำหรับแสดงโมดูลให้อยู่ตรงกลางด้านล่างของหน้าเว็บ
Column right เป็นตำแหน่งสำหรับแสดงโมดูลให้อยู่ด้านขวาของหน้าเว็บ

ซึ่งตำแหน่งเหล่านี้ เราสามารถกำหนดให้แต่ละโมดูลที่หลังร้านได้เลย ดังรูปที่ 2

 

layout opencart

layout opencart

รูปที่ 2 แสดงการกำหนดตำแหน่งของ Layout ให้แต่ละโมดูล

การเพิ่ม Layout ใหม่ให้กับระบบ Opencart

หากผู้ใช้ทำการติดตั้งโมดูลไปใหม่เช่นโมดูล Forum แล้วอยากจะกำหนดให้แต่ละกระทู้มีรายการสินค้าแนะนำแสดงอยู่ด้านล่าง เราต้องทำการเพิ่ม layout ให้กับระบบก่อน โดยไปที่เมนู ระบบ—-การแสดงผล—-เลย์เอาท์ ดังรูปที่ 3

layout management

layout management

 

 

รูปที่ 3 การเข้าไปจัดการระบบเลย์เอาท์
หลังจากนั้นจะพบรายการเลย์เอาทั้งหมดของระบบ ให้กดที่ปุ่ม เพิ่ม เพื่อเพิ่มเลย์เอาท์ใหม่ของเราลงไป
กรอกชื่อของเลย์เอาท์ จากนั้นกดเพิ่มเส้นทางให้กับเลย์เอาท์ ดังรูปที่ 4

layout add/edit

layout add/edit

 

 

รูปที่ 4 แสดงรายละเอียดของเลย์เอาท์
1.ชื่อของเลย์เอาท์
2.ร้านค้าที่เราจะกำหนดเลย์เอาท์ใหม่เข้าไป(ในกรณีที่มีหลายร้าน ก็เลือกให้ถูกต้อง)
3.เส้นทางของเลย์เอาท์ คือ url ที่ปรากฏในช่อง address bar ตัวอย่างเช่น index.php?route=common/home
ที่เน้นสีแดงนั้นแหละคือเส้นทาง สามารถระบบุแบบรวมได้เช่น information หมายถึง ทุกเส้นทางที่อยู่ภายใต้ information ได้แก่ information/contact, information/sitemap, information/information&information_id=xxx
หรือระบุแยกย่อยลงไปได้เช่น  เลย์เอาท์ของสินค้าก็จะเป็น product/product
เลย์เอาท์ของหมวดสินค้าก็จะเป็น product/category
หากมีหลายเส้นทางก็กดเพิ่มได้เรื่อยๆ
จากตัวอย่างจะกำหนดเป็น forum เพราะจะให้แสดงสินค้าแนะนำแสดงด้านล่างของโมดูล  Forum
อย่าลืมกดปุ่ม จัดเก็บ เพื่อเก็บข้อมูล
หลังจากนั้นให้เราเข้าไปกำหนด เลย์เอาท์ให้แต่ละโมดูลได้เลย
การกำหนดเลย์เอาท์ให้แต่ละโมดูล
เข้าไปที่เมนู ส่วนเสริม—โมดูล กดแก้ไขโมดูลที่เราต้องการจะเพิ่มเลย์เอาท์ กดที่ปุ่มเพิ่มโมดูล

layout opencart to module

layout opencart to module

รูปที่ 5 แสดงการเลือกเลย์เอาท์ให้กับโมดูล
เลือกเลย์เอาท์ว่าจะให้โมดูลที่เราแก้ไขไปแสดงที่เลย์เอาท์ไหน และก็เลือกตำแหน่งการแสดง(สีเขียว)ว่าจะให้แสดงตำแหน่งไหน และระบุลำดับการจัดเรียง ระบบจะเรียงจากน้อยไปมาก

layout sort

layout sort

รูปที่ 6 แสดงการระบุการจัดเรียงการแสดงผลของเลย์เอาท์

Downloadเป็นไฟล์ PDF ได้ครับ

จบวิธีการใช้งานระบบ Layout ใน Opencart

Leave a Reply

iameveme