ให้เรตสมาชิก: 5 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งาน
 

             ในหน้าเว็บไซต์ต่างๆมักจะมีช่องค้นหา หรือ ช่อง Search เพื่อให้ผู้ที่เข้าชมเว็บไซต์ง่ายต่อการค้นหาสิ่งที่ต้องการ ซึ่งในการนำ Joomshopping Thai Edition มาใช้ในการทำเว็บไซต์ขายของออนไลน์ จะมีโมดูลหรือส่วนเสริม Jshopping Module Search ที่ใช้สำหรับทำช่อง Search บทความนี้จึงเป็นการแนะนำการปรับโมดูล Jshopping Module Search ใน Bootstrap 3 มีขั้นตอนดังนี้

 

1.เข้าไปดาวน์โหลด Module Search ที่ https://www.webdesigner-profi.de/joomla-webdesign/shop/modules/module-search.html?lang=en

ดาวน์โหลด Module Search
ดาวน์โหลด Module Search

 

2.เข้า localhost ในส่วนของผู้ดูแลระบบ คลิกเมนู Extensions เลือก Manage เลือก Install

คลิกเมนู Extensions เลือก Manage เลือก Install
คลิกเมนู Extensions เลือก Manage เลือก Install

 

3. Upload ไฟล์ Zip Module Search ที่ดาวน์โหลดมา 

Upload ไฟล์ Zip Module Search ที่ดาวน์โหลดมา
Upload ไฟล์ Zip Module Search ที่ดาวน์โหลดมา

 

4.ในโปรแกรม Netbeans เปิดไฟล์ index.php แทรกโค้ดด้านล่างนี้ ไว้ในส่วนที่ต้องการแสดงช่องค้นหา

<jdoc:include type="modules" name="search" style="xhtml" /> 

 

5.ในส่วนของผู้ดูแลระบบ คลิกเมนู Extensions เลือก Modules

คลิกเมนู Extensions เลือก Modules
คลิกเมนู Extensions เลือก Modules

 

6.คลิกที่ Jshopping Search

คลิกที่ Jshopping Search
คลิกที่ Jshopping Search

 

7.Show Title คลิกปุ่ม Hide เพื่อซ่อนชื่อของโมดูลในหน้าเว็บ , Position คลิกเลือก search เป็นการเลือกตำแหน่งที่จะแสดงโมดูล , Status เลือก Published จากนั้นคลิก Save & Close

Show Title คลิกปุ่ม Hide เพื่อซ่อนชื่อของโมดูลในหน้าเว็บ , Position คลิกเลือก search เป็นการเลือกตำแหน่งที่จะแสดงโมดูล , Status เลือก Published
Show Title คลิกปุ่ม Hide เพื่อซ่อนชื่อของโมดูลในหน้าเว็บ , Position คลิกเลือก search เป็นการเลือกตำแหน่งที่จะแสดงโมดูล , Status เลือก Published

 

8.เลือกเมนู Extensions เลือก Templates จากนั้นคลิกที่ชื่อเทมเพลตที่ใช้งาน

เลือกเมนู Extensions เลือก Templates จากนั้นคลิกที่ชื่อเทมเพลตที่ใช้งาน
เลือกเมนู Extensions เลือก Templates จากนั้นคลิกที่ชื่อเทมเพลตที่ใช้งาน

 

9.คลิกที่เมนู Create Overrides

คลิกที่เมนู Create Overrides
คลิกที่เมนู Create Overrides

 

10. คลิกที่  mod_jshopping_search

คลิกที่  mod_jshopping_search
คลิกที่ mod_jshopping_search

 

11.ในโปรแกรม Netbeans จะได้โฟลเดอร์ mod_jshopping_currencies ที่ถูกสร้างไว้ในโฟลเดอร์ html ให้เปิดไฟล์ default.php ขึ้นมา จากนั้น

ปรับโค้ดจาก

<input type = "text" class = "inputbox input-small" placeholder="<?php print _JSHOP_SEARCH?>" name = "search" id = "jshop_search" value = "<?php print htmlspecialchars($search)?>" />
<input class = "button btn" type = "submit" value = "<?php print _JSHOP_GO?>" />

แก้ไขเป็น

<div class="input-group">
<input type = "text" class = "form-control " placeholder="<?php print _JSHOP_SEARCH?>" name = "search" id = "jshop_search" value = "<?php print htmlspecialchars($search)?>" />
<span class="input-group-btn">
<input class = "button btn" type = "submit" value = "<?php print _JSHOP_GO?>" />
</span>
</div>
    

 

ตรวจสอบการแสดงผลในหน้าเว็บจะได้ช่อง search สำหรับค้นหา

แสดงผลในหน้าเว็บ
แสดงผลในหน้าเว็บ

 

เนื้อหาเพิ่มเติม 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
อยากทราบวิธีการแก้ไขปัญหาเรื่องการเรียกใช้งานการแจ้งเตือน ใน Extension ของ phpbb
โดย Ittichai_chupol อ 21 เม.ย. 2020 10:25 am บอร์ด Programming - PHP
1
304
อ 21 เม.ย. 2020 10:56 am โดย thatsawan
(Close)B - ล็อกอินเเล้ว เข้าไปเมนู หาคน จะเจอ error
โดย thatsawan จ 20 เม.ย. 2020 2:47 pm บอร์ด Odoojob.com - Tester
2
8
พฤ 21 พฤษภาคม 2020 5:23 pm โดย thatsawan
B - หน้า admin ส่วน Jobs List เพิ่มข้อมูลเเล้ว ตอนบันทึกขึ้น Warning Field required: About Us เเล้วข้อมูลที่กรอกก็หายไป
โดย thatsawan จ 20 เม.ย. 2020 2:38 pm บอร์ด Odoojob.com - Tester
0
2
จ 20 เม.ย. 2020 2:38 pm โดย thatsawan
การจำลองเซิร์ฟเวอร์ เขียน php ใน Windows 10 โดยใช้ IIS (Internet Information Service)
โดย tsukasaz จ 20 เม.ย. 2020 2:38 pm บอร์ด Share Knowledge
0
296
จ 20 เม.ย. 2020 2:38 pm โดย tsukasaz
flask: AttributeError: 'NoneType' object has no attribute 'medlist'
โดย penrudee อ 19 เม.ย. 2020 9:28 am บอร์ด Programming - C/C++ & java & Python
6
155
อ 21 เม.ย. 2020 8:59 am โดย penrudee
ทำไมถึงเกิด AttributeError: 'NonType' object has no attribute 'medlist'
โดย penrudee อ 19 เม.ย. 2020 8:02 am บอร์ด Programming - C/C++ & java & Python
1
344
อ 19 เม.ย. 2020 1:23 pm โดย mindphp
B - เข้าระบบด้วยข้อมูลจากเมลที่ได้ตอนสมัครงาน สามารถจัดการข้อมูลส่วนนายจ้างได้
โดย thatsawan ส 18 เม.ย. 2020 3:21 pm บอร์ด Odoojob.com - Tester
1
5
ศ 08 พฤษภาคม 2020 3:45 pm โดย thatsawan
B - ได้รับอีเมลให้ login คลิกตามลิงค์เเล้วหาที่ เข้าระบบไม่เจอ มันวิ่งกลับมา index
โดย thatsawan ส 18 เม.ย. 2020 3:14 pm บอร์ด Odoojob.com - Tester
1
9
ศ 08 พฤษภาคม 2020 3:44 pm โดย thatsawan
(Close)B - Template มี เมนูเกินมา
โดย thatsawan ส 18 เม.ย. 2020 3:05 pm บอร์ด Odoojob.com - Tester
1
6
ศ 15 พฤษภาคม 2020 6:34 pm โดย thatsawan
ประกันสังคมจ่ายเงินได้ ในกรณีว่างงานเนื่องจากเหตุสุดวิสัยที่เกิดจาก COVID-19 (มีผลใช้บังคับทางกฎหมายแล้ว)
โดย thatsawan ส 18 เม.ย. 2020 11:36 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
92
ส 18 เม.ย. 2020 11:36 am โดย thatsawan
20 อันดับรายชื่อ เศรษฐีไทยร่ำรวยที่สุดในประเทศไทย
โดย thatsawan ศ 17 เม.ย. 2020 8:22 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
190
ศ 17 เม.ย. 2020 8:22 pm โดย thatsawan
B - แทรก css เป็นแบบ internal ไว้
โดย tsukasaz ศ 17 เม.ย. 2020 6:43 pm บอร์ด Odoojob.com - Tester
0
3
ศ 17 เม.ย. 2020 6:43 pm โดย tsukasaz
B - คลิกเมนู คู่มือการใช้งาน แล้ว error
โดย tsukasaz ศ 17 เม.ย. 2020 5:18 pm บอร์ด Odoojob.com - Tester
1
3
ศ 17 เม.ย. 2020 7:53 pm โดย tsukasaz
B - เมนู components หลักหายไปหลายตัว ใน admin
โดย tsukasaz ศ 17 เม.ย. 2020 2:40 pm บอร์ด Odoojob.com - Tester
0
2
ศ 17 เม.ย. 2020 2:40 pm โดย tsukasaz
B - กดเพิ่มเมนูใหม่แล้ว Error
โดย tsukasaz ศ 17 เม.ย. 2020 2:35 pm บอร์ด Odoojob.com - Tester
1
4
ศ 17 เม.ย. 2020 7:53 pm โดย tsukasaz
B - หน้าข้อมูลงาน Jobs List ข้อมูลไม่แสดง
โดย tsukasaz ศ 17 เม.ย. 2020 2:19 pm บอร์ด Odoojob.com - Tester
0
2
ศ 17 เม.ย. 2020 2:19 pm โดย tsukasaz
B - หน้าฟอร์มข้อมูล resume อัพโหลดไฟล์ไม่เข้า
โดย tsukasaz ศ 17 เม.ย. 2020 2:10 pm บอร์ด Odoojob.com - Tester
0
3
ศ 17 เม.ย. 2020 2:10 pm โดย tsukasaz
B - หน้าข้อมูลสมาชิกข้อมูลไม่แสดง และมีแจ้ง Warning
โดย tsukasaz ศ 17 เม.ย. 2020 2:07 pm บอร์ด Odoojob.com - Tester
0
1
ศ 17 เม.ย. 2020 2:07 pm โดย tsukasaz
B - หัวข้อ กับ ชื่อเมนู ไม่ตรงกัน
โดย tsukasaz ศ 17 เม.ย. 2020 2:05 pm บอร์ด Odoojob.com - Tester
0
2
ศ 17 เม.ย. 2020 2:05 pm โดย tsukasaz
AI x THERMAL CAMERA คัดกรองผู้ป่วยด้วยการตรวจจับอุณหภูมิบนใบหน้า
โดย LEG ศ 17 เม.ย. 2020 1:28 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
1119
ศ 17 เม.ย. 2020 1:28 pm โดย LEG