Last active
July 23, 2025 07:55
-
-
Save Pavracer/af2f4d4420ef2514c576c08ef01d0980 to your computer and use it in GitHub Desktop.
New-widget
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="fitvidsignore"> | |
| <!-- Load external CSS files --> | |
| <link rel="stylesheet" href="https://static.alaric.id/widget2/daterangepicker.min.css"> | |
| <link rel="stylesheet" href="https://static.alaric.id/widget2/style.widget.calendar.css"> | |
| <!-- Inline widget styles --> | |
| <style> | |
| .containerrr { | |
| width: 900px; | |
| margin: auto; | |
| } | |
| .calcal form .box input[type="submit"] { | |
| background: #7D6F4B !important; | |
| border-color: #7D6F4B !important; | |
| } | |
| </style> | |
| <!-- Widget HTML structure --> | |
| <div id="alrc-widget-container"> | |
| <!-- START: embed widget container --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js"></script> | |
| <script src="https://static.alaric.id/widget2/jquery.daterangepicker.js"></script> | |
| <div class="containerrr calcal"> | |
| <!-- Booking form --> | |
| <form action="https://booking.hotelpuriwulandari.com/rates/index" method="post" target="_BLANK"> | |
| <input type="hidden" name="BookingForm[hotel]" value="HPWH"> | |
| <input type="hidden" name="BookingForm[utm_source]" value=""> | |
| <input type="hidden" name="BookingForm[utm_source_session_id]" value=""> | |
| <input type="hidden" name="BookingForm[checkin]" value=""> | |
| <input type="hidden" name="BookingForm[checkout]" value=""> | |
| <input type="hidden" name="BookingForm[adults]" value=""> | |
| <div class="bx1"> | |
| <div class="box alrc_checkin_checkout"> | |
| <p class="mb-8">Checkin - Checkout</p> | |
| <p class="fs-15 cursor-pointer"> | |
| <span class="d-flex"> | |
| <object class="alrc-icon" data="https://static.alaric.id/widget2/calendar-outline.svg" width="20" height="20"></object> | |
| <span class="alrc_checkin_txt">Thu Oct 03 2024</span> - | |
| <span class="alrc_checkout_txt">Thu Oct 03 2024</span> <span class="dropdown"></span> | |
| </span> | |
| </p> | |
| <span class="separated"></span> | |
| </div> | |
| <div class="box"> | |
| <p class="mb-8">Guests</p> | |
| <p class="fs-15 cursor-pointer sh-modal-guest"> | |
| <span class="d-flex"> | |
| <object class="alrc-icon" data="https://static.alaric.id/widget2/people-outline.svg" width="20" height="20"></object> | |
| <span class="alrc_val_adult">2</span> Adults | |
| <span class="dropdown"></span> | |
| </span> | |
| </p> | |
| <span class="separated"></span> | |
| <div class="modal-guest"> | |
| <div class="d-flex mb-8"> | |
| <div class="flex-fill"> | |
| <p class="fs-14"><strong>Adult(s)</strong></p> | |
| <p class="fs-12">Ages 18 or above</p> | |
| </div> | |
| <div class="flex-fill"> | |
| <div class="d-flex spinner"> | |
| <div class="sub_min alrc_min_adult">-</div> | |
| <div class="spinner_val alrc_val_adult">2</div> | |
| <div class="sub_add alrc_add_adult">+</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="child-options"> | |
| <p class="color-grey">Information of your children's age will allow us to help you find the best room types suited to your needs.</p> | |
| <div class="child-options-data"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="box"> | |
| <p class="mb-8">Promo code</p> | |
| <p class="fs-15 cursor-pointer"> | |
| <span class="d-flex"> | |
| <object class="alrc-icon" data="https://static.alaric.id/widget2/pricetags-outline.svg" width="18" height="18"></object> | |
| <input type="text" class="promocode" name="BookingForm[offer_code]" placeholder="Enter promo code" /> | |
| </span> | |
| </p> | |
| <span class="separated"></span> | |
| </div> | |
| <div class="box flex-grow-1"> | |
| <input class="fs-15x" type="submit" value="Check Availability" /> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Widget logic --> | |
| <script> | |
| document.addEventListener("DOMContentLoaded", function () { | |
| var dataPrice = null; | |
| function formatDate(date) { | |
| return date.toISOString().split('T')[0]; | |
| } | |
| function formatDateDmy(date) { | |
| let d = new Date(date); | |
| return [String(d.getDate()).padStart(2, '0'), String(d.getMonth() + 1).padStart(2, '0'), d.getFullYear()].join('-'); | |
| } | |
| function getDateFormat(date) { | |
| const days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']; | |
| const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; | |
| return `${days[date.getDay()]}, ${months[date.getMonth()]} ${String(date.getDate()).padStart(2, '0')} ${date.getFullYear()}`; | |
| } | |
| function getDynamicChild(n) { | |
| return `<div class="item-child item_child_${n}"> | |
| <p>Child ${n}</p> | |
| <select class="form-select"> | |
| <option>Child ${n} age</option> | |
| </select> | |
| </div>`; | |
| } | |
| function getValueRoomPrice(timestamp) { | |
| const ymd = formatDate(new Date(parseInt(timestamp))); | |
| return dataPrice?.[ymd]?.allotment ? dataPrice[ymd].formatted_price : (dataPrice?.[ymd] ? 'sold' : ''); | |
| } | |
| function init() { | |
| let qty_adult = 2; | |
| let qty_child = 0; | |
| const today = new Date(); | |
| const tomorrow = new Date(today.getTime() + 86400000); | |
| $(".alrc_checkin_txt").html(getDateFormat(today)); | |
| $(".alrc_checkout_txt").html(getDateFormat(tomorrow)); | |
| $("input[name='BookingForm[checkin]']").val(formatDateDmy(today)); | |
| $("input[name='BookingForm[checkout]']").val(formatDateDmy(tomorrow)); | |
| $("input[name='BookingForm[adults]']").val(qty_adult); | |
| $.ajax({ | |
| url: 'https://webapi-au.alaric.id/hpw/x/calendar/HPWH', | |
| beforeSend: xhr => xhr.setRequestHeader("Authorization", "Basic " + btoa('calendar:g486dJ2wmW')), | |
| crossDomain: true, | |
| type: 'GET', | |
| success: data => dataPrice = data | |
| }); | |
| $(document).click(e => { | |
| if ($(e.target).parents(".box").length === 0) $('.modal-guest').hide(); | |
| }); | |
| $('.sh-modal-guest').on("click", function (e) { | |
| $('.modal-guest').show(); | |
| e.stopPropagation(); | |
| }); | |
| $('.alrc_add_adult').on("click", function () { | |
| qty_adult++; | |
| $('.alrc_val_adult').html(qty_adult); | |
| $("input[name='BookingForm[adults]']").val(qty_adult); | |
| }); | |
| $('.alrc_min_adult').on("click", function () { | |
| if (qty_adult > 1) { | |
| qty_adult--; | |
| $('.alrc_val_adult').html(qty_adult); | |
| $("input[name='BookingForm[adults]']").val(qty_adult); | |
| } | |
| }); | |
| $('.alrc_add_child').on("click", function () { | |
| qty_child++; | |
| $('.alrc_val_child').html(qty_child); | |
| $('.child-options').show(); | |
| $('.child-options-data').append(getDynamicChild(qty_child)); | |
| }); | |
| $('.alrc_min_child').on("click", function () { | |
| if (qty_child > 0) { | |
| $(".item_child_" + qty_child).remove(); | |
| qty_child--; | |
| $('.alrc_val_child').html(qty_child); | |
| if (qty_child === 0) $('.child-options').hide(); | |
| } | |
| }); | |
| $('.alrc_checkin_checkout').dateRangePicker({ | |
| separator: ' to ', | |
| container: '.calcal', | |
| autoClose: true, | |
| selectForward: true, | |
| startDate: formatDate(new Date()), | |
| customArrowPrevSymbol: '<span class="alrc-arrow-prev"></span>', | |
| customArrowNextSymbol: '<span class="alrc-arrow-next"></span>', | |
| setValue: function (s, s1, s2) { | |
| $('.alrc_checkin_txt').html(getDateFormat(new Date(s1))); | |
| $('.alrc_checkout_txt').html(getDateFormat(new Date(s2))); | |
| $("input[name='BookingForm[checkin]']").val(formatDateDmy(s1)); | |
| $("input[name='BookingForm[checkout]']").val(formatDateDmy(s2)); | |
| }, | |
| hoveringTooltip: days => (days >= 2 ? `${days - 1} night${days > 2 ? 's' : ''}` : '') | |
| }).bind('datepicker-opened', function () { | |
| $(this).closest('.calcal').find("td > div.day").each(function () { | |
| const time = $(this).attr('time'); | |
| if (time) $(this).attr('data-custom', getValueRoomPrice(time)); | |
| }); | |
| }); | |
| } | |
| init(); | |
| }); | |
| </script> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment