การ Override Template JoomShopping

แชร์ ความรู้ในการ พัฒนา Joomla Component Extension Module Plugin

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
Parichat
PHP VIP Members
PHP VIP Members
Posts: 4860
Joined: 08/01/2018 10:03 am

การ Override Template JoomShopping

Postby Parichat » 12/06/2018 2:09 pm

การ Override Template JoomShopping

Joomshopping เป็นส่วนเสริมสำหรับ Joomla (จูมล่า) ที่ใช้สำหรับทำเว็บขายของออนไลน์ที่รองรับกับ Joomla ในทุกเวอร์ชั่นตั้งแต่ 1.5, 1.6, 1.7 และล่าสุดคือ Joomla 3.8 สำหรับ Joomshopping นั้นมีผู้ใช้งาน Joomla ดาวน์โหลดใช้มากกว่า 50,000 ครั้งภายใน 2 ปี ซึ่งสามารถทดลองใช้งานตัว Joomshopping ได้ในหน้าเว็บไซต์ของผู้สร้าง Joomshopping

Override เป็นการนำส่วนเสริมต่างๆของ Joomla หรือของคนอื่นที่เค้าพัฒนาขึ้นมาให้ดาวน์โหลดมาใช้งานโดยผู้ที่พัฒนาก็จะมีการอัพเวอร์ชันอยู่เรื่อยๆจึงทำให้คนที่นำมาพัฒนาต่อหรือคนที่นำมาใช้กับระบบของตัวเองก็ต้องทำการ Override เพื่อเอาไฟล์นั้นมาแก้ไขให้เป็นของเราเองโดยไฟล์ที่เรา Override มาจะไม่มีผลกระทบอะไรกับการอัพเดทเวอร์ชันของ Joomla หรือของส่วนเสริมที่เราดาวโหลดมา

ขั้นตอนการ Override Template JoomShopping
    1.ติดตั้ง joomla โดยสามารถดาวน์โหลดที่นี่
    2.ติดตั้ง joomshopping โดยสามารถดาวน์โหลดที่นี่
    3.จากนั้นเข้าไปใน Joomla ฝั่งผู้ดูแลระบบ แล้วไปที่ Components > JoomShopping > Configuration แล้วไปที่ General > Template เพื่อดูว่าตัว JoomShopping ใช้เทมเพลตตัวไหนอยู่โดยในที่ใช้เทมเพลตชื่อ default
    b2.jpeg
    b2.jpeg (51.75 KiB) Viewed 1763 times


    4.จากนั้นไปที่เครื่องมือ Editor แล้วไปที่ component(ฝั่งหน้าเว็บ) > com_joomshopping > templates จากนั้นก็คัดลอกโฟลเดอร์ templates default มาแล้วเปลี่ยนชื่อตามที่ต้องการได้ ดังรูป
    b1.jpeg
    b1.jpeg (51.82 KiB) Viewed 1763 times


    5.จากนั้นไปที่ โฟลเดอร์ css แล้วคัดลองไฟล์ css มาแล้วแก้ชื่อให้ตรงกับชื่อเทมเพลตที่ได้สร้างไว้
    b3.jpeg
    b3.jpeg (41.8 KiB) Viewed 1763 times


    6.จากนั้นไปที่ joomla ในฝั้งของผู้ดูแลระบบเพื่อไปเปลี่ยนเทมเพลตให้กับตัว Joomshopping โดยไปที่ Component > Joomshopping > Configuration แล้วไปที่ General > Template แล้วเปลี่ยนเป็นเทมเพลตที่ได้ Override มา ดังรูป
    b6.jpeg
    b6.jpeg (53.31 KiB) Viewed 1763 times


    7.ผลลัพธ์ที่ได้ในหน้าเว็บ
    b5.jpeg
    b5.jpeg (23.39 KiB) Viewed 1763 times


    ตัวอย่าง

    จะแก้ไขชื่อของสินค้าโดยจะเปลี่ยนสีและจัดตำแหน่งของชื่อสินค้าให้อยู่กึ่งกลางโดยตอนนี้ชื่อสินค้าเป็นสีดำและอยู่ในตำแหน่งซ้ายมือดังรูปในข้อ 7 โดยมีวิธีการทำดังนี้
    1.ไปที่เครื่องมือ Editor แล้วไปที่ โฟลเดอร์ css แล้วเปิดไฟล์ css ที่เราได้ทำการ Override มา จากนั้นสร้าง class มาเพื่อใส่คำสั่งจัดชื่อของสินค้า ดังโค้ด

    Code: Select all

    .nameproduct{
    //จัดชื่อสินค้าให้อยู่กึ่งกลาง
            text-align: center;
            //กำหนดสีให้ชื่อสินค้าเป็นสีเขียว
            color: #ccff33;
    }

    2.ไปที่ไฟล์ php ในโฟลเดอร์ components > com_jshopping > templates > testjoomla(โฟลเดอร์ที่ Override มา) >list_products > product.php เปิดมาแล้วค้นหาคำว่า "description" หรือกดF12เพื่อดูโค้ดว่าแท็กอะไรคลุมชื่อของสินค้าอยู่ก็ได้ จากนั้นเพิ่ม class css ที่สร้างไว้ ดังโค้ด

    Code: Select all

    <div class="description nameproduct">
                <?php print $product->short_description?>
    </div>


    3.ผลลัพธที่ได้ ดังรูป
    b7.jpeg
    b7.jpeg (22.35 KiB) Viewed 1763 times


เมื่อเรา Override มาแล้วเราก็สามารถแก้ไขได้ตามความต้องการของเราและยังสามารถแก้ไขได้ทุกหน้าไม่ว่าจะเป็นหน้ารวมสินค้า หน้ารายละเอียดสินค้า หน้า order สินค้า และหน้าอื่นๆ

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Joomla
Live Simply, Laugh Often, Love Deeply.....

Return to “Joomla Developing Knowledge”

Who is online

Users browsing this forum: No registered users and 1 guest