I use the Booking.com Official Search Box Search on several websites in German. The first impression is O.K., but when I open the calendar it is completely in English. The issue is only on websites with WordPress language “German (Formal)”. On all websites with normal “German” is the translation correctly. But I need on my websites “German (Formal)”. Please could you configure it so, that “German (Formal)” works with German language file too.

Thanks a lot!

Hi, with this plugin is it possible to synchronize the booking calendar of my booking.com account?
How should I do?
Thanks

Hello, I have some technical problems with the map widget and banner creation.

So I have created some map widgets with Internet Explorer, but they are not displayed on my site (www.verum-verba.de) neither in firefox, nor google chrome or safari browser. Also I can’t create a new map widget or banner in any of these three browsers in the Partner Centre. No error message comes up, but no result either and the loading indicator just loads and loads with no result….

What can I do so that users of all browsers get the map widget displayed???

Goeiedag!

Ik ben een reis magazine aan het bouwen, en wil samen werken met booking.com

Ik moet een ‘meta box’ toevoegen aan een ‘custom post type’, maar als ik de ‘slug’ toevoegt komt er alsnog geen meta box in de edit pagina.

Kunnen jullie hiermee helpen?

Met vriendelijke groet,

Plugin is incompatible with static caching: when an old generated HTML is loaded calendar jumps to next year.

Hi,
as in the subject I would like to use in a multi language site using WPML. Is it possibleI cant figrure out how to translae the custom text set in the plugin options. See https://prntscr.com/36m5OOHBTS9k
Isi it possible? Any suggestion?
Thanks
Simone

Hello,

I would like to post some examples here for all those who want to adapt the pop-up calendar of the “bookingcom-official-searchbox v2.3.x” a little more to their website layout. Of course, these examples relate to the layout of our website.

Here are the colors I used for the “bookingcom-official-searchbox v2.3.x”, which you can choose according to your own wishes in the plugin settings.

See https://i.imgur.com/MyO9Ovz.jpg

See https://i.imgur.com/1VafLc9.jpg

As you can see, the color #385c94 is the main color for elements (boxes, widgets, etc.) on our website. The main background color is #ffffff (white).

I created the following CSS tweaks for the pop-up calendar of the “bookingcom-official-searchbox v2.3.x”:

/* bookingcom-official-searchbox v2.3.x - Calendar CSS tweaks */
#flexi_searchbox #b_calendarPopup .b_popupInner {
  /* No 'border-radius' because the search box doesn't use a 'border-radius' either. */
  border-radius: 0;
}
#flexi_searchbox .bos_month_wrapper select, #b_calendarPopup a, .b_calFuture a, .b_calClose a {
  /* Custom font color for month, date numbers, future date numbers and the calender close link */
  color: #385c94 !important;
  /* Specially for Google Chrome Browser */
  opacity: inherit;
}
#b_calendarPopup .bos-calendar__dates .bos-calendar__date--b_calSelected a {
  /* Font color 'White' for the selected date */
  color: #FFFFFF !important;
}
.bos_calendar_day-name, .bos-calendar__dates .bos-calendar__date--b_calSelected a, .b_calClose a {
  /* Bold font for all day names, the selected date and the calendar close link */
  font-weight: bold;
}

/* bookingcom-official-searchbox v2.3.x - Calendar CSS tweaks */
@media screen and (min-width: 769px) {
  /* Larger font size for all displays from 769px on */
  #flexi_searchbox #b_calendarPopup .b_popupInner {font-size: 15px;}
}

Here is a very special color tweak for SVG graphics:
In the upper area of ??the pop-up calendar of the “bookingcom-official-searchbox v2.3.x” one or two SVG graphics ‘<‘ and ‘>’ are displayed at the top of the month selection. The display of both SVG graphics depends on whether you switch one (or more) months ahead.

The color of these two SVG graphics can also be adjusted according to your wishes. For this, however, a JavaScript file of the plugin must be edited. I would only recommend this to users who know what they are doing!

