Using Code Injection to embed Scheduling on Cart Page

Site URL: https://disc-tangerine-2xzy.squarespace.com/

Hi all,

In March I was approached by a potential client who sold cakes via a Squarespace website and wanted to set up a means for customers to schedule to pick up their orders. I did a ton of research and figured out code which embedded a scheduling iframe on the cart page only (huge shout outs to @codeandtonic, @creedon, @paul2009 and others whose answers on various Squarespace Forum helped me work out the code). Everything worked perfectly until 2 days ago when the scheduling iframe suddenly disappeared. I've gone in and I think the reason for it disappearing was Squarespace's 'New Client Scheduling Page' activating, but I've reverted it back to the original and I still can't work out how to get the iframe back.

My final working code was:

<!---jquery--->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!---acuity--->
<script src="https://embed.acuityscheduling.com/js/embed.js" type="text/javascript"></script>

<!---START scheduling WORKING--->
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', init);
window.addEventListener('mercury:load', init);
function init(){
jQuery.noConflict()(function ($) {
window.Squarespace.onInitialize(Y, function(){
  // cart page condition
if(window.location.pathname.startsWith("/cart")){
  // acuity iframe
var acuityIframe = '<div id="spacer-before-acuity"></div><h3 class="cart-title">CHOOSE PICKUP TIME</h3><iframe src="https://app.squarespacescheduling.com/schedule.php?owner=19092763"title="Pick Up Order" width="100%" height=540" frameBorder="0"></iframe>';
  // iframe after cart container
$(acuityIframe).insertAfter(".cart-container"); 
}
window.onload=init;
});
});
}
</script>
<!---END scheduling WORKING--->

I'm quite lost on what to do now. Firefox is currently sometimes showing the iframe, but not reliably, and it took ages to work out the right code without disabling Ajax previously. If anyone has any insight, it would be so appreciated! Thank you!

Password: hello

I would add an "Additional Fields" section with a custom form on the Checkout page with instructions for how to schedule a time to pickup their order (maybe with a checkbox they are required to check to say they read it) and add the scheduling link and info to the Order Confirmation email.

But I do love your idea and think it would be a great feature for Squarespace to add.

12 hours ago, LazW said:

I'm quite lost on what to do now.

A while back SS changed how the cart page loads its content. It is kind of a lazy loading situation.

What is happening is when your code runs the element you are appending to is not on the DOM yet. The only solution for lazy loading is a MutationObserver and they are not easy to write.

Fortunately I have some code that may help. Please see the following.

My code handles the basic checks. You are left with detecting the element you want to manipulate and then changing it. In your case it would be the core of your current code wrapped in a callback function. There are some very basic examples in the code pointed to in the cited post.

var acuityIframe = '<div id="spacer-before-acuity"></div><h3 class="cart-title">CHOOSE PICKUP TIME</h3><iframe src="https://app.squarespacescheduling.com/schedule.php?owner=19092763"title="Pick Up Order" width="100%" height=540" frameBorder="0"></iframe>';
  // iframe after cart container
$(acuityIframe).insertAfter(".cart-container"); 

Let us know how it goes, if you decide to stick with the JavaScript route.

9 hours ago, creedon said:

My code handles the basic checks. You are left with detecting the element you want to manipulate and then changing it. In your case it would be the core of your current code wrapped in a callback function. There are some very basic examples in the code pointed to in the cited post.

Thank you so much for replying so quickly and being so helpful!

Javascript is confusing me, so I was hoping you could clarify what the code in the callback function should be. So I would put the 'cart page observe changes.html' code into the footer and change 'undefined' to 'addacuityIframe' throughout. And above that code in the footer, put the core of my current code into a callback function similar to that in the example callback - I've tried a few variations of this but I can't quite wrap my head around it or get it to work. Is this anywhere close? Sorry to be difficult - I really appreciate the help!

<script>
  const addacuityIframe = ( $node ) => {
    var acuityIframe = '<div id="spacer-before-acuity"></div><h3 class="cart-title">CHOOSE PICKUP TIME</h3><iframe src="https://app.squarespacescheduling.com/schedule.php?owner=19092763" title="Pick Up Order" width="100%" height=540" frameBorder="0"></iframe>';
    $(acuityIframe).insertAfter(".cart-container"); 
    };
  </script>

Quote

Is this anywhere close?

Pretty close. The main thing that was missing was the element you want to watch for as in the second example in the instructions. Try the following. Be sure to update the callback name in the Cart Page Observe Changes code.

<script>

  const addAcuityIframe = ( $node ) => {
  
    // bail if not cart container
    
    if ( ! $node.hasClass ( 'cart-container' ) ) return;
    
    const acuityIframe = `
    
      <div id="spacer-before-acuity">
      
        </div>
        
      <h3 class="cart-title">
      
        CHOOSE PICKUP TIME
        
        </h3>
        
      <iframe src="https://app.squarespacescheduling.com/schedule.php?owner=19092763" title="Pick Up Order" width="100%" height=540" frameBorder="0">
      
        </iframe>
        
      `;
      
    $( '.cart-container' ).after ( acuityIframe );
    
    };
    
  </script>

Let us know how it goes.

9 hours ago, creedon said:

Let us know how it goes.

Thanks for your help! I tried that code and made sure that 'undefined' had been changed to 'addAcuityIframe', but unfortunately the iframe still isn't showing. In code injection I currently have jquery and acuity src in the header and then the new code above the Cart Page Observe Changes code in the footer. Is there anything else that I need to include or do I need to replace any other parts in the Cart Page Observe Changes code? Thanks again 🙂

2 minutes ago, LazW said:

I tried that code and made sure that 'undefined' had been changed to 'addAcuityIframe', but unfortunately the iframe still isn't showing.

Is the code installed now? If so I can try to diagnose what the issue might be.

You have replaced all the undefineds in my code with addAcuityIframe. I missed that you mentioned doing that in your prior post. My apologies. You only need to change the undefined in the following line from my original code as you want to watch for nodes being added.

    const nodesAddedCallback = undefined;

When you see the following line in my code...

    // do not change anything below, there be the borg here

I really mean don't change any lines below that line, unless you know what you are doing!

Ah, my bad! Thank you again! So much! You're a life saver 🙂