Jump to content

I need some help the 3rd party booking iframe that we use causes website to load slowly when Ajax is enabled, how can I solve this?

Recommended Posts

Site URL: https://lifelab.world/spaces/#Booking

Hello my dear Squarespace friends!

I am seeking for help and finding a solution for this issue, whenever our ajax loading is enabled the code for the 3rd party booking code is not loading properly, it shows and loads properly only when refreshed.

For the meantime, I have disabled the ajax loading so the booking widget code will work easily as a temporary fix. However in the future, I hope I can enable the ajax loading for the website to run smoothly. 

Also I have already contacted SimplyBookme and was advised that there codes should work properly, I am unsure on where the problem is.

Here is the widget code from SimplyBookme:
<script src="//widget.simplybook.it/v2/widget/widget.js"></script>
<script>var widget = new SimplybookWidget({"widget_type":"iframe","url":"https:\/\/lifelab.simplybook.it","theme":"minimal","theme_settings":{"timeline_show_end_time":"1","timeline_modern_display":"as_slots","hide_company_label":"0","timeline_hide_unavailable":"1","sb_base_color":"#08645d","btn_color_1":"#08645d,#08645d,#08645d","link_color":"#66eeff","display_item_mode":"block","body_bg_color":"#ffffff","dark_font_color":"#08645d","light_font_color":"#ffffff","sb_company_label_color":"#01e3ff","hide_img_mode":"0","sb_busy":"#9bc0bd","sb_available":"#08645d"},"timeline":"modern_week","datepicker":"inline_datepicker","is_rtl":false,"app_config":{"predefined":[]}});</script>

I really hope there is a solution for this. Please let me know if there are more details needed in order to find out how to fix this. 

Thank you in advance! 

Link to comment
1 hour ago, Naomi-lifelab said:

Site URL: https://lifelab.world/spaces/#Booking

Hello my dear Squarespace friends!

I am seeking for help and finding a solution for this issue, whenever our ajax loading is enabled the code for the 3rd party booking code is not loading properly, it shows and loads properly only when refreshed.

For the meantime, I have disabled the ajax loading so the booking widget code will work easily as a temporary fix. However in the future, I hope I can enable the ajax loading for the website to run smoothly. 

Also I have already contacted SimplyBookme and was advised that there codes should work properly, I am unsure on where the problem is.

Here is the widget code from SimplyBookme:
<script src="//widget.simplybook.it/v2/widget/widget.js"></script>
<script>var widget = new SimplybookWidget({"widget_type":"iframe","url":"https:\/\/lifelab.simplybook.it","theme":"minimal","theme_settings":{"timeline_show_end_time":"1","timeline_modern_display":"as_slots","hide_company_label":"0","timeline_hide_unavailable":"1","sb_base_color":"#08645d","btn_color_1":"#08645d,#08645d,#08645d","link_color":"#66eeff","display_item_mode":"block","body_bg_color":"#ffffff","dark_font_color":"#08645d","light_font_color":"#ffffff","sb_company_label_color":"#01e3ff","hide_img_mode":"0","sb_busy":"#9bc0bd","sb_available":"#08645d"},"timeline":"modern_week","datepicker":"inline_datepicker","is_rtl":false,"app_config":{"predefined":[]}});</script>

I really hope there is a solution for this. Please let me know if there are more details needed in order to find out how to fix this. 

Thank you in advance! 

You may need to use Squarespace ajax loader

1. Place this code on footer

<script src="//widget.simplybook.it/v2/widget/widget.js"></script>

2. Place this code where you want the frame to be loaded

<script>
document.addEventListener('DOMContentLoaded', widgetLoad);
window.addEventListener('mercury:load', widgetLoad);

function widgetLoad(){
   var widget = new SimplybookWidget({"widget_type":"iframe","url":"https:\/\/lifelab.simplybook.it","theme":"minimal","theme_settings":{"timeline_show_end_time":"1","timeline_modern_display":"as_slots","hide_company_label":"0","timeline_hide_unavailable":"1","sb_base_color":"#08645d","btn_color_1":"#08645d,#08645d,#08645d","link_color":"#66eeff","display_item_mode":"block","body_bg_color":"#ffffff","dark_font_color":"#08645d","light_font_color":"#ffffff","sb_company_label_color":"#01e3ff","hide_img_mode":"0","sb_busy":"#9bc0bd","sb_available":"#08645d"},"timeline":"modern_week","datepicker":"inline_datepicker","is_rtl":false,"app_config":{"predefined":[]}});
}
</script>

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 11/11/2021 at 11:19 PM, bangank36 said:

You may need to use Squarespace ajax loader

1. Place this code on footer

<script src="//widget.simplybook.it/v2/widget/widget.js"></script>

2. Place this code where you want the frame to be loaded

<script>
document.addEventListener('DOMContentLoaded', widgetLoad);
window.addEventListener('mercury:load', widgetLoad);

function widgetLoad(){
   var widget = new SimplybookWidget({"widget_type":"iframe","url":"https:\/\/lifelab.simplybook.it","theme":"minimal","theme_settings":{"timeline_show_end_time":"1","timeline_modern_display":"as_slots","hide_company_label":"0","timeline_hide_unavailable":"1","sb_base_color":"#08645d","btn_color_1":"#08645d,#08645d,#08645d","link_color":"#66eeff","display_item_mode":"block","body_bg_color":"#ffffff","dark_font_color":"#08645d","light_font_color":"#ffffff","sb_company_label_color":"#01e3ff","hide_img_mode":"0","sb_busy":"#9bc0bd","sb_available":"#08645d"},"timeline":"modern_week","datepicker":"inline_datepicker","is_rtl":false,"app_config":{"predefined":[]}});
}
</script>

 

Hello bangak36,

Thank you so much for you response. 🙏 I am so happy that someone responded immediately.

I have recorded my actions in trying the script that you have given me. Please see the video attached

0-2:07 - I have placed the scripts as per your instructions and enabled the Ajax loading, and refreshed the website, however when I refreshed the website the same issue still happens you can see that on (1:46 mark) the booking block has no content, and whenever I reload it only has the booking page not the page where in the booking block is placed (2:00 mark)

2:21-4:05 - I disabled Ajax again, and applied the orignal widget code from the booking site. Plus I removed the script on the footer, and everything went back to normal, the booking blog where the iframe was, was loading properly again. All links going to the booking block (iframe located) are all working. 

I am a bit confused in what is going on. 😞 Did I do something wrong? 😞 Please let me know. I truly appreciate your kindness in helping me on this.  

Sorry for the low quality of the video the max upload size is only 48.83mb.

Thank you again!
 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.