AShop AShop V Design Guide

AShop V Design Guide

AShop V Design Guide2

Table of Contents

Part I Overview Of AShop

Part II Designguide

................................................................................................................................... 51 Page Templates

.......................................................................................................................................................... 7Design Your Page Templates

.......................................................................................................................................................... 8Placeholder Codes

................................................................................................................................... 92 Modular Storefront

.......................................................................................................................................................... 10Main Storefront Modules

.......................................................................................................................................................... 11Newsletter Module

.......................................................................................................................................................... 12Category List Module

.......................................................................................................................................................... 12Language Selection Module

.......................................................................................................................................................... 13Additional Items

................................................................................................................................... 153 Top Lists

................................................................................................................................... 174 Style Sheets - CSS

................................................................................................................................... 185 Themes

................................................................................................................................... 206 Receipt Templates

................................................................................................................................... 237 Message Templates

................................................................................................................................... 258 Multiple Languages

................................................................................................................................... 269 Buy Buttons or Links

3 3

Index 27

1 Overview Of AShop

AShop is a shopping cart program, which can be used in a variety of different ways to

manage and sell products and services over the Internet.

AShop can be used to sell many different types of products and services:

· Tangible Products

· Downloadable Products

· Services, including billing for custom work

· Access to Password Protected Areas of a Website

· Key/PIN codes

· Auctions and penny auctions

· Wholesale

AShop GPL is open source and free under the terms of the GNU General Public License. AShop V is a commercial software product, which is licensed per domain and adds

functionality such as multi-vendor shopping mall, billing and CRM features. It requires IonCube because a few of the scripts that are used to register and unlock the software are encrypted.

Overview Of AShop 3

We offer a 30 day trial of AShop V to let anyone try the software before they buy it. Get Trial Key and Download Files.

Multi Vendor Shopping Mall

The Shopping Mall features of AShop V lets other businesses and individuals sell their products through your online shopping cart. It includes a system for members to join, manage their products and earn commissions through a central order processing, payment processing, and digital product delivery system. Together with the affiliate tracking features of AShop you can use this to set up a service similar to Clickbank on your own website or you can use it with the auction features to run something like eBay.

When using the shopping mall you should decide if you are going to show the storefront as your frontpage or the mall.php script, which generates a list of all available shops in the mall. Designing for a shopping mall site can also be quite different from designing for a regular shopping cart site. The vendor signup page, the shop list and possibly also the affiliate pages might need a more prominent position in the design.

2 Designguide

This guide focuses on the aspects of designing an AShop shopping cart site. It is meant for shop owners who want to customize the look of their own online shop but also for web designers who wish to design AShop based sites for their clients or even sell commercial layout themes for the software.

You will only find information related to layout and design in this document. To learn more about how to use AShop refer to the online help, which is linked from the AShop admin panel menu.

AShop V Design Guide4

2.1 Page Templates

The AShop page templates are simply HTML pages with the AShop placeholder tags inserted where the AShop content is to appear. They can include HTML, images, links, CSS, and JavaScript just like any other web page but they can not include PHP or any other server side code. You can use a web page editor, for example Adobe Dreamweaver, to design or modify the AShop templates just as you would with any other page for a website.

There are 12 templates used for the retail shopping cart and affiliate pages. If the wholesale shopping cart is activated, it uses an additional 3 templates and if you have the commercial AShop V software you will find 3 additional templates used by the shopping mall. The page templates can have the same or different content, depending on your needs.

Example templates are included in the distribution package for new installations. They give the shopping cart a simple but effective black and white look. This set of templates and other color variations of it can be downloaded from AShopSoftware.com which gives you a good start for creating your own templates.

Retail Shopping Cart & Affiliate Page Templates

The following templates are located in the templates directory of AShop.

Designguide 5

