แบบฟอร์มการจองเว็บไซต์
หากต้องการเริ่มใช้แบบฟอร์มการจองบนเว็บไซต์ของคุณ คุณต้องค้นหาหมายเลขทางเทคนิคพิเศษของบริษัทของคุณ (โทเค็น) ในการดำเนินการนี้ คุณต้องไปที่โปรไฟล์บริษัทบนแท็บบริษัท จากนั้นคุณจะพบบรรทัดโทเค็น API หากต้องการคัดลอกโทเค็น คุณต้องคลิกที่โทเค็น จากนั้นโทเค็นจะถูกคัดลอก หลังจากได้รับหมายเลขแล้ว คุณจะต้องแทรกเพียงไม่กี่บรรทัดลงในโค้ดของไซต์ของคุณ
ต้องแทรกรหัสนี้ระหว่างแท็ก <head>
<link href="https://rentprog-b5205.web.app/css/app.css" rel="stylesheet"/>
ต้องแทรกโค้ดนี้ก่อนแท็กปิด </body>
<script src="https://rentprog-b5205.web.app/js/app.js"></script>
นี่คือโค้ดของแอปพลิเคชัน ซึ่งจะต้องแทรกระหว่างแท็ก <body> ในตำแหน่งที่คุณต้องการ
<rentprog-widget
token="token"
locale="th"
show_all_cars='true'
hidden_car_year='false'
places='[{"place":"Office","price":0},{"place":"Delivery within the city","price":30},{"place":"Airport","price":80}]'
equipment='[{"item":"Roof rack","price":40, "daily": true},{"item":"GPS Navigator","price":15, "daily": false}]'
middlename_required="false"
agreement='{"text": ", and also accept ", "link_text": "rental terms", "link": "https://rentprog.ru/public/agreement.html"}'
button_classes="text-4xl lg:text-lg h-14 lg:h-10 bg-blue-500 flex justify-center items-center w-full text-white px-4 py-3 mt-2 rounded-md focus:outline-none"
icon_classes="h-14 w-14 bg-yellow-200 rounded-full flex flex-shrink-0 justify-center items-center text-yellow-500 text-2xl font-mono"
form_container="py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg lg:text-base"
container_classes="relative px-2 py-4 lg:px-10 lg:py-10 bg-white lg:mx-8 mx-0 shadow"
title_container_classes="block pl-2 font-semibold text-xl self-start text-gray-700"
title_classes="lg:leading-relaxed sm:text-4xl text-xl"
show_email="false"
show_phone="false"
show_middlename="false"
show_birthday="false"
show_passport="false"
show_driver_license="false"
rental_object="Choose a boat"
>
</rentprog-widget>
token - คุณต้องใส่โทเค็น API ของคุณ สามารถพบได้ในโปรไฟล์บริษัท แท็บบริษัท คุณต้องคลิกที่มันและโทเค็นจะถูกคัดลอกไปยังคลิปบอร์ด
locale - ภาษาในรูปแบบ ต้องใส่ en - สำหรับภาษาอังกฤษ, de - สำหรับภาษาเยอรมัน, fr - สำหรับภาษาฝรั่งเศส, pt - สำหรับโปรตุเกส, es - สำหรับภาษาสเปน, hi - สำหรับภาษาฮินดี, sr - สำหรับเซอร์เบีย tr - สำหรับตุรกี th - สำหรับไทย มัน - สำหรับอิตาลี id - สำหรับอินโดนีเซีย
show_all_cars - แสดงรถทั้งหมด; โดยค่าเริ่มต้น จะแสดงเฉพาะวันที่ว่างที่ระบุเท่านั้น โดยคำนึงถึงช่วงเวลาระหว่างการจองที่ระบุในการตั้งค่า
show_email - แสดงช่องป้อนข้อมูลอีเมลหรือไม่ หากค่าเป็น "จริง" ฟิลด์นี้จะแสดงขึ้นมา หากค่าเป็น "false" ฟิลด์นั้นจะถูกซ่อน
show_phone - แสดงช่องป้อนข้อมูลของโทรศัพท์หรือไม่ หากค่าเป็น "จริง" ฟิลด์นี้จะแสดงขึ้นมา หากค่าเป็น "false" ฟิลด์นั้นจะถูกซ่อน
show_middlename - แสดงฟิลด์สำหรับการป้อนชื่อกลางหรือไม่ หากค่าเป็น "จริง" ฟิลด์นี้จะแสดงขึ้นมา หากค่าเป็น "false" ฟิลด์นั้นจะถูกซ่อน
show_birthday - แสดงช่องให้กรอกวันเกิดหรือไม่ หากค่าเป็น "จริง" ฟิลด์นี้จะแสดงขึ้นมา หากค่าเป็น "false" ฟิลด์นั้นจะถูกซ่อน
show_passport - แสดงช่องกรอกข้อมูลหนังสือเดินทางหรือไม่ หากค่าเป็น "จริง" ฟิลด์นี้จะแสดงขึ้นมา หากค่าเป็น "false" ฟิลด์นั้นจะถูกซ่อน
show_address - แสดงช่องป้อนที่อยู่หรือไม่ หากค่าเป็น "จริง" ฟิลด์นี้จะแสดงขึ้นมา หากค่าเป็น "false" ฟิลด์นั้นจะถูกซ่อน
show_driver_license - แสดงช่องกรอกข้อมูลใบขับขี่หรือไม่ หากค่าเป็น "จริง" ฟิลด์นี้จะแสดงขึ้นมา หากค่าเป็น "false" ฟิลด์นั้นจะถูกซ่อน
rental_object - พารามิเตอร์ที่แทนที่บรรทัด "เลือกรถยนต์" ด้วยค่าที่ป้อน เช่น "เลือกเรือ"
hidden_car_year - ซ่อนปีที่ผลิตรถยนต์หากตั้งค่าเป็น "จริง" ปีนั้นจะถูกซ่อนหากตั้งค่าเป็น "เท็จ" หรือพารามิเตอร์หายไปจากนั้น ปีจะแสดง
passport_required - ช่องข้อมูลหนังสือเดินทาง หากตั้งค่าเป็น "true" ช่องดังกล่าวจะกลายเป็นช่องบังคับ
driver_license_required - ช่องข้อมูลใบขับขี่ หากค่าเป็น "true" ช่องต่างๆ จะกลายเป็นช่องบังคับ หากเป็น "false" ก็จะเป็นทางเลือก
birthday_required - ฟิลด์วันเกิด หากเป็น "จริง" ช่องจะกลายเป็นช่องบังคับ หากเป็น "เท็จ" ก็เป็นทางเลือก
email_required - ฟิลด์อีเมล หากเป็น "จริง" ช่องจะกลายเป็นฟิลด์บังคับ หากเป็น "เท็จ" ฟิลด์เหล่านั้นจะเป็นทางเลือก
phone_required - ช่องป้อนข้อมูลโทรศัพท์ หากเป็น "true" ช่องดังกล่าวจะกลายเป็นช่องบังคับ หาก "false" แสดงว่าเป็นทางเลือก
middlename_required - ช่องป้อนชื่อกลาง หากเป็น "จริง" ช่องจะกลายเป็นช่องบังคับ หากเป็น "เท็จ" ก็จะเป็นทางเลือก
places - นี่คือสถานที่จัดส่งและแผนกต้อนรับ ซึ่งระบุราคาสำหรับการจัดส่ง/แผนกต้อนรับ หากคุณไม่ต้องการข้อมูลฟิลด์ ให้ลบตัวเลือกนี้
equipment - รายการอุปกรณ์เพิ่มเติม daily - ชำระรายวันหรือตลอดระยะเวลาเช่า price - ราคา หากคุณไม่ต้องการฟิลด์นี้ เพียงลบพารามิเตอร์นี้ออก
chairs - ที่นั่งเด็ก รายวัน - ชำระรายวัน หรือ ตลอดระยะเวลาการเช่า ราคา - ราคา หากคุณไม่ต้องการข้อมูลฟิลด์ ให้ลบตัวเลือกนี้
boosters - เก้าอี้เด็กที่ไม่มีพนักพิง (ที่นั่ง) การตั้งค่าจะเหมือนกัน หากคุณไม่ต้องการฟิลด์เหล่านี้ ให้ลบพารามิเตอร์นี้
agreement - บรรทัดแรกได้รับการแก้ไขแล้ว เนื่องจากเรารวบรวมข้อมูลส่วนบุคคล หากคุณต้องการเพิ่มลิงก์ไปยังข้อกำหนดและเงื่อนไขของคุณ คุณจะต้องกรอกพารามิเตอร์นี้
หากไม่จำเป็นต้องใช้เก้าอี้ บูสเตอร์ อุปกรณ์ พารามิเตอร์ข้อตกลง เพียงลบออกจากโค้ด
การออกแบบภาพ
ไลบรารี Tailwind v2 ใช้สำหรับการออกแบบ รายละเอียดเพิ่มเติมที่นี่ เพื่อเร่งความเร็วในการโหลดแบบฟอร์ม จึงไม่ได้ใช้ทุกคลาส เฉพาะคลาสที่ใช้แล้วในแบบฟอร์มเท่านั้น รวมถึงคลาสสีพื้นหลังและข้อความทั้งหมด (bg-... และ text-...) หากคุณต้องการชั้นเรียนเพิ่มเติมจริงๆ โปรดเขียนถึงฝ่ายสนับสนุนแล้วเราจะเพิ่มชั้นเรียนให้ หากคุณต้องการเปลี่ยนแปลง ให้ใช้ตัวแปรด้านล่าง วิธีที่ดีที่สุดคือปล่อยให้คลาสเริ่มต้นที่รับผิดชอบการเยื้อง ฯลฯ และเปลี่ยนเฉพาะคลาสที่รับผิดชอบสีพื้นหลังและข้อความ แต่การเปลี่ยนแปลงการเยื้อง ฯลฯ ก็สามารถทำได้เช่นกัน แต่อาจส่งผลต่อการแสดงผลบนอุปกรณ์ต่าง ๆ โปรดใช้ความระมัดระวัง คุณสามารถดูค่าเริ่มต้นได้ในตัวอย่างด้านบน รวมถึงในรูปแบบที่สร้างขึ้นบนเว็บไซต์ของคุณ การใช้ตัวแปรด้านล่างเป็นทางเลือก หากไม่ได้กรอก ระบบจะใช้ค่าเริ่มต้น
button_classes - คลาส CSS ที่ควบคุมการแสดงภาพของปุ่ม
icon_classes - คลาส CSS ที่ควบคุมการแสดงภาพของไอคอนทางด้านซ้าย
container_classes - คลาส CSS ที่ควบคุมการแสดงภาพของคอนเทนเนอร์
form_container - คลาส CSS ที่ควบคุมการแสดงภาพของคอนเทนเนอร์ฟอร์ม
title_container_classes - คลาส CSS ที่ควบคุมการแสดงภาพของคอนเทนเนอร์ส่วนหัว
title_classes - คลาส CSS ที่ควบคุมการแสดงภาพของส่วนหัว