# eCommerce Design/functionality



## 4StagePrinting (Mar 22, 2016)

Anyone know of a plugin to keep the variables (style, color, size) the same for each design?

I'd like to just upload a new design (with transparent background of course) and have the variables layered below it.

My customers can simply choose the design they are interested in...click the style, color, size.


----------



## 4StagePrinting (Mar 22, 2016)

Attached is a visual representation of what I'd like.

The person could click on the style, color & size of shirt they want. All I would upload for a new design...would be a transparent version of that design. The variations would be layered underneath.


----------



## NoXid (Apr 4, 2011)

I don't know of any plugins like that, but you could code from scratch and do essentially anything you want.

One way would be:










You set the CSS for the div so that the background image is the garment type that you want to show by default. Then you have a bit of javascript that changes that background attribute when the user selects a different style or color option. You'd need logic to go with it, but something like the following would make the change:

document.getElementById("garment-"+_designNumber_).style.background = "#ffffff url('"+_garmentStyleColor_+".jpg') no-repeat center";

I used something like that to show the art over the top of different colors, but without a garment. Then another view/mode that allowed the user to view mockups of different garment styles, but not different colors. Your idea would work, but you would need to be precise in your creation of the garment images so the art would look right with all of them.

If you have room to play with, that is totally doable. However, I designed my layout to get the maximum image/art size on a phone, so I crop each garment type (tank top to hoodie) differently so as to make the art clearly readable/viewable. Still ... one could scale and place the art based on the type of garment currently being viewed ... so yeah, totally doable.

Uhm, but a lot of work to code an entire web site from scratch, as I did, or probably even harder to work custom code like this into an existing WordPress template.


----------



## mgparrish (Jul 9, 2005)

NoXid said:


> I don't know of any plugins like that, but you could code from scratch and do essentially anything you want.
> 
> One way would be:
> 
> ...


You could just stack up on floating layers as you are implying but that really is primitive and limited without a suitable HTML5 canvas manipulation library. You could create a view on the webpage but not much beyond that. Getting the layers flattened so "variations would be layered underneath the transparent version of that design" and "upload for a new design" not going to happen with simple JS from scratch. You really used something like fabric.js. to stack and manipulate images on layers on a canvas and then render the canvas and upload it  Then you also have a powerful tool to add text and clipart as well if needed.


----------



## mgparrish (Jul 9, 2005)

4StagePrinting said:


> Anyone know of a plugin to keep the variables (style, color, size) the same for each design?
> 
> I'd like to just upload a new design (with transparent background of course) and have the variables layered below it.
> 
> My customers can simply choose the design they are interested in...click the style, color, size.


You speak of a plugin but I see no reference to a CMS or cart where a plug-in could "plug into".


----------



## NoXid (Apr 4, 2011)

mgparrish said:


> You could just stack up on floating layers as you are implying but that really is primitive and limited without a suitable HTML5 canvas manipulation library. You could create a view on the webpage but not much beyond that. Getting the layers flattened so "variations would be layered underneath the transparent version of that design" and "upload for a new design" not going to happen with simple JS from scratch. You really used something like fabric.js. to stack and manipulate images on layers on a canvas and then render the canvas and upload it  Then you also have a powerful tool to add text and clipart as well if needed.


My site doesn't stack layers, and it uses no libraries other than Stripe's; it is pure javascript, not even any jQuery 

The art for each design is a png file with all but the ink colors set to transparent. Thus whatever color or image is set as the background of the Div is what one sees "behind" the art. No magic there; that is how every png/gif that includes a transparent area is displayed. All one has to do is dynamically change the background image or color of the Div.

You would need an art png for each design, then jpgs for each style in each color of undecorated garment.


I'm not familiar with fabric.js, but a quick Google suggests it might be quite useful. Though it looks to be a multi-tool version of a sledgehammer that would bring with it much more capability and girth than needed for displaying T-shirt options


----------



## mgparrish (Jul 9, 2005)

NoXid said:


> My site doesn't stack layers, and it uses no libraries other than Stripe's; it is pure javascript, not even any jQuery
> 
> The art for each design is a png file with all but the ink colors set to transparent. Thus whatever color or image is set as the background of the Div is what one sees "behind" the art. No magic there; that is how every png/gif that includes a transparent area is displayed. All one has to do is dynamically change the background image or color of the Div.
> 
> ...


