Overview: What's a custom template? | Designer Guidelines
|
Overview: What's a custom template? | Designer Guidelines
|
| - Custom Template Tutorial | |
| Tutorial: Basic Auction Template |
| First things first... |
|
| What are the goals of this tutorial? |
| OK, we're not about to create an award winning auction template design here. The main goal of this tutorial is to simply familiarize you with the way these templates behave and provide a general framework for creating your own designs. You do not have to follow the overall design structure we are using here. Your own creativity is all that limits you. |
| On with the tutorial... |
We are going to layout this auction template in the following order:
Other than the auction's title (#2 above) all information in optional. Therefore, we need to make sure we include conditional statements where necessary. The two main conditional statements we'll use here are the "if" statement and the "foreach" statement. Please refer to your Smarty documentation for details about each. For ease of reading, I am going to first organize the coded content and then go back and apply a style to it using cascading styles. Keep in mind that most auction sites do not allow off-site linking (e.g. linking to an external style sheet) so we will need to ensure all elements of our template are contained within one file (or block of code). Also, because our designs will most likely be included within the middle section of other web pages, we want to (1) ensure that our CSS class names will be unique to any page and (2) ensure we make no use of absolute positioning. 1. Main Image
A seller can store up to 12 images for each auction they create. However, they can assign one of those images as the auction's "main image." The main image is the first image in our block of 12. Let's display it prominently at the top of the auction. We will make it a clickable image with maximum dimensions of 600 x 600 pixels.
<!-- Search for, and display our main image -->
<div class="BbImageMain">
{if $IMAGES.1}
{$IMAGES.1->getThumbWithLink(600, 600)}
{/if}
</div>
2. Auction title
The auction title is the only piece of information that the seller is required to store for any auction. Let's display it directly underneath the main image.
<!-- Auction title is required, let's display it --> 3. All remaining images
This is one of the most highly configurable sections the designer has to work with. Notice how we loop through each image and display a clickable thumbnail that has maximum dimensions of 90 pixels wide by 90 pixels high. We also tell the system that we want 2 pixels of horizontal spacing and 2 pixels of vertical spacing on each thumbnail.
<!-- Loop over and display all other images as clickable thumbnails --> 4. Item Description
To conserve some style sheeting, I have assigned the same style class to the next 4 pieces of our puzzle. Each one uses an "if" conditional to determine whether or not to display the content.
<!-- Description of the item being sold --> 5. Shipping details
<!-- How the item will be shipped --> 6. Payment details
<!-- How the item must be paid for --> 7. Additional Information
<!-- Display any additional information --> 8. Seller's Policies
A seller can define up to 5 individual selling policies. These are simply blocks of text that are accompanied by a heading. Here, I loop over and display each policy and its heading.
<!-- 9. Seller's Business Description
Sellers can store their logo and a description of their business. Some sellers store one or the other or both. That's why we see the OR (||) conditional within the "if" conditional. This means that if either exits, we want to render this section.
<!-- Display info about the seller's business --> 10. Seller's inter-eBay links
These are the grouping of links that allow a seller's potential buyers to learn more about them within the eBay system. At present, the BiggerBids system only renders proper links for US-based eBay sellers.
<!-- Display required inter-eBay links --> 11. Cross-promote seller's eBay store
The seller has the opportunity to create a section of links that are intended to cross-promote their eBay store. They can store their store name, a link to their store, each category within their store and its accompanying link.
<!-- Display cross-promotional eBay Store category links --> 12. Wrap it all up
So now we've created blocks for each section available to our template. Let's wrap two container tags around all of the code we've created to allow us to center this information on the page as well as provide any template-wide style settings.
<!-- Place all content in one container --> 13. Add some style
You'll notice the "literal" tag wrapped around our style section. That is 100% necessary or Smarty will not recognize our styles. We'll place the following code at the top of our template to give this template a nice, cohesive look.
<!-- tell the Smarty engine to render the style as it sees it --> |