Index

Creating Own Listing Designs

Overview

GarageSale allows you to create your own listing design templates or to customize the built-in design templates. You need to be familiar with HTML to do this.

GarageSale’s design templates are folders whose names end with a “.designTemplate” extension. There have to be at least two files in a .designTemplate folder: Info.plist and body.html.

• The body.html file contains ordinary HTML code with added commands from the “GarageSale Template Language” to include properties (e.g. title, description and images) of the current listing.

• The Info.plist file contains information about the design template itself, such as its name, its version, and a list of images used in the template stored on a remote web server.

Listing design templates can be created using the “Design Utility” or manually. The Design Utility has been updated to work with GarageSale: Download Design Utility.

For beginners the best way is to duplicate one of the existing listing design templates and make modifications to those copied files. If you do so make sure to use a unique “identifier” in the “info.plist” file.

Locating and Storing Design Templates

The easiest way to locate and edit GarageSale’s design templates is using the Design Utility mentioned above. However, you can manually access GarageSale’s built-in design templates by holding down the control key on your keyboard and clicking on the GarageSale application icon. From the popup menu choose “Show Package Contents” and navigate to Contents > Resources > DesignTemplates. Be sure to duplicate the templates before you start modifying them.

To make Garagesale find your modified design templates, you need to save it in the GarageSale database in your User Library. To access the database simply select “Open Library Folder” from GarageSale’s Help menu.

Create a folder called “DesignTemplates” and save your custom design template there. Restart GarageSale afterwards.

Design Template Language

To create your own listing design for GarageSale you need to insert so-called macro language commands from GarageSale’s Design Template Language into your HTML code.

Lets say you want to show your listing title, description and images in your own listing design. With the help of the macro commands you simply tell GarageSale where to insert these elements. Please see this basic example:

<h1>[[item.title]]</h1>
<div>[[listingDescription]]</div>
[[foreach image item.auctionImages imagesMainLoop]]
	<img src="[[image.imageURL]]">
[[endforeach imagesMainLoop]]

GarageSale will distinguish between HTML and macro language commands using double square brackets. That means macro language commands have to be embedded in between [[ and ]] or {{ and }} characters.

Commands from the macro language can be used in a design template’s HTML code and in the Item Description field in GarageSale’s Editor Mode.

Object placeholders

Some of the macro commands are placeholders that are substituted with objects when a design template is applied to an item description. If a placeholder refers to a string object (e.g. [[listingDescription]]) it will be replaced with that string. If it refers to another kind of object you can use a dot operator to access properties of the referred object, e.g [[item.title]].

[[ and ]] will be resolved immediately when you are using GarageSale’s preview editing or when your listing is uploaded to eBay. Therefore they should not be used in your item description if you are editing in GarageSale’s preview mode.

Instead, you should use the {{ and }} characters. Placeholders embedded with these characters will only be resolved temporarily when you hold down the control and option key in preview mode, and when your listing is uploaded to eBay.

Control Statements

The second type of macro language commands are control statements. Use these to different parts of HTML in your item description depending on certain conditions. For example, use if for conditionals or for loops to control the number of images in the listing.

If Statements

An if statement in GarageSale’s macro language has the form:

[[if condition]]
	<code to include>
[[else]]
	<alternate code to include>
[[endif]]

The code between the if and endif commands will only be included in your listing if “condition” is true, or the object it refers to is defined. Here is an example for an if statement that only includes an item’s subtitle if the user provided one:

[[if item.subTitle]]
	<h2> [[item.subTitle]] </h2>
[[endif]]

Foreach Statements

A foreach statement can include additional text in your design template for each item in a list, for example for each image in your listing. A foreach loop has the form

[[foreach item itemList loopIdentifer]]
	<code to include>
[[endforeach loopIdentifier]]

where item is used to reference an item contained in itemList each time the foreach loop is reiterated. The loopIdentifier is used to match foreach and endforeach commands when you nest several loops. Here is an example for a foreach statement that includes a HTML image reference for each listing image:

[[foreach image item.auctionImages imagesMainLoop]]
	<img src="[[image.imageURL]]">
[[endforeach imagesMainLoop]]

If you only want to include such a foreach loop if you’re not using eBay’s picture service, it’s a smart idea to check the current server setting:

[[if preferences.useOwnServer]]
	[[foreach image item.auctionImages imagesMainLoop]]
		<img src="[[image.imageURL]]">
	[[endforeach imagesMainLoop]] 
[[endif]]

Procedure and Call statements

If you need the same lines of HTML code in your design multiple times, you can use the procedure and call commands to reduce the amount of HTML code in your design.

At the beginning of your code, define your html once inside a pair of procedure and endprocedure commands like this:

[[procedure my_procedure]] my custom HTML [[endprocedure]]

Later in your code, you can use the [[call my_procedure]] command to embed whatever code my_procedure contains.

Accessing Single Image URLs

You can use the [[index item.auctionImageURLs i]] statement to directly access certain image URLs. Substitute i with the index of the listing image whose URL you want to include. Please note that the first image has the index 0, the second one has the index 1, and so on. The following code snippet would include the first image directly in your listing design:

<img src="[[index item.auctionImageURLs 0]]">

Testing whether an image index is valid

For some design templates it might be necessary to test whether the listing contains a second image before including certain code parts in the generated HTML file. You can test whether a listing image at a certain index exists using this syntax:

[[if "index item.auctionImageURLs i"]]

where i is the index you are testing for. Please remember that image index counting starts a 0.

The example code below only includes HTML code for the second image if it exists:

[[if "index item.auctionImageURLs 1"]]
	<img src="[[index item.auctionImageURLs 1]]">
[[endif]]

Adding Shipping Information to your listing

If you enabled calculated shipping for your listing, you can include the package information you entered in GarageSale’s shipping options in your listing design.

[[if item.shippingOptions.usesCalculatedShipping]]
	<b>Shipping Dimensions:</b><br>
	Weight: [[item.shippingOptions.packagePounds]] lbs [[item.shippingOptions.packageOunces]]<br>
	Dimension:[[item.shippingOptions.packageWidth]] x [[item.shippingOptions.packageLength]] x [[item.shippingOptions.packageDepth]]
[[endif]]

Design Template Placeholders

The following placeholders can be used inside a design template’s body.html file. The individual properties of a listing can be accessed using these placeholders:

Listing Properties

Image Properties

The individual properties of an image can be accessed using these placeholders:

Preferences Properties

Use the preference object to query GarageSale preferences settings:

Shipping Options Properties

You can use the properties of the Shipping Options to include information about your shipment in your item description.

Examples

Showing all item specifics in your description:

<table>
[[foreach attr item.previewSpecifics attLoop]]
<tr><td>[[attr.name]]</td><td>[[attr.value]]</td></tr>
[[endforeach attLoop]]
</table>

Showing all item specifics including multi-value attributes in your description:

<table>
[[foreach attr item.previewSpecifics attLoop]]
<tr>
<td style="padding-right: 5px"><b>[[attr.name]]:</b></td>
<td>
[[foreach attrValue attr.values valueLoop]][[if attrValueIndex > 0]], [[endif]][[attrValue]][[endforeach valueLoop]]
</td>
</tr>
[[endforeach attLoop]]
</table>

Showing only certain item specifics in your description:

<table>
[[foreach attr item.previewSpecifics attLoop]]
[[if attr.name=="Brand"]]<tr><td>[[attr.name]]</td><td>[[attr.value]]</td></tr>[[endif]]
[[if attr.name=="Color"]]<tr><td>[[attr.name]]</td><td>[[attr.value]]</td></tr>[[endif]]
[[endforeach attLoop]]
</table>

Showing values for specific multi-value attributes in your item description (e.g. multiple author names or multiple features):

[[foreach attr item.previewSpecifics attLoop]]
[[if attr.name=="Author"]]
[[foreach authorName attr.values valueLoop]]
<b>Author: [[authorName]]</b></br>
[[endforeach valueLoop]]
[[endif]]
[[endforeach attLoop]]