A small printing shop in Massachusetts asked me to put together a website that provide information on their different products and services.
The owner resquested that the website could be seen properly on phones and tablets. Using CSS, the website was made responsive and the screen should fit on all tablets and most phones. Using the new flex property, I could move the information on the left and right sides of the screen below the main portion easily for certain widths.
One of the things that the owner wanted to have on the website was the ability to upload designs for certain products.
Certain products under Digital Printing, Dye Sublimation and Heat Transfer will have this ability as well as other possible options including person (Mens, Womens, Boys, Girls), size, type of product and color. With CSS, certain screens will show these options to the left of the product and on other screens, they will appear below the product.
Another piece on these pages is the cost per item. They can change based on size, color and whether there is a design on one side or both sides of the product. There is an Angular directive that not only uploads the design file, but also checks on options pages and does an AJAX call to PHP which will does a call to MySQL to access the cost table.
With other product or service pages on the website, the owner wants the user to contact them for more information and pricing. If they wish to email them, the user can use the form at the bottom of the page. They can include a design to upload to the owner. The form includes a Recaptcha verification to make sure a person and not a robot or spider is submitting the form. Submitting the form would use PHPMail to send the message to the owner.
An administration page was created for the owner to approve testimonials, view designs on products and be able to download the user's design.
The owner can view pending, hidden and completed products based on invoice number. The invoice number would be in sync with what the user had added to the Paypal cart. The pending items will provide the options the user entered, screen shots of the product with design and a button to download the design.