Now that we’ve created these Shopp customization files, I’m viewing them here in NetBeans. And these customization files are called templates. Let’s go back to FileZilla and look at the Shopp folder. Each one of these inside of the folder from thanks.php to account.php are all templates. And it’s inside of these templates that we can make customization.
There’s one file that’s not a template and that’s the shopp.css. The shopp.css will take precedence over other CSS. And so this shopp.css file is the one that we’ll be editing.
Review a Template File in Shopp
Let’s take a look at a template file in Shopp and in particular, we’ll look at our product file first. Here’s our product file and this is the template that displays a product. Let’s leave the php file for a moment and go back to our product. This product.php file has the template that displays this product.
One of the main parts of this system are these Shopp template tags. So for example, Shopp, Catalog, Bread crumb – that is a template tag that creates this bread crumb trail that we see here on the product page. The same thing is true with this product gallery. The image gallery that we were looking at just a moment ago is created using this template tag, shop product gallery.
If you’ve done any kind of customization like this at all in WordPress, you’re familiar with template tags. For example, there is the template tag Blog Info. A typical way of referring to something from your WordPress site is to use the template tag Blog Info. I’ll show you here in the php file: say echo blog info (‘description’). And this template tag here will echo out your tagline from your site. So this line tells WordPress to print the tagline. And you might do the same thing say, with URL and now what happens is it will print out the URL to the blog.
This is an example of a template tag and WordPress has thousands of them. Actually, Thesis also has a lot of template tags that it uses that you would recognize as well. This is the primary method of customizing the appearance and customizing the functionality of Shopp.
Anatomy of a Template Tag in Shopp
And so we come back over here to our product and take a look at this template tag. The template tag has 3 parts, First off, it has the Shopp function name. This distinguishes this template tag as belonging directly to Shopp and someplace in the Shopp files is a definition of what the Shopp product gallery is going to do.
Anyway, you start off with Shopp and then you have an object tag which in this case is product. And then you have a property which in this case is gallery. And then you can have options. There aren’t any options being displayed in gallery but there are options being displayed in this one where you’ve got shopp, product, savings.
Here, they want to show the percentage of the savings so they’ve got shopp, product, savings and the option is show = percent. And that’s how you have the saved amount plus the saved percent on a product that’s for sale. We’re going to use this options feature quite a bit tonight.
I mentioned that this is called an object tag. This tag tells Shopp what part of its program to execute. And as design would have it, the Shopp documentation is laid out this way. So let’s go over to the Shopp documentation at shoppdocs.shoppplugin.net/welcome. I’ve got a link to the Shopp documentation here on the site under Week 5 resources.
In the Shopp documentation, you can see that there’s this template API. Well, each one of these, that is catalog, category, product, etc… each of those represents those objects. And so when we were over here look at our product, savings, show %, example in php, the object is product, the property is savings and the option is show = percent.
Let’s look at product tags in the documentation. Scroll down this content section to find the property of savings. If you click on that savings property, you can see a brief description of what it can do and then it’ll show you the options.
And in this case, you really have 2 options. You have the option of taxes which means if you set taxes to true, it’ll include taxes in the calculation. By default it’s set to false. And you have the option of show. The default of show is money which means it’ll show the amount. But you saw the other one where you’ve got show percent and if show = %, it’ll show the percentage.
If we come back over and take a look at this in php, shop, product, savings… this template tag is just showing you the dollar amount that is saved. This template tag is showing the percent. So it’s using the same template tag twice, one with its default options and one with the option that shows the percentage.
Tonight we’re going to spend most of our time tonight in the catalog, category, and product Shopp template tags.