[solved] Customize the color and size selection with stock

I have been looking for size and color selection options in Open cart and can't find any reliable source.
Then i tried to make size and color with proper matching which must support the stock and price difference and I found an way to create an Option that contain both (X-RED) this will contain the open cart default functionality of stock and price difference.
What I had to do is make some change on product.tpl file which create separate size and color select boxes and on matching with your available option sets the main selection.
This functionality I do in Angular Js.

Now Follow Below steps to Implement. I have tested this in Open cart 2.0.0

1. Create an Option Name 'Choice' In Open cart. this will be a key to include codes. You can change it.but dont foget to replace in the below codes too.
2. Add options size and color saperated by hyphen like
X-RED
M-RED
M-GREEN
2X-RED (XXL and XL will conflict so USE 2X )

3. Now In product options you can add X-RED with stock.
4. Add below codes in product.tpl just above last line

<?php echo $footer; ?>

situated at your theme directory.
mine is at

/catalog/view/theme/default/template/product/product.tpl.


<!-- custom color size codes starts -->
<?php
foreach ($options as $option) {
if($option['type'] == 'select' && $option['name']=='Choice'){
$choice_options=$option['product_option_value'];
//echo "<pre>";var_dump($choice_options);echo "</pre>";
echo '<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/a ... pt><script type="text/javascript">$("#input-option'.$option['product_option_id'].'").css("display","none");$(".control-label").attr("for","control-label").css("display","none");$("<div id=\'choice_option_wrap\'></div>").insertAfter("#input-option'.$option['product_option_id'].'");$("#choice_option_wrap").html("<div ng-app=\'myChoiceApp\'><div ng-controller=\'myChoiceCtrl\'><label class=\'control-label\'></label><select ng-model=\'color\' ng-options=\'c for c in colors()\' class=\'form-control\'><option value=\'\'>Colour</option></select><label class=\'control-label\'></label><select ng-model=\'size\' ng-options=\'s for s in sizes()\' class=\'form-control\'><option value=\'\'>Size</option></select><div ng-repeat=\'item in items | filter:by_colour | filter:doFilter()\' class=\'myAppfilterclass\'></div></div></div>");</script>';

$total=count($choice_options);
for($i=0;$i<$total;$i++){
$arr=explode('-',$choice_options[$i]['name']);
$choice_options[$i]['size']=$arr[0];
$choice_options[$i]['colour']=$arr[1];
$choice_options[$i]['active']=true;
}
$choice_options_json= json_encode($choice_options);
?>
<script type="text/javascript"><!--
var choice_options_json= <?php echo $choice_options_json; ?>;
//alert(choice_options_json);


var myChoiceApp = angular.module('myChoiceApp',[]);

myChoiceApp.controller('myChoiceCtrl', function ($scope) {
$scope.items = <?php echo $choice_options_json; ?>;
$scope.color = '';
$scope.size = '';
$scope.colors = function () {
var colors = [];
for (var i = 0; i < $scope.items.length; i++) {
if ((!$scope.size || $scope.items.size == $scope.size) && colors.indexOf($scope.items.colour) == -1) colors.push($scope.items.colour);
}
return colors;
};

$scope.sizes = function () {
var sizes = [];
for (var i = 0; i < $scope.items.length; i++) {
if ((!$scope.color || $scope.items.colour == $scope.color) && sizes.indexOf($scope.items.size) == -1) sizes.push($scope.items.size);
}
return sizes;
}

$scope.doFilter = function () {
var filter = {};
if ($scope.color) filter.colour = $scope.color;
if ($scope.size) filter.size = $scope.size;
var singleOption = $scope.size+'-'+$scope.color;
$('#input-option<?php echo $option["product_option_id"]; ?> option:contains('+singleOption+')').prop({selected:true});
return filter;
}

});
//--></script>
<?php }} ?>
<!-- custom color size codes ends -->