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 7 – Part 1 – Customize the Shopping Cart View

Difficulty Level -

Listed Under Lesson Subjects - ,

Applies to -

Good evening everybody and welcome to this 7th and final week of our How to Build an Online Store using Shopp and Thesis. We are going to wrap up our conversation about customizing the various views in Shopp and then we are going to talk about testing our Shopp transactions. Once we get the transactions tested and working properly, we’ll talk about managing order fulfillment and customer information.

Review Current Cart View

What we’re going to work on first is our shopping cart view so let’s add this to the cart. Now you can see a couple of odd things, right?

First off, this button looks really funny and part of that, this has to do with that Thesis universal issue so we’re going to fix that. I think we’d like to have our update subtotal button reflect the same button style as the rest of our buttons. So we’re going to come in here and work on that for a moment first.

The shopping cart template is the same as any of the other templates in Shopp that we’ve seen. For the cart template right here, we don’t actually have to do anything to this unless maybe we want to add a hint about putting in a zip code in that box. I think that’s probably, this might not be as self-explanatory as possible. So we could add a little explanatory note below that to enter a zip code above. If we were going to do that, we would do that here in this cart template. Otherwise, the changes that I want to make, we are going to make to the Shopp CSS.

This is Shopp’s estimated shipping so we could place right below this cart shipping estimates. Directly below that, we could put a little note in there to include the zip code. In fact, let’s enter zip code. This is just a continuation of how easy it is to edit and modify these Shopp templates. Upload that one and refresh and it should give us our zip code there. So we’ve got a little hint.

Then what we’re going to do is we’re going to fix this button here and we’ll move on to the next bit of customization that we need to do. This is a special kind of button. In fact, it’s a special kind of input called button and if you open up the source and just take a look at what it says, this is a button type = submit. It gets most of its styling from this default setting of button and it doesn’t really have a lot of styling over here, really. What we’re going to do is give it a little bit of padding so that it’s just a little bit larger and to make sure that its width doesn’t get set oddly.

Add Padding Using Shop CSS and Thesis Universal Fixes

We’re going to do that in our Shopp CSS and use one of these Thesis universal fixes. Instead of input as button, we may as well add padding. I like that button to be bigger so if we add 2 pixels of padding, it’ll give us a little bit more room there. If we save that and upload it, come over and look at our site and refresh it, now our button’s gotten a bit larger because of that padding.

What happens if we make that 3 pixels? I think if we make it 4 pixels, it goes funny. No, it doesn’t. That looks okay at 4 pixels. Let’s check it out in Firefox just to make sure it’s not going to fall apart in Firefox. Enter the shopping cart. See, here it looks pretty good with just 2 pixels. I think I’m just going to leave it with 2 pixels.

We could do a couple of extra pixels on top and bottom and just have the 2 pixels on the side. I think if we were to make this 4 pixels in Firefox, at the very least, it would just drop down funny. If we did 4 pixels, it drops off like that. If we do 4 pixels and 2 pixels so that we’re 4 on top and bottom and 2 on sides, that looks okay so let’s just do that. We’ll make that change. So it’s 4 on top and bottom, 2 left and right.

Apply Style to Add to Cart Button

Then the other thing we want to do to customize the shopping cart view is apply this style that we have for our Add to Cart button. We want to apply this style to that button specifically. We have to know what that button is so if we inspect that element, it’s input type = submit, class is update button and I think that’s what we’re going to reference here ourselves.

If you remember, we specified the button styling right down here. We have input type = submit add to cart and now what we’re going to do is input type = submit update button. We’ll just copy that, paste it then we need a comma here. Not a period, a comma. Now we’ve applied the same styling to both add to cart and update.

I think in order to fix this thing, what we want to do is input type = text. If make that other one type = text then we won’t have a conflict between the button and the text. It’s really type = text that we want for this automatic width.

Customizing Hover Button

We’ve got our Add to Cart and I wouldn’t be surprised if our width is wrong for our update button but let’s go ahead and do the same thing to hover here. We need the :hover. Update button, upload that and test it. Actually, that looks just fine. It’s probably a good idea for us to float it to the right. I’m guessing that it’s getting that float left from the button. That’s our float left that’s coming from there so we could do float none or float right for that one.

I think all we have to do is come down here to our buttons, copy that and then float: right. Isn’t that a colon? Yeah, that will jump that over nicely and maybe, we should just make it a little bit wider so let’s make the width 140 pixels. There we go, that looks good.

That’s going to be our change to this which is right here. So input type = submit update button float right width 140 pixels. Now let’s upload that, turn off those funny notifications and refresh it. It looks good there. Let’s look at it in Chrome. Okay, it looks good in Chrome. Let’s see what it looks like in Internet Explorer. I don’t think we’ve actually looked at it in Internet Explorer here in the class which is actually not a good idea. We should be checking this stuff in Internet Explorer all along.

Let’s go to our products and add the product to the Shopping cart. It looks fine. And that concludes our Customize the Shopping Cart View lesson .

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