OrderStorm WordPress e-Commerce Releases Color Selector Tool

The new color selector tool is the latest great e-commerce function to be added to the OrderStorm WordPress ecommerce plugin. The color selector is a product configurator tool to view how a product will look in different color combinations to help the customer make a purchase decision. It can be used for a wide variety of products including clothing, awnings, canopies, flags, furniture and any other item that comes in a choice of colors. Its also a good tool for home decor and construction products to see how your deck or walls will look in a variety of colors.

This is considered an advanced feature. It requires an HTML5 Canvas developer to create the initial shapes that represent the segments of your product that come in color choices. You must create your HTML drawings using the matching Feature Group ID for the feature groups , Color 1 (example below: typeof this.colors[135] is Color 1), Color 2, etc. The User Manual has complete instructions for setting up the Feature Group IDs to include in the HTML and the colors options for each product. Colors must be set up using the hexadecimal code to display.

Example 1: Select colors for a diagonal stripe flag

Here is the code for this HTML drawing:

<canvas id=”myCanvas” width=”246″ height=”142″></canvas>

<script type=”text/javascript”>
var osws = {
canvas:{
width:246,
height:142,
colors:[],
color_count:0,
custom_text:[],
draw_shape:function (canvas_id) {
// Get the canvas element.
this.elem = document.getElementById(canvas_id);
if (!this.elem || !this.elem.getContext) {
return;
}
// Get the canvas 2d context.
this.context = this.elem.getContext(‘2d’);
if (!this.context) {
return;
}
this.context.clearRect(0, 0, this.width, this.height);
// Draw a vertical rectangle.
this.context.fillStyle   = ‘#FFF';
this.context.strokeStyle = ‘#000′;
this.context.lineWidth   = 1;
this.context.beginPath();
this.context.moveTo(1, 1);
this.context.lineTo(10, 1);
this.context.lineTo(10, 141);
this.context.lineTo(1, 141);
this.context.lineTo(1, 1);
this.context.fill();
this.context.stroke();
this.context.closePath();
this.context.fillStyle = (typeof this.colors[135] === ‘undefined’) ? ‘#FFF’ : this.colors[135];
this.context.beginPath();
this.context.moveTo(10, 1);
this.context.lineTo(235, 1);
this.context.lineTo(235, 141);
this.context.lineTo(10, 1);
this.context.fill();
this.context.stroke();
this.context.closePath();
this.context.fillStyle = (typeof this.colors[136] === ‘undefined’) ? ‘#FFF’ : this.colors[136];
this.context.beginPath();
this.context.moveTo(10, 1);
this.context.lineTo(235, 141);
this.context.lineTo(10, 141);
this.context.lineTo(10, 1);
this.context.fill();
this.context.stroke();
this.context.closePath();
// circle (arc)
//context.strokeStyle=”#FFFF00″;
this.context.fillStyle=”#000″;
this.context.beginPath();
// centerX, centerY, radius, startingAngle, endingAngle, counterclockwise
this.context.arc(5.5,10,2,0,Math.PI*2,true);
this.context.closePath();
this.context.stroke();
this.context.fill();
// circle (arc)
//context.strokeStyle=”#FFFF00″;
this.context.fillStyle=”#000″;
this.context.beginPath();
// centerX, centerY, radius, startingAngle, endingAngle, counterclockwise
this.context.arc(5.5,132,2,0,Math.PI*2,true);
this.context.closePath();
this.context.stroke();
this.context.fill();
if (typeof this.colors[135] === ‘undefined’) {
this.x = 220;
this.y = 20;
this.context.font = “14pt Arial”;
this.context.textAlign = “right”;
this.context.fillStyle = “#000″; // text color
this.context.fillText(“Customize”, this.x, this.y);
this.x = 220;
this.y = 40;
this.context.font = “14pt Arial”;
this.context.textAlign = “right”;
this.context.fillStyle = “#000″; // text color
this.context.fillText(“Color”, this.x, this.y);
}
if (typeof this.colors[136] === ‘undefined’) {
this.x = 20;
this.y = 115;
this.context.font = “14pt Arial”;
this.context.textAlign = “left”;
this.context.fillStyle = “#000″; // text color
this.context.fillText(“Customize”, this.x, this.y);
this.x = 20;
this.y = 135;
this.context.font = “14pt Arial”;
this.context.textAlign = “left”;
this.context.fillStyle = “#000″; // text color
this.context.fillText(“Color”, this.x, this.y);
}
}
}
};
osws.canvas.colors = [];
osws.canvas.draw_shape(‘myCanvas’);
</script>