aboutus.html – used by the About Us page affiliate.html – used by the affiliate sign up, login, and support pages cart.html – used by the view cart page and shipping address page catalog.html – the main AShop template which is used to render the catalog and product pages checkout.html – used by the checkout page customer.html – used by the customer profile and order history pages delivery.html – used by the digital goods delivery pages pages.html – used to render custom pages created with the Manage Pages section of the admin panel signup.html – used by the customer signup page terms.html – used by the Terms & Conditions page thankyou.html – used by the payment confirmation page upsell.html – used by the upsell page

IMPORTANT! Some payment gateways will host your payment confirmation page through their SSL

connection. When they do this, they take a snap shot of your page and nest it within their page at their URL. If this is the case, the URLs within the thankyou.html template must use absolute URL's for CSS and Javascript files to work and for images to appear. In addition, image links should be https links so that browser secure/non-secure content warning messages won't appear for customers when the payment processor redirects to the thankyou (payment confirmation) page.

AShop V Design Guide6

Wholesale Shopping Cart & Sign up Page Templates

These templates are used by the wholesale pages.

wscart.html - used by the wholesale basket and checkout pages wssignup.html - used by pages where wholesale customers sign up for an account wsthankyou.html - used to display a thank you message page after a customer completes a wholesale

order

Shopping Mall Page Templates

aboutvendor.html - used to render About Us pages for the member shops mall.html - used by mall.php, the member shop directory membersignup.html - used by pages where members sign up for an account

2.1.1 Design Your Page Templates

Start by designing a page with an empty area that can be used for content such as signup forms, login forms or shopping cart contents list. You can use any web page editor or design tool you like, for example Dreamweaver or Microsoft Expression Web. Here is an example of a page template designed in Dreamweaver:

Designguide 7

Add the two comment tags:  and  to the empty area of the page. All the content generated by AShop will be displayed between those comments. To make it easier to design your page and see how it will look when it is being used, you can put sample content between those comments. This will be discarded by AShop and replaced by its signup forms, shopping cart contents and other content.

AShop V Design Guide8

Note: The templates must use paths relative to the root folder of your AShop, not the templates folder. If

you design your templates while keeping them in the templates folder of a local copy of AShop you may need to remove "../" on image src parameters, link and CSS href parameters and any other code that refers to a local file, before publishing and using the templates. It might be easier to just move the templates up to the top folder of your site and then put them back in the templates folder when you are done designing them.

AShop is designed and tested with the doctype tag set to the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.

org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

It is recommended that you start your templates with that tag since using other doctypes can give unexpected results. The doctype tag should be placed at the top of the html source code of your page.

2.1.2 Placeholder Codes

In addition to the start and end tags you will also need to add some code to make the templates use the AShop CSS file. Without this the layout and design elements of your AShop will not be activated and the shopping cart will be presented as unformatted text. Add the following line to the head tag of your templates to use the dynamic CSS file:

Designguide 9

You can override any of the styles generated by the AShop CSS script to tweak and customize all the design elements in great detail. A copy of all the CSS classes is included in the sample ashop.css file, found in the css folder. Just make sure you put any style tags or custom CSS files below the default AShop CSS tag in your templates and storefront files to make them override the default classes.

There are some other comment codes available that you can use in your page templates:

·  - displays the active Shop Name

·  - displays the page title, see the example above where this is used in the

<TITLE> tag of the page.

·  - displays the URL to the shopping cart

·  - displays the meta keywords for the current page

·  - displays the meta description for the current page

·  - displays the shop's Logo Image

·  - displays a shopping cart box

·  - lists the product categories

·  - a custom header defined by a shopping mall member

2.2 Modular Storefront

The storefront of AShop supports additional placeholder tags to make it possible to customize the layout further. They will let you place the various content modules for the storefront and arrange them any way you like on the page. The template for the storefront is named catalog.html and can be found in the templates directory just like the other page templates.

To design your storefront you use a similar approach to when you design page templates, but rather than preparing just one main area for all AShop generated content, you need to prepare areas for all the different types of content modules you wish to include on your storefront: product categories, product list, search box, shopping cart box, newsletter subscription box... Here is an example designed in Dreamweaver:

+ 18 hidden pages