Streaming live at 10am (PST)

Multistep order form with Snipcart

Hi!

I’m trying to figure out how I can create a multistep order form using the Snipcart API.

Step 1:
Here the user answers a competition question

Step 2:
Here the user should be able to select a charity to donate too

Step 3:
Here the user selects how many tickets to buy

Just looking for general guidance, how I can approach this.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

I’m thinking that maybe I can create 3 sections and then using interactions to hide / slide in the preivous / next section´triggered by button clicks? That solves the “form” part, but the custom attributes are linked to a product selection in the API. So how can I separate this part in 3 steps?

To link the information in your form to the order, you have 2 options:

The first option is to use the order custom fields. Order custom fields – Snipcart Documentation

The second option is to use the javascript SDK to add cart metadata. JavaScript SDK API – Snipcart Documentation

The major difference between the order custom fields and the metadata is that metadata is hidden from the customer. This means it will not appear on the invoice nor the cart.

1 Like

HI Olle,

Here how you can do it:

<script>
const button = document.querySelector('#Your add to cart button')
const selectCompetition= document.querySelector('#your competition question select field')
quantity.addEventListener('change', () => {
  // Sets the value for charity 
  button.setAttribute("data-item-custom1-value", selectCompetition.value)
})
const selectCharity = document.querySelector('#your charity to donate select field')
select.addEventListener('change', () => {
  // Sets the value for charity 
  button.setAttribute("data-item-custom2-value", selectCharity .value)
})
</script>

You can also use ```
data-item-custom1-type="hidden"

if you do not want to display these fields in the cart. or 
`data-item-custom1-type="readonly"`

You can find this at end of this page: [https://docs.snipcart.com/v3/setup/products](https://Products-snipcart)

If you need any further help I am here to help you.

Thanks,
Dilshad

Thank you very much Muhammad!