Looking at his mockup there is

1. Custom text on the design
2. A font that represents that text
3. Color for that text.
4. Placement (position) for that text.
5. A graphic on the t-shirt
6. A color for that graphic
7. Placement (position) for that 

If you are going to make something that is attempting to make a user see his design in a mock-up it's not too far away from just some "pure javascript" to actually make this a real designer beyond just being a color selector for the ink. My point is if you are already there why not make this more useful with a tool that was designed to use in a tshirt designer.

But for someone that is not familiar with this library it might appear to be overkill but in actuality it isn't.

As far as a "multi-tool version of a sledgehammer", now-a-days with modern JS libraries we can build in only the tools we need if one wishes. 

Just put mostly the tools in the toolbox that you need. But this library is light enough minified so would be a rare case you really need to whittle it down anyway.

Custom Fabric build — Fabric.js Javascript Canvas Library

You mention 

"Uhm, but a lot of work to code an entire web site from scratch, as I did, or probably even harder to work custom code like this into an existing WordPress template." 

In 2016 we don't need to to do that, we have .js libraries that save us many hours of manual coding labor and not worry about cross-browser issues as well. 

This is a not a "plugin" technically per see as he was asking, but a true .js library. But in his context it would act a "plugin" as he is asking without "coding from scratch" an entire website.


----------



## NoXid (Apr 4, 2011)

I'm selling my _own_ designs on various garment styles, which seems to be what the TS is up to as well. I do the art in CorelDraw and PhotoShop, a derivative of the art used to burn the screens. I've no use for design capability on the web site, as I am not printing customer designs (the *HORROR!*) . For those who do, fabric.js does look to be a great tool.

For me, the point of the exercise is not having to make mockups of every style/color/design variation that I sell, while still being able to display every variation to the customer.

A single line of js can switch the background image or color of a Div, so this aspect of the code was not exactly taxing to write. But, yeah, I do tend to go all out on things DIY 
But I wants what I wants, and got it, since there was no template or platform in the way of doing whatever I wanted, and I wanted lots of very specific things. All the CSS, JS, PHP, and HTML, as well as the data for 35 designs, comes to a bit under 250k, not minimized, and still loaded with comments. It loads faster than my Etsy page, and is probably half the size of an unminimized fabric.js library, which by itself isn't a web site.

jQuery and task specific libraries speed up the programmer, not the program--at least with non-compiled applications like a web site. Coding for an Apple IIe was like writing a novel on Twitter 
But sometimes I think we lost something when we lost those constraints. (I know this post would have been better if limited to 150 characters )


----------



## digitizingninjas (Aug 19, 2016)

I am not sure it can be done only with JAVA, you need to add jquery also to get this function as well as i have see few plugins in market which are being used to design t-shirts, but they aree not upto the mark. The ones which is requested is custom made solution


----------



## mgparrish (Jul 9, 2005)

digitizingninjas said:


> I am not sure it can be done only with JAVA, you need to add jquery also to get this function as well as i have see few plugins in market which are being used to design t-shirts, but they aree not upto the mark. The ones which is requested is custom made solution


We are talking about Javascript and not Java. 

Simple DOM manipulation could be done with pure javascript, but it might not the best decision though to use "pure" javascript.

Java can and has been able to make such a thing, but Java requires a plugin to be utilized in a browser, much like flash would.

Java and Javascript = Apples and Oranges

I agree on your mention of plugins in the market, many work, but most are designed to the lowest common denominator and require additional work to make it useful for most applications.


----------



## mgparrish (Jul 9, 2005)

The source here is free for anyone's use.

http://www.mgparrish.com/fabrictest/index.html

Speedtest screen is attached. This uses both js libraries fabric.js and jquery.

Note on speed optimization: 

1. My host for my coding testbeds is a cheap shared hosting.
2. These are not custom builds of the .js libraries fabric.js and jquery.
3. These libraries are local to the website, they are not loaded from faster CDN provider sites such as Google or Microsoft

All 3 items above would improve page loading.

My implementation should represent more or less worse case for code performance.

I used inline javascript only because it is free for anyone's use and ease of source view, best practice is to move most .js into it's own file and protect it.

This is just a quick and dirty example, a real implementation would substitute a color picker or swatches for the colors and make an error handler pop-up in cases where the tshirt background color and ink color match and can't be distinguished.


----------



## mgparrish (Jul 9, 2005)

