Multiple stage checkout with options

Ask the community
,
1

Hi there, have been struggling with this for a few weeks now.

Is it possible to build a multistage checkout with multiple products and product options.

Something similar to this - https://www.wix.com/code-examples/bulk-add-to-cart-vw

I’m not sure if the product options I have included here - https://www.elevatedmediadesign.com/product-page/creation would make this too complicated?

2

Hey Alex :raised_hand_with_fingers_splayed:

I suggest that you use a Multi-State Box to gather the required details, and then add the product to the cart according to the data you gathered through the stages of the multi-state box.

3

Hi Ahmad, thanks for the reply - you have been great :slight_smile:

Think I am fairly close now with this code here - https://www.elevatedmediadesign.com/testpage

The button on stage three links to the cart page as I couldn’t figure out how to display this in the Multi-State Box.

My remaining questions are around the navigation of states. Is it possible for the states to change depending on which item was added to the cart or if the view has just come from the relevant product page?

$w.onReady( function () {
$w( “#Stage1button” ).onClick(() => {
$w( ‘#Stage1box’ ).changeState( “Stage1complete” );
$w( ‘#Stage2box’ ).changeState( “Stage2active” );
$w( ‘#progressBar1’ ).value = 20 ;
} );
});
$w.onReady( function () {
$w( “#Stage2button” ).onClick(() => {
$w( ‘#Stage2box’ ).changeState( “Stage2complete” );
$w( ‘#Stage3box’ ).changeState( “Stage3active” );
$w( ‘#progressBar1’ ).value = 40 ;
} );
});
$w.onReady( function () {
$w( “#Stage2button” ).onClick(() => {
$w( ‘#Stage2box’ ).changeState( “Stage2complete” );
$w( ‘#progressBar1’ ).value = 60 ;
} );
});

Thanks again!

4

Hey Alex :raised_hand_with_fingers_splayed:

You can only use one onReady() function for the page, also, you have an error on your page with one of the onClick() event handlers.

I’ll try to tide your code up.

$w.onReady(function () {

    $w("#Stage1button").onClick((event) => {
        $w('#Stage1box').changeState("Stage1complete");
        $w('#Stage2box').changeState("Stage2active");
        $w('#progressBar1').value = 20;
    })

     $w("#Stage2button").onClick(() => {
         $w('#Stage2box').changeState("Stage2complete");
         $w('#Stage3box').changeState("Stage3active");
         $w('#progressBar1').value = 40;
     })
     
     $w("#Stage2button").onClick(() => {
         $w('#Stage2box').changeState("Stage2complete");
         $w('#progressBar1').value = 60;
     })

})

The onClick() error you get is most likely because you have two similar event handlers, the second and third event handlers.

Hope this helps~!
Ahmad

5

Thanks! Slowly (very slowly) getting the hang of it - I’ve come up with something like this - how does this look to you? The purpose of this would be to change states dependant on what has been added to the cart.

import wixStoresBackend from ‘wix-stores-backend’

export function getCurrentCart () {
return wixStoresBackend . getCurrentCart ();
}

wixData . query ( “promise" )

. contains ( “648b35d2-0770-8f29-8c12-31f6cb06cacf” )
. then (
$w(’ #Stage2box ‘).changeState(“Stage2complete”);
$w(’ #progressBar1 ').value = 60;
} );

6

Hi Alex :raised_hand_with_fingers_splayed:

You can’t change stages from the Backend , if your code is on the Backend , and if it is on the Frontend , the wixStoresBackend module only work on the Backend .

7

Thanks Ahmad, sounds like what I am looking to do may not be possible then? To clarify I am looking to update a boxes state dependant on wether a certain item has been added to the cart

8

No it’s still possible, you just need to call a function on the Backend from the Frontend, then return the result from the Backend.

9

Thanks Ahmad, that is great news! Trying not to be a pain here but is there any chance you would have an example of such a code or a place I could find one?

10

I’m building a Return & Refund Request platform as a multi-stage request, I’ll reply to you once I’m done and give you the website to take a look at the code.

11

Excellent, thank you so much!