Web sitesi rezervasyon formu
Web sitenizdeki rezervasyon formunu kullanmaya başlamak için şirketinize özel teknik numarasını (token) bulmanız gerekmektedir. Bunu yapmak için Şirket sekmesindeki Şirket Profiline gitmeniz gerekir; burada API token satırını bulacaksınız. Bir jetonu kopyalamak için üzerine tıklamanız gerekir; kopyalanacaktır. Numarayı aldıktan sonra sitenizin koduna yalnızca birkaç satır eklemeniz gerekir.
Bu kod <head> etiketleri arasına eklenmelidir.
<link href="https://rentprog-b5205.web.app/css/app.css" rel="stylesheet"/>
Bu kod </body> kapanış etiketinden önce eklenmelidir.
<script src="https://rentprog-b5205.web.app/js/app.js"></script>
Bu, uygulamanın kendi kodudur, ihtiyacınız olan yerde <body> etiketleri arasına eklenmesi gerekir.
<rentprog-widget
token="token"
locale="tr"
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 jetonunuzu eklemeniz gerekir. Şirket profilinin Şirket sekmesinde bulunabilir. Üzerine tıklamanız gerekiyor ve jeton panoya kopyalanacaktır.
locale - biçim dili; İngilizce için en -, Almanca için de -, Fransızca için fr -, Portekizce için pt -, İspanyolca için es -, Hintçe için hi -, Sırpça için sr - eklenmesi gerekir, tr - Türkçe için, th - Tayca için, it - İtalyanca için, id - Endonezce için.
show_all_cars - tüm arabaları göster; varsayılan olarak, ayarlarda belirtilen rezervasyonlar arasındaki aralık dikkate alınarak yalnızca belirtilen tarihler için uygun olanlar gösterilir.
show_email - e-posta giriş alanını gösterip göstermeme. Değer "true" ise alan gösterilecektir; değer "false" ise alan gizlenecektir.
show_phone - telefon giriş alanını gösterip göstermeme. Değer "true" ise alan gösterilecektir; değer "false" ise alan gizlenecektir.
show_middlename - ikinci adın girilip girilmeyeceği alanını gösterir. Değer "true" ise alan gösterilecektir; değer "false" ise alan gizlenecektir.
show_birthday - doğum tarihinin girilip girilmeyeceği alanını gösterir. Değer "true" ise alan gösterilecektir; değer "false" ise alan gizlenecektir.
show_passport - pasaport verilerinin girilip girilmeyeceği alanını gösterir. Değer "true" ise alan gösterilecektir; değer "false" ise alan gizlenecektir.
show_address - adres giriş alanını gösterip göstermeme. Değer "true" ise alan gösterilecektir; değer "false" ise alan gizlenecektir.
show_driver_license - sürücü belgesi verilerinin girilip girilmeyeceği alanını gösterir. Değer "true" ise alan gösterilecektir; değer "false" ise alan gizlenecektir.
rental_object - “Araba seç” satırını girilen değerle değiştiren bir parametre, örneğin “Bir tekne seç”.
hidden_car_year - arabanın üretim yılını gizleyin, eğer “doğru” olarak ayarlanmışsa, yıl gizlenir, eğer “yanlış” olarak ayarlanmışsa veya parametre eksikse, o zaman yıl gösterilecek.
passport_required - pasaport veri alanları, "true" olarak ayarlanırsa alanlar zorunlu hale gelir.
driver_license_required - sürücü belgesi veri alanları, eğer değer "true" ise alanlar zorunlu hale gelir, eğer "false" ise isteğe bağlıdır.
birthday_required - doğum tarihi alanı, eğer "true" ise alanlar zorunlu hale gelir, eğer "false" ise isteğe bağlıdır.
email_required - E-posta alanı, eğer "doğru" ise alanlar zorunlu hale gelir, "yanlış" ise isteğe bağlıdır.
phone_required - telefon giriş alanı, eğer "true" ise alanlar zorunlu hale gelir, eğer "false" ise isteğe bağlıdır.
middlename_required - ikinci ad giriş alanı, eğer "true" ise alanlar zorunlu hale gelir, eğer "false" ise isteğe bağlıdır.
places - Bunlar teslimat/alma fiyatlarını gösteren teslimat ve alım yerleridir. Saha verilerine ihtiyacınız yoksa bu seçeneği kaldırın.
equipment - ek ekipmanların listesi, daily - günlük veya tüm kiralama süresi boyunca ödeme, price - fiyat. Bu alana ihtiyacınız yoksa bu parametreyi kaldırmanız yeterlidir.
chairs - çocuk koltukları, daily - günlük veya tüm kiralama süresi boyunca ödeme, price - fiyat. Saha verilerine ihtiyacınız yoksa bu seçeneği kaldırın.
boosters - Arkalıksız çocuk sandalyeleri (koltuklar), ayarlar aynıdır. Bu alanlara ihtiyacınız yoksa bu parametreyi silin.
agreement - ilk satır sabittir, kişisel verileri topladığımız için, şartlar ve koşullarınıza bir bağlantı eklemek istiyorsanız bu parametreyi doldurmanız gerekmektedir.
Sandalyeler, yükselticiler, ekipmanlar, anlaşma parametreleri gerekli değilse bunları koddan çıkarmanız yeterlidir.
Görsel tasarım
Tailwind v2 kütüphanesi tasarım için kullanılır. Bu konuyla ilgili daha fazla ayrıntıyı burada bulabilirsiniz. Formun yüklenmesini hızlandırmak için tüm sınıflar kullanılmaz, yalnızca formda zaten kullanılanlar ve ayrıca tüm arka plan ve metin rengi sınıfları (bg-... ve text-...) kullanılır. Gerçekten ek bir derse ihtiyacınız varsa, lütfen desteğe yazın, biz de ekleyelim. Değişiklik yapmak istiyorsanız aşağıdaki değişkenleri kullanın. Girintilerden vb. sorumlu olan varsayılan sınıfları bırakmak ve yalnızca arka plan ve metin renginden sorumlu olan sınıfları değiştirmek en iyisidir. Ancak girintilerde vb. değişiklik yapmak da mümkündür ancak bu, farklı cihazlardaki ekranı etkileyebilir, lütfen dikkatli olun. Varsayılan değerleri yukarıdaki örnekte ve web sitenizde oluşturulan formda görebilirsiniz. Aşağıdaki değişkenlerin kullanımı isteğe bağlıdır; doldurulmaması durumunda varsayılan değerler alınacaktır.
button_classes - düğmelerin görsel görüntüsünü kontrol eden css sınıfları.
icon_classes - soldaki simgenin görsel görüntüsünü kontrol eden css sınıfları.
container_classes - kabın görsel görüntüsünü kontrol eden css sınıfları.
form_container - form kabının görsel görüntüsünü kontrol eden css sınıfları.
title_container_classes - başlık kabının görsel görüntüsünü kontrol eden css sınıfları.
title_classes - başlığın görsel görüntüsünü kontrol eden css sınıfları.