1. Make a copy of the JS file “/wp-content/plugins/bookingcom-official-searchbox/assets/bos_date.js” and name the copy for example “bos_date_ORIGINAL.js”.
2. Open the JS file “/wp-content/plugins/bookingcom-official-searchbox/assets/bos_date.js” with an editor and look for the tag “<path d=”. There are 2 lines that contain the tag “<path d=”. In the current version v2.3.0 the entries can be found in line 127 and line 165. Of course, the line numbers can change in future plugin versions.
3. Change “<path d=” to “<path fill=”#385c94″ d=”
   With the additional “fill” attribute you can determine the desired color of the SVG graphics.

   The two changed path tags should then look like this:
   <path fill="#385c94" d="M14.55 18a.74.74 0 0 1-.53-.22l-5-5A1.08 1.08 0 0 1 8.7 12a1.1 1.1 0 0 1 .3-.78l5-5a.75.75 0 0 1 1.06 0 .74.74 0 0 1 0 1.06L10.36 12l4.72 4.72a.74.74 0 0 1 0 1.06.73.73 0 0 1-.53.22zm-4.47-5.72zm0-.57z"></path>
<path fill="#385c94" d="M9.45 6a.74.74 0 0 1 .53.22l5 5a1.08 1.08 0 0 1 .32.78 1.1 1.1 0 0 1-.32.78l-5 5a.75.75 0 0 1-1.06 0 .74.74 0 0 1 0-1.06L13.64 12 8.92 7.28a.74.74 0 0 1 0-1.06.73.73 0 0 1 .53-.22zm4.47 5.72zm0 .57z"></path>

4. Save the modified JS file “bos_date.js” on the server.
5. If you use a caching plugin or, for example, the “Autoptimize” plugin, empty the corresponding caches.

ATTENTION:
Please remember that you have to make these changes (steps 1 to 5) AFTER EACH UPDATE OF THE PLUGIN “bookingcom-official-searchbox” because all plugin files are overwritten with a plugin update!

I hope that maybe I can help someone with this post.

Hi,

so, here is my description of some errors in the calendar popup and some optimization suggestions.

A newly selected date is displayed in the wrong language
I am currently using the “bookingcom-official-searchbox” on a German-language website. The initial display is okay. See https://i.imgur.com/gUgmVnS.jpg

But when I select a new date for “Check-In-Date” in the pop-up calendar, the new date values are displayed in English format and NOT in German format. See https://i.imgur.com/QDWcuD2.jpg

Selecting a new date causes a “Deprecation warning” in the browser console

Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged. Please refer to https://momentjs.com/guides/#/warnings/js-date/ for more info.
Arguments: 
[0] _isAMomentObject: true, _isUTC: false, _useUTC: false, _l: undefined, _i: 2022-2-10, _f: undefined, _strict: undefined, _locale: [object Object]
t/<@https://my.xyz.com/portal/wp-content/plugins/bookingcom-official-searchbox/assets/js/moment-with-locales.min.js?x10279:1:3274
ba/<@https://my.xyz.com/portal/wp-content/plugins/bookingcom-official-searchbox/assets/js/moment-with-locales.min.js?x10279:1:21836
ba@https://my.xyz.com/portal/wp-content/plugins/bookingcom-official-searchbox/assets/js/moment-with-locales.min.js?x10279:1:21887
Sa@https://my.xyz.com/portal/wp-content/plugins/bookingcom-official-searchbox/assets/js/moment-with-locales.min.js?x10279:1:22453
Ha@https://my.xyz.com/portal/wp-content/plugins/bookingcom-official-searchbox/assets/js/moment-with-locales.min.js?x10279:1:22535
M@https://my.xyz.com/portal/wp-content/plugins/bookingcom-official-searchbox/assets/js/moment-with-locales.min.js?x10279:1:209
pickDate@https://my.xyz.com/portal/wp-content/plugins/bookingcom-official-searchbox/assets/js/bos_date.js?x10279:307:29
@javascript:pickDate(2022,02,10,'b_checkin','b_frm');:1:9

The pop-up calendar needs some CSS tweaking
1.) The pop-up calendar needs a z-index for the CSS id “b_calendarPopup” to ensure that the element covers all other elements that may be located under the “bookingcom-official-searchbox”. CSS example: #b_calendarPopup {z-index: 100;}

2.) When the pop-up calendar is displayed, some items (in my case) are not displayed correctly. See for https://i.imgur.com/XJRziHA.jpg

Here are some custom CSS changes I had to make <u>in my case</u>:
a) The text color for the days of the week is white (#FFFFFF) in my case. So of course you can’t see the days of the week on a white background. This is probably reflecting the text color selected for the “search-box”. I changed the font color for the days of the week to “#385c94” and set the “font-weight” to “bold”.

b) I changed the background color of the “Selected-Day Container” to “#385c94”.

c) I changed the font color of the date number in the “Selected-Day Container” to “#FFFFFF” and I set the “font-weight” to “bold”.

