Build customised flag and flag patterns in mvc in ecommerce application

Question

We have following requirement. We are developing one project in asp.net but confuse about the way how we can do it. One of our client needs the web site that offers custom flags building. The example of flag is attached with this question. Here i want to give user a ability that user can buy flags. For this option i will use one of open source shopping cart. But don't know how we will ability to user that part-1 will be of red color, part-2 of different color etc.

They can choose any color from color selection box and do checkout from there. The flag patterns will be added from admin area of our shopping cart admin panel. But confuse here how we will add new patters? In which format? So user can fill color from color box in it and proceed for checkout. How to add this type of patterns from admin? They also want to add different shapes for flags. Client refuse to use flash for it. Example front-end is below.

Answer 1

You can dynamically add divs with background-colors and select color choices from them (see example code below).

If you want to hook into MVC:

• Send the colors array from your controller into the view's model.

• Add a 'Continue' button that sends the users 3 color selections to your POST controller.

var currentColor=1;
var colors=[];
colors.push({color:'#04a09c',label:'turquoise'});
colors.push({color:'#862a77',label:'wineberry'});
colors.push({color:'#1e3a81',label:'o.g.blue'});

for(var i=0;i<colors.length;i++){
    var $newDiv=$('<div/>',{
        id:colors[i].label,
    });
    $newDiv.css('background-color',colors[i].color);
    $newDiv.addClass('color');
    $newDiv.appendTo('#colors')
    $newDiv.data('label',colors[i].label);
}

$('.color').on('click',function(e){
    var $color=$('#color'+currentColor);
    var bkcolor=$(this).css('background-color');
    var colorName=$(this).data('label');
    $color.css('background-color',bkcolor);
    $color.text(currentColor+" = "+colorName);
    if(++currentColor>3){currentColor=1;}
});

body{ background-color: ivory; padding:10px; }
#choices{width:150px;border:1px solid red;color:white;font-size:18px;background-color:lightgray;}
#colors{display:inline-block;}
.choices{width:150px;height:35px;border:1px solid gray;}
.color{display:inline-block;width:50px;height:35px;border:1px solid gray;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>These are your 3 choices</p>
<div id=choices>
  <div id=color1 class=choices>1</div>
  <div id=color2 class=choices>2</div>
  <div id=color3 class=choices>3</div>
</div>
<p>Click 3 colors below to choose them above</p>
<div id=colors></div>