Extending checkout functionality

Ask the community
, ,
1

I’m new to Wix and got a task to implement local delivery service on a Wix store.
Can you please give me any advice on how to do the following:

The perfect solution is:
In the checkout, after the selection of the specific shipping option (“local delivery service”):
open modal in which the customer selects his prefered option
upon saving of the selection the delivery service API is called and given user info. It creates an order and returns the tracking number.
The customer gets a confirmation message and tracking number.
The tracking number is send in the order email.

If the customer didn’t select any delivery service option in the modal, do not allow him to finish the checkout process.

This is the ideal solution, I’m not sure how close am I able to get here.
After a bit of googling I am considering using thankyou page to implement something similar to this, however it was correctly noted that some people do not need to get to this page and leave immediately after the payment.

Thank you for any advice how to handle this correctly.

2

Moving this post to Coding with Velo.

3

Hey,
You can do the following:

  1. get user cart-id using getCurrentCart
const cartId = await wixStores.getCurrentCart().then(cart => cart._id);
  1. In cart page -
    (a) On page ready - open a Lightbox with the ability to select your delivery details
    (b) get the lightbox selection and show it on the page (To reflect his data has been saved) - you can also do a query from data-collection if the user already saved his selection but decided to navigate to another page.
wixWindow.openLightbox("LightboxName").then(data => .....)
  1. In your Lightbox -
    (a) User selects his delivery data
    (b) Then, save its selection & cart-id in your data-collection
    Important! currently we can’t prevent users from navigating to the checkout page. Therefore, you prevent user from closing your lightbox without selecting. Alternatively, navigate to the outer page.
  2. In your backfile files -
    (a) add “events.js” file
    (b) in this file a new event handler for catching newOrder / orderPaid
    (c) Get the orderNumber from the event and update your data collection
    (d) If you want to send the details to your 3-rd party service you should do it here.

After you get the tracking number you can update it using the backend method createFulfillment

4

Hi, thank you for the tips!
So I cannot do anything on the frontend of the checkout page? Because there is a selection of shipping and would be best place to show the lightbox (if the customer would select the shipping which requires this additional info)…