Fixing the product options

public/javascripts/expressCart.js

@@ -454,15 +454,37 @@ function updateCart(element){
 function getSelectedOptions(){
     var options = {};
     $('.product-opt').each(function(){
-        if($(this).attr('name') === 'opt-'){
-            options[$(this).val().trim()] = $(this).prop('checked');
-            return;
-        }
         var optionValue = $(this).val().trim();
-        if($(this).attr('type') === 'radio'){
+        var optionLabel = $(this).attr('data-label');
-            optionValue = $('input[name="' + $(this).attr('name') + '"]:checked').val();
+        var optionName = $(this).attr('name');
+        var optionType = $(this).attr('type');
+
+        // If select option
+        if(!optionType){
+            options[optionName] = {
+                label: optionLabel,
+                name: optionName,
+                value: optionValue
+            };
+        }
+
+        // If radio option
+        if(optionType === 'radio'){
+            options[optionName] = {
+                label: optionLabel,
+                name: optionName,
+                value: $('input[name="' + optionName + '"]:checked').val()
+            };
+        }
+
+        // If checkbox option
+        if(optionType === 'checkbox'){
+            options[optionName] = {
+                label: optionLabel,
+                name: optionName,
+                value: $('input[name="' + $(this).attr('name') + '"]').is(':checked')
+            };
         }
-        options[$(this).attr('name').substring(4, $(this).attr('name').length)] = optionValue;
     });
     return options;
 }

views/themes/Cloth/cart.hbs

@@ -17,10 +17,10 @@
                         </div>
                         <div class="col-sm-12 text-left no-pad-left">
                         {{#each this.options}} 
-                            {{#if @last}} 
+                            {{#if @last}}
-                                {{@key}}: {{this}} 
+                                {{#upperFirst this.name}}{{/upperFirst}}: {{this.value}}
                                 {{else}} 
-                                {{@key}}: {{this}} / 
+                                {{#upperFirst this.name}}{{/upperFirst}}: {{this.value}} /
                             {{/if}} 
                         {{/each}}
                         </div>

views/themes/Cloth/product.hbs

@@ -33,19 +33,19 @@
                     {{#each productOptions}}
                         {{#ifCond this.optType '==' "select"}}
                             <strong>{{../this.optLabel}}</strong>
-                            <select name="opt-{{../this.optName}}" class="form-control product-opt">
+                            <select name="{{../this.optName}}" data-label="{{../this.optLabel}}" class="form-control product-opt">
                                 {{#each ../this.optOptions}}
                                     <option value="{{this}}">{{this}}</option>
                                 {{/each}}
                             </select>
                         {{/ifCond}}
                         {{#ifCond this.optType '==' "radio"}}
+                            <strong>{{../this.optLabel}}</strong>
                             {{#each ../this.optOptions}}
-                                <strong>{{../this.optLabel}}</strong>
                                 <div class="radio">
                                     <label>
-                                        <input type="radio" class="product-opt" name="opt-{{../../this.optName}}" value="{{this}}">
+                                        <input type="radio" class="product-opt" data-label="{{../../this.optLabel}}" name="{{../../this.optName}}" value="{{this}}">
-                                        {{this}}
+                                        <span class="left-pad-10">{{this}}</span>
                                     </label>
                                 </div>
                             {{/each}}
@@ -53,7 +53,8 @@
                         {{#ifCond this.optType '==' "checkbox"}}
                             <div class="checkbox">
                                 <label>
-                                    <input type="checkbox" class="product-opt" name="opt-{{../this.optName}}" value="{{../this.optName}}"><strong class="left-pad-10">{{../this.optLabel}}</strong>
+                                    <input type="checkbox" class="product-opt" data-label="{{../this.optLabel}}" name="{{../this.optName}}" value="{{../this.optName}}">
+                                    <span class="left-pad-10">{{../this.optLabel}}</span>
                                 </label>
                             </div>
                         {{/ifCond}}