FAQ

<p>

FAQ

Tip Trick แปลง Product Grid เป็น Carsousel slide

มีเทคนิคง่าย ๆ ในการแปลง Product gird ไปเป็น Jcarsousel slide มาแนะนำครับ
สำหรับหน้าตาของ Jcarsousel slide ก็คือส่วนของ Carsousel module ที่ติดตั้งมาพร้อมกับ Opencart ที่เราคุ้น ๆ กันดี

สำหรับข้อดีของ carsousel slide คือในกรณีที่เรามีสินค้าเยอะ ๆ แทนที่จะแสดงเป็นตารางลงมาซึ่งเปลืองเนื้อที่หน้าเว็บ ก็ใช้พื้นที่แค่แถวเดียวแล้วใช้ปุ่มเลื่อนซ้ายขวาเอา แถมให้ประสพการณ์ที่ดีกับผู้ใช้ด้วย

สำหรับ Module ที่จะนำมาทดสอบแปลงในที่นี่ก็คือ Featured Product module หรือสินค้าแนะนำครับ โดยจะทำการแปลงจาก Template Brightly ตัวที่แจกหน้าเว็บ

สำหรับไฟล์ที่ต้องแก้ไขจะอยู่ที่ catalog/view/theme/brightly/template/module/featured.tpl

Step 1 ใช้ Text editor (notepad ก็ได้ครับ) เปิดไฟล์ขึ้นมาจะมี script สั้น ๆ ไม่กี่บรรทัดตามรูปครับ

Step 2 ทำการลบบรรทัดที่ทำไฮไลต์สีส้มไว้ตามรูปครับ

Step 3 ทำการแทรก code ตามรูปนะครับ

Step 4 หลังจากนั้นก็ใส่ javasript เพื่อเรียก Jcarsousel ครับ เท่านี้ก็จะได้ product jcarsousel

Step 5 เพิ่มเติมตัวแปรที่ส่งค่าให้กับ Javascript

ส่วนแรก #featured-carsousel ul คือ ชื่อ ID ที่ส่งค่าให้ Java script
ส่วนที่ 2 visible: , ตัวเลข 4 คือจำนวนรายการที่ต้องการให้แสดง 4 รายการ (ตัวเลขนี้สามารถปรับได้ตามความเหมาะสมครับ)
ส่วนที่ 3 scroll: ตัวเลข 2 คือเลื่อนทีล่ะ 2 รายการ (ตัวเลขนี้สามารถปรับได้ตามความเหมาะสมครับ)

สำหรับการปรับแต่ง css จัดหน้าตาและตำแหน่งเข้าไปปรับได้ที่
catalog/view/theme/carousel.css
หากใครโหลด Template brightly ของผมไปจะต้องปรับตำแหน่งปุ่มเลื่อนซ้ายขวาเล็กน้อยครับให้มันอยู่ในกรอบของสินค้า
เปิดไฟล์ carousel.css หา element .jcarousel-skin-opencart .jcarousel-next-horizontal แล้วทำการปรับ rightจาก 15px ไปเป็น 0

.jcarousel-skin-opencart .jcarousel-next-horizontal {
position: absolute;
top: 13px;
right: 0px;
width: 53px;
height: 60px;
cursor: pointer;
background: url('../image/button-next.png') center no-repeat;
}

หา element .jcarousel-skin-opencart .jcarousel-prev-horizontal แล้วปรับ left จาก -10px ไปเป็น 0
.jcarousel-skin-opencart .jcarousel-prev-horizontal {
position: absolute;
top: 13px;
left: 0px; width: 53px;
height: 60px;
cursor: pointer;
background: url('../image/button-previous.png') center no-repeat;
}

ดูตัวอย่างได้ที่ http://www.templateopencart.net/demo/brightly/ เลื่อนลงมาล่างสุด สินค้าแนะนำครับ