<canvas id=”myCanvas” width=”246″ height=”142″></canvas><script type=”text/javascript”>var osws = { canvas:{ width:246, height:142, colors:[], color_count:0, custom_text:[], draw_shape:function (canvas_id) { // Get the canvas element. this.elem = document.getElementById(canvas_id); if (!this.elem || !this.elem.getContext) { return; }
// Get the canvas 2d context. this.context = this.elem.getContext(‘2d’); if (!this.context) { return; }
this.context.clearRect(0, 0, this.width, this.height);
// Draw a vertical rectangle. this.context.fillStyle   = ‘#FFF'; this.context.strokeStyle = ‘#000′; this.context.lineWidth   = 1;
this.context.beginPath(); this.context.moveTo(1, 1); this.context.lineTo(10, 1); this.context.lineTo(10, 141); this.context.lineTo(1, 141); this.context.lineTo(1, 1); this.context.fill(); this.context.stroke(); this.context.closePath();
this.context.fillStyle = (typeof this.colors[135] === ‘undefined’) ? ‘#FFF’ : this.colors[135];
this.context.beginPath(); this.context.moveTo(10, 1); this.context.lineTo(235, 1); this.context.lineTo(235, 141); this.context.lineTo(10, 1); this.context.fill(); this.context.stroke(); this.context.closePath();
this.context.fillStyle = (typeof this.colors[136] === ‘undefined’) ? ‘#FFF’ : this.colors[136];
this.context.beginPath(); this.context.moveTo(10, 1); this.context.lineTo(235, 141); this.context.lineTo(10, 141); this.context.lineTo(10, 1); this.context.fill(); this.context.stroke(); this.context.closePath();
// circle (arc) //context.strokeStyle=”#FFFF00″; this.context.fillStyle=”#000″; this.context.beginPath(); // centerX, centerY, radius, startingAngle, endingAngle, counterclockwise this.context.arc(5.5,10,2,0,Math.PI*2,true); this.context.closePath(); this.context.stroke(); this.context.fill();
// circle (arc) //context.strokeStyle=”#FFFF00″; this.context.fillStyle=”#000″; this.context.beginPath(); // centerX, centerY, radius, startingAngle, endingAngle, counterclockwise this.context.arc(5.5,132,2,0,Math.PI*2,true); this.context.closePath(); this.context.stroke(); this.context.fill();

if (typeof this.colors[135] === ‘undefined’) { this.x = 220; this.y = 20; this.context.font = “14pt Arial”; this.context.textAlign = “right”; this.context.fillStyle = “#000″; // text color this.context.fillText(“Customize”, this.x, this.y);
this.x = 220; this.y = 40; this.context.font = “14pt Arial”; this.context.textAlign = “right”; this.context.fillStyle = “#000″; // text color this.context.fillText(“Color”, this.x, this.y); }
if (typeof this.colors[136] === ‘undefined’) { this.x = 20; this.y = 115; this.context.font = “14pt Arial”; this.context.textAlign = “left”; this.context.fillStyle = “#000″; // text color this.context.fillText(“Customize”, this.x, this.y);
this.x = 20; this.y = 135; this.context.font = “14pt Arial”; this.context.textAlign = “left”; this.context.fillStyle = “#000″; // text color this.context.fillText(“Color”, this.x, this.y); } } }};osws.canvas.colors = [];osws.canvas.draw_shape(‘myCanvas’);</script>

Once your drawings are added, they will appear in the ‘HTML drawing’ dropdown list. This list is available for all products in your product catalog.

Next, go to the product that offers a choice of colors. Select the drawing from the list that matches the shape of the product to add the color selector to the product.

Example 2: If a polka-dot blouse comes in a choice of red, pink, lavender, purple and white, set up two feature groups to use: Color 1 for the background and Color 2 for the dots. You will add the actual colors to both the Color 1 and Color 2 feature groups for the the polka-dot blouse product using the same instructions above for adding color options to a product.

Feel free to contact us for support with this feature.

Tagged with:

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>