Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 5 – Part 5 – Add Customer Inputs to Order

Difficulty Level -

Listed Under Lesson Subjects - ,

Applies to -

The next thing that we’re going to do is to add customer inputs to an order in Shopp. The way that works is on checkout. There are other ways for you to add customer input and in fact, it’s a little confusing. If you do a little bit of research on the site, you see that they’ve got this thing called customer input.

Under product, Shopp has this thing called input and you could actually do it this way. Unfortunately, you can’t do it this way and make it necessary for somebody to actually fill it out. So we’re not going to use the input system, we’re going to use what’s called an order data which is a property of checkout.

We come over here to checkout, scroll down and find order data. I must have scrolled right past it. Is it in the cart? Maybe I’m mistaken. Maybe it’s in the cart. I’m just obviously just walking right past it here. Let’s go back to checkout. Okay, order data right there.

Add Customer Inputs Using Order Data

In Shopp order data creates a field for you to collect customer inputs and you can do this over and over again. You can have a whole bunch of fields, if you wish. You’re free to collect information that you want to collect and you have a variety of properties. You’ll also have options like name and type.

Name is necessary in order for it to keep track of what the order data is. Type is the kind of input field. For example, you could do a text field or a check box or radio or text area. Then you have a bunch of other choices but the name and the type are required choices. We’re going to start off with that.

We’re going to start off with checkout, here we go. I’ve already written the code here but I’ll remove that for a second. It’s the checkout category and it is order data property. The type is going to be a text field and the name is going to be “Enter required pressure.” It’s going to be its name plus it’s going to be its hint as to what you’re supposed to do there. We’ll start off with that.

Fill Out Data in Checkout Category

Go ahead and hit save and look at checkout and upload it. Come back over to the demo site and let’s go to a dress shoe and pick a women’s black small and add it to the cart. Let’s proceed to checkout and here is the place in which you can fill this out. Now, notice you got to know that this is the one that you have to fill out because there’s no information around this. The first thing you really need to do is put a label on it.

This is a standard HTML label and the way that I did that is just right here in front of the p tag, “Enter your required pressure.” Actually, here I’m just going to say pressure now. Enter your required pressure and then what I want to do is to drop down to a new line so we’re going to add a br tag and hit save. We upload this again, come back over to it and refresh it. Now it says, “Enter your required pressure.”

We can do anything that we want around this. We could put this in a div and we could change its color. We could make it stand out and do any of the kinds of things that you assume that you should be able to do in HTML. You can do that in this template. Right now, I put it here in the required pressure, down here at the bottom before submit order or up here at the top. You can just locate this wherever you want it to be located.

Difference between Checkout Value and Customer Input Value

The difference between this checkout value and the customer input value is that the customer input value is associated with a product whereas this value is going to be associated with this transaction. If you needed this information in all 3 places which in this case, you don’t but if you needed it per product, you would use a different value. In this case, we don’t really need it per product. What we need to just be able to do is put this information in, capture, save, and send it in a confirmation email and also keep it for ourselves so we can use it.

The next thing we just want to do is make this required, right? We’re going to do it so it has to be filled out. The way you make it required is by simply saying required = true. There’s the ampersand which is what separates each of these things and then required = true. Save, upload it, and refresh it. Now, if you try to submit your order, you can see that this won’t let you submit the order because this information is required.

You actually have to fill something out so just go ahead and fill this out here so we can get that to go right. Hit submit the order and now the transaction has been processed and there’s that little bit of information under pressure. If we come back over and take a look at the site and look at orders now, shopping orders and look at order number 3, the details, pressure equals this little thing.

Adding Custom Information to an Order

Obviously, this doesn’t validate so this doesn’t provide you with a method of validating the data but it does provide you with a method of capturing it, storing it, and retrieving it. If you really need to validate the data, you’ll have to become a better programmer and use jQuery to do the validation. That’s how you add custom information to an order.

It could be the case that you don’t want this “Enter your required pressure” to be on every order. That’s the case if you only wanted this field to be entered. If that specific product requires it then what you can do is create a condition that says if the cart has items and if this item is in the cart then show this little section. That way, it would only show up in that specific condition. If somebody needs to talk about that, we can do that but I still have a bunch of basic stuff I want to talk about here yet so we’ll keep on going.

The whole point of this exercise is to show you that there’s a lot of power in this system that will allow you to do a lot of customization. In fact, you could even take the next step. Copy it, paste it, and say “Enter your minimum pressure” and then “Enter your maximum”. This is going to be max pressure and this is min pressure so now you’ll have 2 input fields. We come back over here for a second and refresh this. Go to shoes, add to car and proceed to checkout. Now, you have the minimum pressure and the maximum pressure as options to fill out.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment