Fauxlaroids.com

ProStores Tutorial 8:
Frequently Used & Other Handy Code

ATTENTION: ProStore is closing on February 1st 2015. The proprietary SSML code will be obsolete at that time, but this tutorial included some handy HTML code examples as well.


Design Images: Displays an image uploaded to the Store Version images directory (Support > File Management "/images/store_versionX/"):

<ss:image source="$storeVersion.images['imagefilename.jpg']" />

---

URL Image Link: Displays an image hosted on another website:

<img src="http://media.typetees.com/product/636x636/2167-store.jpg">

Click HERE to view the image at its original location.

---

Left Align CSS: Aligns images to left with the Page Builder:

.img-align, .image-container td{text-align:left !important;}

Place this code within the style tags, <style> </style>, in the Header template.

---

SSML Link to Template: Creates a link to a User Defined Template:

<ss:link source="$storeVersion.templates['Links_CLB']">Links</ss:link>

Links_CLB is the name of the template (case sensitive) and Links is the link text.

---

SSML Link to a Specific Category: Creates a link to a specified category:

<ss:link source="$catalog.categories['CategoryName']"/>

~ or ~

<ss:link source="$catalog.categories['CategoryName']">Category Name</ss:link>

EXAMPLE: <ss:link source="$catalog.categories['Cups + Mugs']"/> renders as Cups + Mugs

---

SSML Link to Product: Creates a link to a specific product using the Product Number:

<ss:link source="$store.products[####]"/>

~ or ~

<ss:link source="$store.products[####]">AnchorText</ss:link>

EXAMPLE: <ss:link source="$store.products[126]"/> renders as Golden Mug

---

---

SSML to display Product Images: Displays the image of a specific product using the Product Number:

<ss:image source="$store.products[####].thumbnailImage" alt="xxx" border="0"/>

~ or ~

<ss:image source="$store.products[####].photoImage" alt="xxx" border="0"/>

EXAMPLE: <ss:image source="$store.products[126].thumbnailImage" alt="Golden Mug Image" border="0"/> renders as

---

Link with Image: Creates an Image/Button link:

SSML Example:

<ss:link source="$storeVersion.homePage">
<ss:image source="$storeVersion.images['Enter.gif']" alt="Home" border="0"/>
</ss:link>

HTML Example:

<a href="http://www.fauxlaroids.com/servlet/StoreFront">
<img src="http://www.fauxlaroids.com/images/Running_Hybrid_Blue/Enter.gif">
</a>

The image file Enter.gif would need to be uploaded at Support > Upload Images > Store Design Images.

---

Link to an external Web Page opening in a new window (or tab):

<a href="http://media.typetees.com/product/636x636/2167-store.jpg" target="_blank">HERE</a>

Click HERE to view.

---

Link to download an informational PDF File:

<a href="http://www.fauxlaroids.com/Garlic_Bruschetta_Recipe.pdf">DOWNLOAD</a>

The file, Garlic_Bruschetta_Recipe.pdf, would be uploaded to the store's root directory at Support > Upload Files.

Click HERE to see this code in use.

---

---

Email Link: Code to display email as a link:

SSML: <ss:link source="$store.email"/> which renders as: Info@Fauxlaroids.com<ss:link source="info@fauxlaroids.com">Information</ss:link> which renders as: Information
SSML (with Image): <ss:link source="$store.email"><ss:image source="$storeVersion.images['email_icon.jpg']" border="0" align="top"/></ss:link>
which renders as:
HTML: <a href="mailto:your_email_address">E-mail Me!</a> which renders as: E-mail Me!

HTML (with Image): <a href="mailto:glenn@fauxlaroids.com"><ss:image source="$storeVersion.images['email_icon.jpg']" border="0"/></a>
which renders as:

---

Manufacturers Logo: Code which displays the Manufacturers logo and links to a Search Results page of that Manufacturers products (must enter the filename of the manufacturer's logo image at Product > Manufacturers > List. The image needs to be uploaded to your store images directory):

<ss:link source="$store.oems[$product.oem.name]" title="$product.oem.name"><ss:image source="$product.oem.logo" alt="$product.oem.name" border="0" /></ss:link>

---

Store Logo: Displays your store logo

<ss:image source="$storeVersion.storeLogo" border="0"/>

---

---

Customer Phone & Email: Displays the customer's Phone & Email when added to the Invoice Template (Store Design > Page Template Manager > Invoice -- the grey text below is the already in the template):

BILL TO:<br />
<ss:value source="$invoice.customer.firstName"/> <ss:value source="$invoice.customer.lastName"/><br />
<ss:value source="$invoice.billToStreet"/><br />
<ss:if test="$invoice.billToStreet2">
<ss:value source="$invoice.billToStreet2"/><br />
</ss:if>
<ss:value source="$invoice.billToCity"/> <ss:value source="$invoice.billToState"/> <ss:value source="$invoice.billToPostalCode"/> <ss:value source="$invoice.billToCountry"/><br />
Phone: <ss:value source="$invoice.billToPhone"/><br />
Email: <ss:value source="$invoice.customer.email"/><br />

SHIP TO:<br />
<ss:value source="$invoice.recipient"/><br />
<ss:value source="$invoice.shipToStreet"/><br />
<ss:if test="$invoice.shipToStreet2">
<ss:value source="$invoice.shipToStreet2"/><br />
</ss:if>
<ss:value source="$invoice.shipToCity"/> <ss:value source="$invoice.shipToState"/> <ss:value source="$invoice.shipToPostalCode"/> <ss:value source="$invoice.shipToCountry"/><br />
Phone: <ss:value source="$invoice.shipToPhone"/><br />

---

This code displays the item condition on the Product Detail page as designated in Product Information > Basic Information > Condition: (New/Used). It can be added to the Product Detail template below the SKU code and will display on the Specifications tab along with the Manufacturer, SKU, ISBN, etc. (Code in grey below is the existing SKU & ISBN code)

<tr><td>SKU:</td>
<td width="100%">
<b><ss:if test="$product.sku">
<ss:value source="$product.sku"/>
<ss:else/>
N/A
</ss:if></b>
</td></tr>
<tr><td colspan="2">
<ss:if test="$product.condition == ProductConditionType.USED">
Condition: <b>Used</b>
<ss:else/>
Condition: <b>New</b>
</ss:if>
</td></tr>
<ss:if test="$product.Isbn">
<tr><td>ISBN:</td>
<td><b><ss:value source="$product.Isbn"/></b></td></tr></ss:if>

---

Sale Items: Calls up a search results page with sale items (see the SALE image in the left column on this page):

<ss:link source="$templateSet.cataloglist"><ss:param name="category" value="sale"/>SALE</ss:link>

Sample Link: SALE