CodeWithSteps

← Previous: Part 3 | Shipping Address Next: Part 5 | Process Order →

Part 4 | Checkout Form

Overview:

In this part we want to add a little more logic to our form on the checkout page and prep what data we want to send to the backend and how we want to send it.

Step 1 | Hide Form or Fields

00:53:14

In the last part, we went over some page logic with our form shipping fields. So far we only covered hiding the shipping address fields. But, now we want to take care of hiding the user fields or the form altogether if our user is logged in AND/OR does not need shipping.

Page Logic Explanation

Scenario #1: If user is logged in → Hide Name and Email Fields

Scenario #2: If a user is logged in AND Item does NOT need shipping → Hide form & Open Payment option.

A logged in user does not need to see the email and name field because we already know based on the account they have.

View Source Code

/// File: templates/store/checkout.html

if (user != 'AnonymousUser'){
 	document.getElementById('user-info').innerHTML = ''
 }

if (shipping == 'False' && user != 'AnonymousUser'){
	//Hide entire form if user is logged in and shipping is false
		document.getElementById('form-wrapper').classList.add("hidden");
		//Show payment if logged in user wants to buy an item that does not require shipping
	    document.getElementById('payment-info').classList.remove("hidden");
}

Step 2 | Form Data

00:56:05

Now it's time to prep our data before we send it off to our backend to process this order.

What data are we sending?

When the payment button is submitted we want to send 3 things to the backend for proccesing the order.

1 - Cart Total

2 - User Information (If user is NOT logged in)

3 - Shipping Address (If item in order needs shipping)

Cart total

We can get the cart total by simply querying the order object. Go ahead and set the total next to the "shipping variable".

User & Shipping Data

We want to send "user" and "shipping" as two separate Javascript objects so we can access them separately in the backend.

Inside the submitFormData() function; let's create an object representation of both. For the user; let's add in "total" and pass in the variable we set just above.

Now that we have our objects, we want to set values for these objects attributes on submission before we send it off to the backend. Inside our "submitFormData" function, just underneath where we set the two Javascript objects, let's set the values from the form.

View Source Code

/// File: templates/store/checkout.html

var total = '{{order.get_cart_total|floatformat:2}}'

function submitFormData(){
	console.log('Payment button clicked')

	var userFormData = {
		'name':null,
		'email':null,
		'total':total,
	}

	var shippingInfo = {
		'address':null,
		'city':null,
		'state':null,
		'zipcode':null,
	}

	if (shipping != 'False'){
		shippingInfo.address = form.address.value
    	shippingInfo.city = form.city.value
    	shippingInfo.state = form.state.value
    	shippingInfo.zipcode = form.zipcode.value
	}

	if (user == 'AnonymousUser'){
		userFormData.name = form.name.value
		userFormData.email = form.email.value
	}

	console.log('Shipping Info:', shippingInfo)
	console.log('User Info:', userFormData)
}

← Previous: Part 3 | Shipping Address Next: Part 5 | Process Order →

Unlock Modules

Part 4 | Checkout Form

Step 1 | Hide Form or Fields

Step 2 | Form Data