PrintPixel

A shopping cart for custom products

A responsive, user friendly, all-in-one shopping cart for designing, printing and selling custom T-shirts or other products

Prerequisites

Server requirements
  1. Apache 1.13.19 or above
  2. PHP 5.4+
  3. ImageMagick >= 6.2.4 with imagick php module
  4. The mod_rewrite Apache module
Pre-installation

You'll need to make sure you have the following:

Quick installation

Step 1. Unzip the downloaded file to a folder on your hard drive

Step 2. Upload the contents of the "/upload" directory to your web server

Step 3. Make sure the following folders are writable (chmod 755)
/storage
/data/database/

Step 4. You can now access it by going to the web address of the folder you uploaded to.

Step 5. The admin can be found in the /admin directory. The default password is :

                Username: admin
                Password: changeme

We recommend that you change the password.

Step 6. In the admin, click on settings. Enter your stripe "secret key" and "publishable key"

Step 7. (optional) If you are uploading in a sub-directory, you need to open the "config.php" file and change the BASE_URL to your directory name.
e.g. If you want to use http://example.com/tshirt, then the config.php line needs to look like 

define("BASE_URL", "/tshirt/");

You now can start using the system and adding your products.

Setting up your categories

You’ll need to set-up categories for your products. Click on the “Inventory” menu then “Categories”. Enter the names for your categories and use the arrows to move it up and down. It will be displayed in the same order in the designer.

  1. Click on the “Inventory” menu to start.
  2. Click on the “Categories” tab
  3. Click on "Add new category" at the bottom to start
  4. You can now edit the newly added category
  5. Don't forget to click on "Save categories" when completed

Setting up your products

  1. Click on the “Inventory” menu to start.
  2. Click on “Add new product” and enter your product details.
  3. On the next page you can enter your pricing information, variants, editable orientations and more.
Setting up variants
  1. Click on the “Add new variant type” to add a new variant based on colors
  2. If you’ve already set-up a variant you need to click on “Add new variant” and select it from the newly added dropdown list
  3. If you need more orientations you’ll need to Click on “Add new orientation” on the box above
  4. Click on select image for each orientation and upload your image. Note: your image must be 500x500px
Setting up areas
  1. You will have to set up an area that the user can design in for each product
  2. Scroll down to the “Editable area” section
  3. Enter the printable width and height in mm. This is the size of the area your users will be able to design in
  4. Also, enter the offset X and offset Y in mm. These values position your editable area size on your product
  5. Lastly you need to enter the orientation dimensions, again in mm. This equates to the width and height of the 500x500px in relation to your actual product size
  6. You’ll need to do this for each product

Setting up your pricing

  1. Click on the “Pricing” menu to start.

  2. Set your postage costs

  3. Enter the cost per color for each side

Setting up payments (Stripe)

Login to your admin control panel and click on “Settings” in the menu.

  1. Stripe secret key
    Now unzip the downloaded file to a folder on your hard drive

  2. Stripe publishable key
    You can upload your files to your web server using an FTP client. You’ll need to decide whether you want to install it in the root directory or in a sub-directory.

  3. Default currency
    We’ve set this to USD by default. Select the one you want to use and make sure stripe supports it.

  4. You’re ready to start accepting payments..

  5. You can test payments using

    Number Card type
    4242424242424242Visa
    4012888888881881Visa
    4000056655665556Visa (debit)
    5555555555554444MasterCard
    5200828282828210MasterCard (debit)
    5105105105105100MasterCard (prepaid)
    378282246310005American Express
    371449635398431American Express
    6011111111111117Discover
    6011000990139424Discover
    30569309025904Diners Club
    38520000023237Diners Club
    3530111333300000JCB
    3566002020360505JCB
    Taken from : https://stripe.com/docs/testing.

* Note – if you don’t want to use stripe, please refer to the “Developers section”.

Managing and printing orders

All your orders are visible in your “Dashboard”. Click on the “Orders” item in the menu to view your orders.

  1. Selecting an order
    Orders are sorted by the date it was ordered. Click on “View” to view the order details.

  2. Printing images
    Click on download images to view what your customers had designed. This image can be printed.

  3. Quantities and pricing
    Make sure you check the sizes ordered and their respective quantities.

  4. When you’ve printed and dispatched the order – select the “Yes” option and click on save. This will mark the item as dispatched.

Adding clip-art and fonts

Adding clip-art

All clip-art is stored in the “clip_art” folder. You can create directories in this folder and upload your images there. They will appear in the clip-art section of the designer.

Adding fonts

We use the “Font Squirrel” format for fonts. All fonts are stored in the “fonts” folder. If you want to add your own fonts, you’ll need to upload the following :

  1. An image in the /png folder

  2. A json file in the /json folder. It needs the following content:

    {
	"name": "1942 report",
	"url": "1942-report",
	"category": "Typewriter",
	"variants": ["Regular"],
	"regular": {
		"stylesheet": "fonts\/web\/1942-report_Regular\/stylesheet.css",
		"ttf": "fonts\/web\/1942-report_Regular\/1942-webfont.ttf",
		"fontface": "1942_report1942_report"
	},
	"italic": false,
	"bold": false,
	"bolditalic": false
}

  3. The webfonts must contain a directory "FontName" with woff, ttf, svg and eot files. This can be generated using Font Squirrel.