NoXid said:


> I'm selling my _own_ designs on various garment styles, which seems to be what the TS is up to as well. I do the art in CorelDraw and PhotoShop, a derivative of the art used to burn the screens. I've no use for design capability on the web site, as I am not printing customer designs (the *HORROR!*) . For those who do, fabric.js does look to be a great tool.
> 
> For me, the point of the exercise is not having to make mockups of every style/color/design variation that I sell, while still being able to display every variation to the customer.
> 
> ...


"jQuery and task specific libraries speed up the programmer, not the program"

1. You could never work as a programmer charging your clients double what an efficient programmer would. 

2. A good programmer can use these libraries without adding much overhead.

See my speed tests in my other post. Proof is in the pudding

Enjoy your 200 mSec speed savings from your "pure javascript", I enjoy working twice as fast and offering more power to my apps.


----------



## mgparrish (Jul 9, 2005)

My posts URL is showing a stock design implementation BTW, not a custom tshirt designer implementation.


----------



## NoXid (Apr 4, 2011)

mgparrish said:


> "jQuery and task specific libraries speed up the programmer, not the program"
> 
> 1. You could never work as a programmer charging your clients double what an efficient programmer would.
> 
> ...


Ha! No arguments from me pretending to be a programmer 
I DIY because I enjoy it, and can't bring myself to pay for anything I can bumble through on my own 
A jacka$$ of all ... 


One question on something you mentioned above, about putting the js in its own files and protecting the files.

Most of my js is outside of the html files, but it is all still in the Public directory. I put my PHP in a directory outside of Public ... would that be the smart thing to do with the js as well? I didn't really think about it, as I just imagined that it would all be visible via browser tools regardless ...


----------



## mgparrish (Jul 9, 2005)

NoXid said:


> Ha! No arguments from me pretending to be a programmer
> I DIY because I enjoy it, and can't bring myself to pay for anything I can bumble through on my own
> A jacka$$ of all ...
> 
> ...


Javascript is a client-side programming language, therefore it works on the client's machine, so you can't actually hide anything from the client. 

As you mention about the php file being above the public access of the website's server, that would be the thing to do if you could with your .js, but unfortunately it only works client side inside your browser. _You do have the right idea about this though_, php can be called away from public access. 

Several things to do.

1. Embed your js code (and html) in a PHP file that is located above your website's public access. This would be the most secure way.

2. Use what is called "Obfuscating your code", not 100% secure but keeps your average "copy and paste" thief from stealing your code.

Just one of many tools for this ...

JavaScript Obfuscator - Protect your JavaScript Code

3. Just minify your code and put it in your own .js directory. This is what I do. Most people that could work with your minified .js file and figure it out could probably reverse engineer your webpage anyway and code it on their own. This keeps your average "copy and paste" thief from stealing your code too.

So when I mention securing your code, secure is a relative term.

Flash (client side) was easier to protect but now becoming obsolete quickly.


----------



## NoXid (Apr 4, 2011)

mgparrish said:


> Javascript is a client-side programming language, therefore it works on the client's machine, so you can't actually hide anything from the client.
> 
> As you mention about the php file being above the public access of the website's server, that would be the thing to do if you could with your .js, but unfortunately it only works client side inside your browser. _You do have the right idea about this though_, php can be called away from public access.
> 
> ...


Okay, thanks.

Not really worried about people stealing my code for their own use (Ha! good luck to them with Tech Support), just don't want to make it easier for people to jack around with my site.


Flash! Flipping hate it! FUBARed my web surfing 'puter every time I had to install it for some damn music download thing for Amazon. But, yeah, it was fun to play with back in the Macromedia days. Too bad the FTC let that deal go through the second time around


----------



## 4StagePrinting (Mar 22, 2016)

Do you have a live site I could see? It sounds like you have a clear grasp on what I need. 

Google, on the other hand wants customers to upload their own. Not interested in that.


----------



## mgparrish (Jul 9, 2005)

4StagePrinting said:


> Do you have a live site I could see? It sounds like you have a clear grasp on what I need.
> 
> Google, on the other hand wants customers to upload their own. Not interested in that.


I just threw that up there in my link as an example for anyone to use. 

I'm currently working on a desktop based product designer.

When i have some time I will update the example to allow the user to select different designs.

So different designs, different t-shirt colors, and different ink colors.


----------

