LazW
-
Posts
6 -
Joined
-
Last visited
Reputation Activity
-
LazW got a reaction from creedon in Using Code Injection to embed Scheduling on Cart Page
Ah, my bad! Thank you again! So much! You're a life saver 🙂
-
LazW reacted to creedon in Cart Page Observe Changes
With the recent changes in the way the cart page loads its content I had to come up with a MutationObserver. I've broken the shell of my code out and added the ability to run callback code. On its own the code only watches.
I thought I'd throw the code up here in case anyone else finds it of use.
Please see Cart Page Observe Changes.
-
LazW reacted to creedon in Using Code Injection to embed Scheduling on Cart Page
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!
-
LazW reacted to creedon in Using Code Injection to embed Scheduling on Cart Page
Is the code installed now? If so I can try to diagnose what the issue might be.
-
LazW reacted to creedon in Using Code Injection to embed Scheduling on Cart Page
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.
-
LazW reacted to creedon in Using Code Injection to embed Scheduling on Cart Page
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.
-
LazW reacted to catebligh in Using Code Injection to embed Scheduling on Cart Page
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.