Commits

jasonyeo committed 36e401a Draft

finished product page

Comments (0)

Files changed (3)

static/js/views/product.js

 
         tagName: 'div',
 
+        template: _.template( $('#product-template').html() ),
+
         initialize: function( id ) {
             console.log('Init product view');
             console.log('i got ' + id);
 
+            var aTag$ = $('a[href="#product/' + id + '"]');
+            var productModal$ = $('#product-modal');
+
             var intId = parseInt(id, 10);
-            this.model = app.Products.getProductById(intId);
+            this.model = app.Products.getProductById( intId );
+            productModal$.html('');
+            productModal$.append( this.render().el );
+
+            // trigger bootstrap's modal effect
+            aTag$.attr('href', '#product'+id);
+            aTag$.attr('data-toggle', 'modal');
+            aTag$.click();
+            aTag$.attr('href', '#product/'+id);
+            aTag$.removeAttr('data-toggle');
         },
 
         render: function() {
+            this.$el.html( this.template( this.model.toJSON() ) );
             return this;
         },
 

templates/index.html

 
         </div>
 
+
         <script type="text/template" id="product-thumbnail-template">
             <div class="span3">
-                <a href="#product/<%= Product_ID %>" role ="button" data-toggle="modal"> 
+                <a href="#product/<%= Product_ID %>" role ="button"> 
                     <img class="img-rounded" src="<%= ImageUrl %>">
                 </a>
                 <h5><%= Brand %> <%=Name%></h5>
                 <h6>$<%= Pricebuy %></h6>
             </div>
         </script>
+
+        <script type="text/template" id="product-template">
+            <div class="modal hide fade in" id="product<%= Product_ID %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                    <h3 id="myModalLabel">Product Information</h3>
+                </div>
+                <div class="modal-body">
+                    <div class="container-fluid">
+                        <div class="row-fluid">
+                            <div class="span4">
+                                <img class="img-rounded" src="<%= ImageUrl %>">
+                            </div>
+                            <div class="span8">
+                                <h5> <%= Brand %> </h5>
+                                <h6> <%= Name %> </h6>
+                                <h6> <%= Description %> </h6>
+                                <h6> Price: $<%= Pricebuy %> </h6>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
+                    <button class="btn btn-primary">Add item to cart</button>
+                </div>
+            </div>
+        </script>
         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
         <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
         <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
 
         <script src="../static/js/models/product.js"></script>
         <script src="../static/js/collections/products.js"></script>
+        <script src="../static/js/collections/cart.js"></script>
         <script src="../static/js/views/product.js"></script>
         <script src="../static/js/views/productthumbnail.js"></script>
         <script src="../static/js/views/purchase.js"></script>

templates/purchase.html

                     <i class="icon-chevron-right pull-right"></i></a></li>
                 <li><a href="#lightings"><br>Lightings
                     <i class="icon-chevron-right pull-right"></i></a></li>
-                <li><a href="#cupboards"><br>Cupboards
+                <li><a href="#"><br>Cupboards
                     <i class="icon-chevron-right pull-right"></i></a></li>
             </ul>
         </div>
     </div>
 </div>
 
-<script type="text/template" id="product-template">
-    <div class="span3">
-        <a href="#myModal" role ="button" data-toggle="modal"> 
-            <img class="img-rounded" src="http://www.placehold.it/125x125">
-        </a>
-        <h5>Product Name </h5>
-        <h6>$100 </h6>
-    </div>
-</script>
-<!--    <div class="container" style="text-align: center">
-        <div class="row">
-            <div class="span3">
-
-                <a href="#myModal" role ="button" data-toggle="modal"> 
-                    <img class="img-rounded" src="http://www.placehold.it/125x125">
-                </a>
-                <h5>Product Name </h5>
-                <h6>$100 </h6>
-
-            </div>
-            <div class="span3 ">
-                <img class="img-rounded" src="http://www.placehold.it/125x125">
-                <h5>Product Name </h5>
-                <h6>$100 </h6>
-            </div>
-            <div class="span3 ">
-                <img class="img-rounded" src="http://www.placehold.it/125x125">
-                <h5>Product Name </h5>
-                <h6>$100 </h6>
-            </div>
-        </div>
-        <div class="row">
-            <div class="span3">
-                <img class="img-rounded" src="http://www.placehold.it/125x125">
-                <h5>Product Name </h5>
-                <h6>$100 </h6>
-            </div>
-            <div class="span3 ">
-                <img class="img-rounded" src="http://www.placehold.it/125x125">
-                <h5>Product Name </h5>
-                <h6>$100 </h6>
-            </div>
-            <div class="span3 ">
-                <img class="img-rounded" src="http://www.placehold.it/125x125">
-                <h5>Product Name </h5>
-                <h6>$100 </h6>
-            </div>
-        </div>
-        <div class="row">
-            <div class="span3">
-                <img class="img-rounded" src="http://www.placehold.it/125x125">
-                <h5>Product Name </h5>
-                <h6>$100 </h6>
-            </div>
-            <div class="span3 ">
-                <img class="img-rounded" src="http://www.placehold.it/125x125">
-                <h5>Product Name </h5>
-                <h6>$100 </h6>
-            </div>
-            <div class="span3 ">
-                <img class="img-rounded" src="http://www.placehold.it/125x125">
-                <h5>Product Name </h5>
-                <h6>$100 </h6>
-            </div>
-        </div>
-    </div> -->
+<div class="container" id="product-modal">
+</div>