Chapter 2 - Configuration & Administration

At this point we have assumed that you have selected an appropriate hosting company and have verified that their servers meet the wePrint Design Studio Requirements: PHP5, mySQL, and ImageMagick 6.3.5 or newer.

File Types
Any of the files that require changes should be edited in a simple text editor such as Windows Notepad. Be sure to save the file with the correct extension and not with a txt extension. Do not add any formatting to the document.

XML: Extensible Markup Language - These documents contain information that will be passed in to design tool (such as product information or font information)
PHP: Hypertext Preprocessor These are web pages that contain dynamic code that is loaded before the page is loaded.
CSS: Cascading Style Sheets These pages contain styles that are applied to the designer interface.

2.1 Pre-install Configuration

2.1.0 Install Wizard:

As of version 3.0, wePrint Design Studio no longer has an install wizard. The files can simply be uploaded to your server using an ftp client. The install process is described on the install-help page. The files that need to be configured are shown below.

2.1.1 Database Setup:

Please refer to the DB Setup Guide if you have not already setup your database - DB Setup Guide

2.1.2 Required File Changes:

The wePrint Design Studio setup files are XML documents. XML stands for Extensible Markup Language, which is a standards based document framework.
Tags are used to delineate the various parameters and are human read-able. For example, to define a shirt color in an XML document one may create <shirtColor>Red</shirtColor>. This defines a shirt color which is red. The details of how XML works is not important just that you have a feel for what you are looking for in the document. But don't worry, we are going to tell you what you need to edit.
The files listed below can be edited with any simple text editor (such as Windows Notepad)

__________________________

shop-defaults.xml
Some of the features of the design tool can be changed, activated or deactivated. The file shop-defaults.xml contains a handful of parameters, as listed below:

shopcode: A three digit alpha-numerical code that will be added to the beginning of the ID of each saved design. Default ABC.

shopDomain: This is domain where the tool will be located without the subdomain (i.e. example.com not www.example.com)

zenCart: If you are using this with Zen Cart, change this to "Yes".

csCart: If you are using this with CS Cart, change this to "Yes".

moneySymbol: This defaults to the dollar symbol but should be change to Euro, GBP, etc.

thumbSize: This is the width in pixels of the thumbnail that is shown for a saved design (default is 200)

cartThumb: Currently not in use.
__________________________

wep-tool-config.xml
dynamicPricing: yes or no This allows you to activate/de-activate the dynamic pricing. If this feature is activated you need to be sure that each product xml file contains proper pricing information.

showAddtoCart: yes or no This will activate the Add to Cart button that appears on the saved-design dialog box.

showQuoteSubmission: yes or no This will activate tha Quote button. Which is useful for screen-printers or embroiderers that need to quote based on the artwork supplied.

showPriceSheet: yes or no This will activate the button to launch the pricesheet dialog box.

showOurDesigns: yes of no This will activate a button to launch the gallery that will show your stock designs.

instantQuote: TBD - this is a placeholder for a soon-to-be released feature for matrix pricing. NOT YET IMPLEMENTED.

________________________

convert-location.php:
Change the directory to the correct Imagemagick location for your host. If you are not sure than ask your host the location of the imagemagick executable. It is usually either "usr/bin" or "usr/local/bin". There is a quick imagemagick test file that can be uploaded to site to tell you where the imagemagick is installed and the version See our support page for the imagemagick test utility.
________________________

connect_sql.php:
These are the parameters that are used to connect to the mySQL database for saving design information. Change the following according to your mySQL database setup

1. DB_NAME The database name created during the MySQL setup from above.
2. USER_NAME The user name for the database created during the MySQL setup from above.
3. PASSWORD The password for the user name.
4. DB_HOST This is the host server that is provided to you by your hosting company (many times this is localhost)

2.2 Product Administration

2.2.1 Product Structure

The products within the wePrint Design Studio software are organized as follows:

• Each product is defined in the products/products-list.xml file.
• Each product defined in the products/products-list.xml must have a corresponding products/productname.xml file. Where productname must be the exact name that exists in the products-list file with each space replaced with a dash. Example, a product named "Adult SS" within the products-list file needs to have a corresponding Adult-SS.xml file. Filenames are case sensitive and must match the case of the product name within the products-list file. (i.e Adult-SS, adult-SS, and ADULT-SS are all different products).
• There is a products.jpg image within the products directory that is a montage image. This montge image is made up of all the individual product images. This image is used within the products gallery.

There is also a corresponding image for each product-color-location combination. "Location" refers to the front or back. This is the background image over which the customer creates their design. These images are located in the toolimages/blanks folder. Within this folder is a corresponding folder for the product. This product folder contains an image of each color-location combination. If the Adult SS product file contains 3 colors: White, Black, and Red. There will be a front and back image for each of these colors within the toolimages/blanks/Adult-SS folder. The 6 images will be White-front.png, White-back.png, Black-front.png, Black-back.png, Red-front.png, and Red-back.png.

