Customize the Category View in Shopp
The next thing we’re going to do is something really interesting which is to customize the category view in Shopp. We’re not going to get all the way through this tonight but the category view is the view that shows this. If we go over to archery, this is our category view and you can see it in the grid view or in the list view but it’s very plain.
Tonight, we’re going to rearrange it a bit and we’re going to add some colors and buttons and things like that. We probably have to wrap it up next week but we’ll make some progress on this.
Add Styling and Buttons to the Products
The first thing that I want you to look at is this. This is the design Kim and I have been mucking around about with for Lanny’s Shopp site. I think what we’re going to do is to add a couple of buttons. We’re going to separate these products out rather than just having them sit there in mid-air and give a box shadow around them and add a completely new link to this plus an Add to Cart button because as you may notice, there is no Add to Cart button on it from this direction.
That is in the grid view. We’re just going to add a details button here. A details button just makes it clear that you can click on this and go to someplace else, right?
Custom Styling Using Shopp CSS
We’re going to make a few other changes as we work our way through this design. If we come and look at this, here’s our guide. We’re going to add this, move the heading up above it and then we’ll do some custom styling of this to make it look different. We’re going to add our styling with the Shopp CSS file that’s in our customization section.
Let’s go ahead and start by adding our details button here and we can start with a tour of this category template because it’s really a lot of stuff that’s going on in this. This is like the powerhouse template because it gets called in several different conditions. It essentially controls all of the multi-product views.
Adding a Details Button
It starts off with a question, “Does this category have products”? If the category has products then it keeps on going. If the category doesn’t have products then it asks, “Is it the main catalog page”? If it’s the main catalog page in Shopp then it shows a little bit of breadcrumb and a category, category name and then the message that nothing is found. Otherwise, it’s not possible to have a main page that doesn’t have products in it.
What happens here in Shopp is if it’s not the main page then it gives the category name and says no products are found. You can have products that may show up that don’t have categories but it’s generally assumed that the main landing page is always going to have something on it.
Order by Controls and Pagination Controls
Anyway, it doesn’t have products. If it has products then it starts to display. It starts off with that breadcrumb, it gives a category name and then it gives the little view control which gives you the chance of switching back and forth between the various views. Then it has the control that allows you to choose the way in which you want it sorted. Pardon me, that’s not right. The next thing it does is if the category has subcategories then there’s a drop down list.
You can see that under shooting sports here. First, you have a subcategory, right? That’s what that is. If there’s no subcategory then it doesn’t show up and that’s what that first part is. If it’s a subcategory, then you give this a subcategory and give us the order by control so you can order by the newest or you can order by the most expensive or the cheapest or whatever. It gives you this order by controls and then it gives you the pagination controls.
Grid View Display
Once you get past those sets of controls, it goes into the loop. This loop is exactly like any other WordPress loop. It starts off with a “while” and it says “while this category has products”. It’s not going to ask us this question, “if the category has products” because it’s going to just dive out to the other section. While this category has products, it’s going to decide what to do about the rows.
If it’s a beginning of a row then do close out the UL and the LI, then open up a new LI and open up a new UL. If it’s not then it just ignores it. If you have that grid view and if it’s displaying 2 products then what happens is each row in a list view will also have 2 products. This only triggers on the first product but doesn’t trigger on the 2nd one.
Then it creates the little product groups, we’ve got the product and you’ve got a frame. The first thing it displays is the product image with a link to the product page. Then it’s got this little details box where it gives you the product title with a link to the product page. If there’s a sale associated with it then it gives you the sale price information. If there’s not a sale associate with it, it just gives you the regular price information.
Options in the Add to Cart Button
It’s got this section here that is only visible in the list view and that is the Add to Cart and the product summary. This div that has a class of list view becomes invisible in the grid view. If we come over and take a look at it here in Firefox, for example, here we are in the grid view. If you inspect that element, details, here’s our list view. All this stuff is invisible in the list view but if we switch the list view, now it’s all visible. Interestingly, that Add to Cart didn’t have any options.
Let’s look at an example that does have options and see whether or not it also has an Add to Cart button. It’s got an Add to Cart button and then you have the drop down where you can select what you want. I suppose we could actually just go ahead and put the Add to Cart button to the other view as well.