I fixed the display errors with some custom CSS, but I think it would make sense to offer the user some additional CSS settings for the pop-up calendar as well.

/* Booking.com - Calendar - CSS Tweaking - 04.02.2022 */
#b_calendarPopup {
  z-index: 100;
}
.b_calendarInner, .bos_calendar_month, .bos_calendar__row, #flexi_searchbox .bos_month_wrapper select, .b_calFuture a, .b_calClose a {
  color: #385c94 !important;
  opacity: inherit; /* For Google Chrome */
}
.bos_calendar_day-name, .b_calClose a, .bos-calendar__dates .bos-calendar__date--b_calSelected a {
  font-weight: bold;
}
.bos-calendar__dates .bos-calendar__date--b_calSelected {
  background-color: #385c94
}
.bos-calendar__dates .bos-calendar__date--b_calSelected a  {
  color: #ffffff !important;
}

See the result: https://i.imgur.com/XyaQRMh.jpg

Finally, I would like to point out that the selection of a small font in the pop-up calendar is more suitable for mobile devices. For desktops, the small font is not so good.

#flexi_searchbox {
   font: small/1.2 Arial,Helvetica,sans-serif;
     font-weight: normal;
     font-size: small;
     line height: 1.2;
     font-family: Arial, Helvetica, sans-serif;

I would suggest that the small font in the CSS file “bos_searchbox.css” is better offloaded into a media query for mobile devices and a normal font size is used for desktop computers.

I haven’t added this change to my custom CSS code yet!

Sorry – I know these are a lot of suggested changes/requests. But I think that even users who have no knowledge of CSS should be able to influence the display of the pop-up calendar in an uncomplicated way with additional CSS settings.

Best regards

Hi,

I’m using your pluging version 2.2.8. with an AVADA Theme v7.6.1. I have some CSS problems regarding the plugin colors for background, text, etc..

When I use for background color: #385c94 and for text color: #ffffff
the text in the “Check-In” and “Check-Out” fields is displayed in WHITE, but the field background is also WHITE. Therefor you can’t see the date values!

On the other hand, when I use for background color: #385c94 and for text color also: #385c94 the text in the “Check-In” and “Check-Out” field is readable displayed, but then the headline is not readable, because it has the same color as the background.

I was able to solve the problem with some custom CSS code, but of course that’s not optimal.

#flexi_searchbox h2 {font-size: 1.8em !important;}
#b_searchCheckInDate, #b_searchCheckOutDate {color: #385c94;}
#checkInDate_h4, #checkOutDate_h4 {color: #385c94 !important;}

It would be practical if you could also define the following CSS values in the plugin settings:
– the size of the headline
– the color of the headline
– the background color of all form fields (incl. checkbox)
– define the text color of all form fields (incl. checkbox)

Hello,

the plugin version 2.2.8 automatically includes the script ‘/wp-content/plugins/bookingcom-official-searchbox/assets/js/bos_main.js‘ for all pages. For all pages in which the “Booking.com Official Search Box” is NOT integrated, the browser console displays the following Javascript error, because the Javascript code does not check for the existence of the search box.

Uncaught TypeError: sb_width is null
    <anonymous> https://www.xyz.com/portal/wp-content/plugins/bookingcom-official-searchbox/assets/js/bos_main.js:10
    <anonymous> https://www.xyz.com/portal/wp-content/plugins/bookingcom-official-searchbox/assets/js/bos_main.js:99

Sorry, I’m not a JavaScript expert – but if you put the following JS code between lines 9 and 10, for example, the error will be avoided.

if (sb_width == null) {
  // abort this function
  return;
}

I think that in general the javascript code of the plugin should check whether the DOM elements addressed in the code even exist on the page to be on the safe side.

I have test the update to 2.2.4, and the date is write only in English, but when click not view the calendar but only the “Na N, Na N”
please fix thanks

• This topic was modified 2 years, 10 months ago by folletti.

Hello,

do you plan a “Booking.com Official Search Box” compatibility update for WordPress 5.5.x ???

Hello, we are about to publish the a travel website that will have a special section of hotels, we want to add the Booking affiliate system, however we want all the information and booking engine to be deployment within our website and not sending the user out of our site, at some point we visit a page that had this system, however we do not remember the address of the website.

We want to know how we can make this possible.

thank you very much

• This topic was modified 4 years, 3 months ago by Steven Stern (sterndata). Reason: fixed links

Hello,
I am using the Map Widget from Booking.com on my website. It works very well and look perfect on the desktop version, however on the mobile version more than half of the widget is cut and not showing. I’ve tried to use shortcode via the booking.com plugin or I copy/paste their code in the custom HTML on my blog page.

Here is an example (see toward the bottom of the page); https://www.afuncouple.com/santabarbara

When generating the code from Booking.com affiliate page I made sure to choose the responsive option. However it still doesn’t seem to work…

Any idea how I could fix this?

Here is the HTLM code for reference:

<!– Anything inside will go away once widget is loaded. –>
Booking.com

<script type=”text/javascript”>
(function(d, sc, u) {
var s = d.createElement(sc), p = d.getElementsByTagName(sc)[0];
s.type = ‘text/javascript’;
s.async = true;
s.src = u + ‘?v=’ + (+new Date());
p.parentNode.insertBefore(s,p);
})(document, ‘script’, ‘//aff.bstatic.com/static/affiliate_base/js/flexiproduct.js’);
</script>

Thanks in advance,
Guillaume

Hello
on the page https://www.lefassardy.com/rooms/le-fassardy/ I installed a first Search Box with destination LE FASSARDY

I would now like to install a 2nd Search Box with the destination “FASSARDY lodging” on the page https://www.lefassardy.com/rooms/les-cordeliers/ but I do not understand how to do it.

thank you for your reply

If I type in the input a destination with more than two words, it sends it to Booking.com with strange numbers. For example, “New Zeland” is sent as “New 20Zeland”. It makes the search completely useless.

In the WordPress admin panel, I select dates for the next year (01/25/2020 – 02/02/2020) but on the website, it’s showing the same dates but the current year (01/25/2019 – 02/02/2019). And I see that I only can select month for the current year. No matter that now it’s October 2019, I can select January 2019 for example but I can’t select January 2020… It’s missing as an option in the select box.

Fixed

• This topic was modified 5 years, 6 months ago by alexshvd. Reason: Resolved

Is it possible to create or adjust the searchbox for example 970px width and 250px height, a 1 line search box instead of the rectangular search box ?

Same as on booking.com website ?

Thank you.

Hi!

When will the search box have the auto correct function?
Like when I start to write Bang… I will get suggestions for the destination.

Thanks
Charlotte

Could you do lihgt?

I install booking.com search box in my site yallabook.ae

but I can not see my AID when Iam doing booking. so commission will not be there.

any advise to how to add AID to that search book

hi

i customized my search box and trying to include in the page by going to the widget add the page in visibility but its not visible

i want it middle area between text and pictures , its showing only sidebar but in general i can’t see it anywhere in that page

please help out

The Search box seems to be picking up the styling for the theme (theme in this case is Enfold). With the result that the search boxes and calendars dont behave as they do when designing the box in settings.

Is there a way to override the styles on a widget? I have reached out to the theme developer but they are saying it is a plugin related issue.

I am doing all I can to search for a widget or plugin that allow me to book for one specific hotel.

To be honest, I have no idea why someone would want to place a search box at their website. I do not want people to search for any other hotel. I want them to book at THIS hotel ??

We could od course set up a complete booking engine. But as we are already listed on booking.com, why not just embed it in our site?

Is there something like that out there? I have run out of ways to search for this…

I am missing the “searchresults.html” file that is supposed to show the search results for the plugin, can anyone help me with this?

When I do a search I get:

“Page Not Found
The page you are looking for doesn’t seem to exist.”

Thanks

Eddy

• This topic was modified 6 years, 4 months ago by ouviste.

Hi I have setup the plugin, created a cname and added the widget into the page, but when I search I get a “Page Not Found – The page you are looking for doesn’t seem to exist.” on the search results.

Any idea why?

Thank you.

Eddy

• This topic was modified 6 years, 4 months ago by ouviste.

How can I change the date on the search box to a date that I want?

I’m organising an event in October and I would like to have those dates in the search box.

Thanks
José

Hello,

I would like to create the cname for my domain and I would like to know where can I find the instructions on where to point an the config details for the cname creation.

Also, would it be possible to determine the language we want the result to be presented? because besides my brower being setted to have PT-BR and PT as first laguagens (and then EN-US en EN), the results are coming in engligh.

Regards,

Josef Prado

Hi, I’d like to write “Valle Allegra” into the search destination box but the first time i put a name, it remains for ever. I deleted cache (browser and WP) but it still remains with the wrong words.
Could you please help me?
Thanks in advance