Figures 1 through 3 are screenshots of the product structure:

Figure 1. products Folder View

Figure 2. toolimages/blanks Folder View

Figure 3. Adult-SS Folder View

2.2.2 Editing the products-list.xml File

You can view the details of your products-list.xml file by browsing to yourdomain/products/products-list.xml.
products-list.xml

This image shows the three products that are defined in the products-list file. Each product has:

• The product name within the product tag as the id example: <product id="Adult-SS>
• The image file to be used in the products montage within the imagefile tag. This image is only referenced when creating the product montage image from the admin screen.

The heirarchy of the file:
<product id="Some Name">
    <imagefile>name-of-image-file.ext</imagefile>
</product>
The imagefile tag is within the product tag.

Adding, Editing or Removing a Product
Removing A Product:

• Delete the <product> tag for that product, including the imagefile tag.
• Re-create the products.jpg file.
• Upload the revised products-list.xml file and the products.jpg file to the products folder on your site.

Adding A Product:

• Add the <product> tag for that product, including the imagefile tag.
• The products must be in the order in which they appear in the products.jpg image.
• Re-create the products.jpg file.
• Create a product-name.xml file
• Create a product-name.xml folder within the toolimages/blanks folder on your site.
• Upload the product-color-location images to the toolimages/blanks folder on your site.
• Upload the revised products-list.xml file, product-name.xml file, and the products.jpg file to the products folder on your site.

Changing A Product Name:

• Change the id of the product within the <product> tag.
• Re-create the products.jpg file.
• Change the name of the product-name.xml to correspond exactly with the new name in the products-list.xml file.
• Change the folder name of the toolimages/blanks/product-name to correspond exactly with the new name in the products-list.xml file.
• Upload the revised products-list.xml file to the products folder on your site.

2.2.3 Editing the products.jpg File

Products Gallery Image
Once the product is added to the products-list.xml file and you have created the corresponding productname.xml file, you will need to re-create the products image file. The product gallery contains one large image that has each product image joined.

Example products.jpg

This image is created from individual images for each product. You can create this image using your own photo editing tool or use the admin utility to create the image.

Requirements: Each image needs to be 100px wide. The height does not matter. If the image is much less than 100px wide, than the gallery images will overlap.
To create the products.jpg image using the "Create Products Image" feature within the admin page do the following:

1. Download the products-list.xml file to your local machine.
2. Add/Remove products in the file.
3. Upload the new products-list.xml file to the admin directory. NOT the products directory, yet.
4. Upload all of the product thumbnails (100px wide) to the admin directory.
5. Click on the Create Products Image button.
6. The products.jpg image will be created from the thumbnails.
7. Download the created products.jpg image and verify that the image corresponds to the list of products in the products-list.xml file.
8. Upload the products.jpg image and new products-list.xml file to the products directory.
9. Upload the new productname.xml file to the products directory.
10. Each product will also need a corresponding directory in the toolimages/blanks directoy.
11. Go to the design tool and verify that the product selector works correctly.

2.2.4 Editing Product Attributes

You can than view an individual product's file by browsing to the file. For example, yourdomain/products/Ladies-SS.xml
Ladies-SS.xml

Each product defined in the products.xml file needs a corresponding productname.xml file. The file names needs to be exactly as the product name is listed in the products.xml file, with spaces replaced by "-". For example, in the products.xml file we have defined a product Adult SS We need a corresponding Adult-SS.xml file. Again, all file names are case-sensitive and there should be no spaces.

Product Definition:

Color, Size & Price Definitions:

Below is an example of the color prices for the adult t-shirt in the Adult-SS.xml file. For each size put in the price (i.e. S=10.00) NO $ signs The sizes are case sensitive and should be CAPS. If the product only has one printable side than only create the <onside> tag. If you do not plan to use dynamic pricing within the wePrint Designer, than you can skip the prices. If you have the dynamic pricing turned-off (see the shops-default.xml section), any price information will be ignored when the tool loads.


Snippet of Adult-SS.xml

2.3 Fonts Configuration

2.3.1 Adding/Removing Fonts

wePrint Design Studio ships with many popular fonts. If you'd like to add or remove fonts there are a few steps to follow. The font must be a true type font. The fonts folder includes the following files:

• fonts.xml (a list of the fonts to be used in the designer)
• fonts.png (the image file that is used to display each font in the fonts gallery)
• Arial.ttf
• font2.ttf
• font3.ttf
• fontname etc.

The fonts.xml file simply lists the fonts in order that you want them to appear in the fonts gallery.
fonts.xml code snippet Add New Font:
You can add a font by adding a <font> tag: <font>My New Font</font>