These fonts will appear in the font selection area of the text adding/editing sections.


Integrating PayPal

It is preferable to use Stripe as it provides a better experience for the user and is easier to set-up. However, some countries do not support stripe yet. For those users you can choose PayPal as an alternative.

  1. Go to the "Settings" page of the PrintPixel admin
    You will see 4 fields Paypal UserName, Paypal Password, Paypal Signature and Paypal environment. You need to fill these in.

  2. Now go to PayPal and get the credentials to use.

    Live: https://www.paypal.com/us/cgi-bin/webscr?cmd=_login-api-run

    Test (sandbox): https://sandbox.paypal.com/us/cgi-bin/webscr?cmd=_login-api-run

  3. Save the credentials
    Set the "Default payment method" to PayPal enter the correct credentials and hit "Save settings"

  4. Now run a test to see if everything is working fine. If not recheck your credentials and contact us.

For developers

If you’re a developer and want to integrate the designer into your own shopping cart or website here are a few things that might help you:

Note: We've purposely used yml for storing product data to make it easier for integration with existing systems. It contains simpler data models (less joins) and no mysql schema to stick to.

  1. Importing products
    Products are all stored as yaml files. If you already have a database of products you can export your product and the details to a yaml file with the following structure:

    name: 'Baby Cap'
slug: baby-cap
description: 'Something'
category: 'Baby Cap'
price: '9.90'
sizes:
    - 'One size'
orientations:
    - { name: Front, width: 282.55860150973, height: 282.55860150973, printable_width: 109.9960269976, printable_height: 109.9960269976, printable_offset_x: 84.7676, printable_offset_y: 137.243 }
    - { name: Back, width: 282.55860150973, height: 282.55860150973, printable_width: 109.9960269976, printable_height: 109.9960269976, printable_offset_x: 88.8041, printable_offset_y: 137.243 }
variants:
    - { name: white, price: '9.90', orientations: { Front: 817_1_1.png, Back: 817_2_1.png } }
    - { name: black, price: '9.90', orientations: { Front: 817_1_2.png, Back: 817_2_2.png } }
    - { name: 'grass green', price: '9.90', orientations: { Front: 817_1_88.png, Back: 817_2_88.png } }
    - { name: 'sky blue', price: '9.90', orientations: { Front: 817_1_63.png, Back: 817_2_63.png } }
    - { name: navy, price: '9.90', orientations: { Front: 817_1_399.png, Back: 817_2_399.png } }
    - { name: red, price: '9.90', orientations: { Front: 817_1_196.png, Back: 817_2_196.png } }
    - { name: pink, price: '9.90', orientations: { Front: 817_1_236.png, Back: 817_2_236.png } }
defaultVariant: white

  2. Linking to a product
    If you need to link to a specific product you can use the product slug as follows. 

    http://example.com/#product/@product-slug@

    The designer will then load the desired product.

  3. Customizing the theme
    The theme is coded in Bootstrap and LESS. To change colors/fonts you will need to edit variables.less.
    If you want to change the layout and structure you must edit the HTML files in the /views/ folder.
    It’s built with gulp.

  4. Adding different payment options
    The BuyCheckoutController.js contains a method called submitForm. You can modify this method to submit your form to your own shopping cart or change to another payment method.

  5. Integrating it into your website
    The simplest way is to use an iframe with the link to the designer. Alternatively, you can copy the links to the css, json from the index.html in the dist directory with the body.

  6. Integrating your own shopping cart
    Once you’ve imported your own products to the yaml file and changed the submitForm function, you’ll almost be there.

    There API calls to:
    session.php that maintain a session. You may need to modify this to keep track of your user if they’re logged in.
    upload.php it may be nice to associate uploads with user ids.
    checkout.php stores the payment data

  7. Source files
    The source files for the AngularJS app are located in the "src" directory. Please make sure bower, node and npmare installed. Then use gulp to compile.

Embedding into your website

The easiest way to embed the application in your website is to use the following code : 

<div class="tshirt-container">
    <iframe src="http://example.com" height="690" width="1020" allowfullscreen="" frameborder="0">
    </iframe>
</div>
 
<style>
.tshirt-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}
.tshirt-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

Remember to replace http://example.com with your own URL.

Sample data

If you'd like the sample data used in the live demo, you can download it from here - http://docs.expresspixel.com/data/print-pixel/extras/sample-data.zip

Common errors

ERROR - PHP fileinfo extension missing

This extension is enabled by default as of PHP 5.3.0. However, some hosts may still have it disabled.

Windows users must include the bundled php_fileinfo.dll DLL file in php.ini to enable this extension.

Support

For any enquiries, help, suggestions or feedback you can contact us on support@expresspixel.com. If you’d like custom development or theming we have a pricing section that you can refer to before contacting us.