Remove a Font:
You can remove a font by deleting the corresponding <font> tag. Or the preferred method is to comment-out the <font> tag. For example to remove the Cheap Fire font:

<!-- <font>Cheap Fire</font> -->

Any tags between the <!-- --> will be considered as a comment in the file and ignored when processed. There is no need to remove the ttf file from the folder, in case you decide later to add it back into the tool.




Create New Font List Image:
The fonts gallery is actually only one long image fonts.png. This image consists of one image for each font concatenated together. Before using the Create Font Image utility, you must have the fonts defined in the fonts.xml file. Also, the actual font file (fontname.ttf) must exist in the fonts directory.
The fonts.xml file that is in the fonts directory is live. DO NOT edit this file until you have the corresponding fonts image.

1. Download the fonts.xml file to your local machine.
2. Add/Remove fonts in the file.
3. Upload the actual font file to the fonts directory. FILES ARE CASE SENSITIVE.
4. Upload the new fonts.xml file to the admin directory.
5. Click on the Create Fonts Button.
6. Download the created fonts.png image.
7. Upload the fonts.png image and new fonts.xml file to the fonts directory.
8. Go to the design tool and verify that the fonts work correctly.

2.4 Adding/Removing Symbols

The main symbols configuration file is /symbols/symbols-list.xml. This file lists the categories that are to be shown in the gallery. Each category name has a corresponding categoryname.xml file. Any spaces within the category name should be replaced with a "-". So a category named "Clipart 1" has a corresponding file clipart-1.xml. You can add or remove a symbol category simply be adding or removing the tag for that category.

Symbolname.xml
The category xml file contains a list of all the symbols in the category. Each symbol must have a corresponding png file with the same name. (spaces replaced by "-")

2.5 Modifying the Color Palette

There are two color palettes that can be modified to hold the colors that best suit your needs; 1) the text/symbol color palette and 2) the text outline color palette. There is one file that needs to be modified in order to edit these palettes.
Open the includes/color.js file in your editor. At the top of the file you will find the following code:

Text/Symbol color table within colors.js

You can add or remove a color by simply editing the color hex code and the color name. Be sure to follow the correct punctuation, including single quotes around the hex code and the color name. The hex code is the more important piece of information since it is used to fill-in the text or symbol. The color name can be any alphanumeric name you want.

The color table for the text outline appears at the bottom of the color.js file. It can be modified in the same manner as the text/symbol color table.

2.6 Modifying the Stock Images Gallery

The wePrint Design Studio ships without any images in the stock image gallery. The directory that contains the configuration files and the image files is stockimages. The stockimages directory will look like:


The imagegroups.xml file determines the groups listing in the gallery. Each image group has a groupname.xml file and a corresponding groupname directory. The groupname directory holds all the images for that particular group. Here is the view of the Animals directory:



When the design tool loads it looks at the imagegroups.xml file and presents a list of the groups in the stock images gallery. You can edit the imagegroups.xml file in a text editor. To add a group to the files just add the group-name to the file between a set of <group> tags.






If you wish to keep the stock images gallery empty, the imagegroups.xml file needs to look like:



Once you have added a group to the imagesgroup.xml file, you need to create the group-name.xml file. The Animals.xml file looks like:


Copy and paste the Animals.xml code as a starting point for your file. Simply change the imagename between each <image> tag.




Any image file that is in the directory but not included in the groupname.xml file will not show-up in the gallery. So, if you want to remove an image from the gallery. Remove the <image> tag in the xml file. Leave the actual image file in the directory, in case you decide to add it again later.

2.7 Modifying the Our Designs Gallery

The Our Designs gallery can be turned-on or off from the wep-config-tool.xml file. This gallery allows you to categorize designs for your customers. You may have different generic designs for businesses, sports teams, charities or any other category. There is no known limit to the number of categories or designs per category. The gallery will include a scroll-bar if the number of designs exceeds the height of the dialog box. Once a cusomer selects a design, the design will open in the designer and they can edit the design and save it under their email address. The wePrint Design Studio ships without any designs in the Our Designs gallery. The directory that contains the configuration files and the design files is ourdesigns. Here is the listing fo ourdesigns directory from a simple example.


The our-designs-categories.xml file determines the categories listing in the gallery. Each category has a categoryname.xml file. The directory for each design must be within the ourdesigns directory. Here is the sample our-designs-categories.xml:



With this example there are three categories (Standard, Business, and Sports). As can be seen from this code, each category has a corresponding xml file. The category.xml will list the thumbnails for each design in that category. Here is the sample Standard.xml file:



Each thumbnail corresponds to a design that is in the design directory. The design can be any design that was saved using the design tool. Simply copy the entire design directory from the saveddesigns directory into the ourdesigns directory.