started with cart design

removing of items from cart now possible

front-ui/app/actions/cartActions.js

@@ -13,7 +13,7 @@ var CartActions = {
     addNItems: function(item, count) {
         AppDispatcher.handleAction({
             actionType: CartConstants.ADD_N_ITEMS,
-            item: item, 
+            item: item,
             count: count
         });
     },
@@ -42,7 +42,14 @@ var CartActions = {
         AppDispatcher.handleAction({
             actionType: CartConstants.CONFIRM_DELIVERY,
         });
+    },
+
+    takeItemOut: function(id) {
+      AppDispatcher.handleAction({
+          actionType: CartConstants.TAKE_ITEM_OUT,
+          itemId: id
+      });
     }
 };
 
-module.exports = CartActions;
+module.exports = CartActions;

front-ui/app/components/cart/cartPage.js

@@ -7,32 +7,52 @@ var React = require('react'),
     Globals = require('../../globals'),
     LinkBanner = require('../linkBanner/linkBanner'),
     CartTotal = require('./cartTotal');
-    
+
 
 var Router = require('react-router');
 
-
 var CartPage = React.createClass({
-
+    _onTakeItemOut: function(itemId) {
+      CartActions.takeItemOut(itemId);
+    },
     render: function() {
-
+      var counts = this.state.itemCounts;
-      var counts = this.state.itemCounts; 
+      var self = this;
-
+      var displayedItems = this.state.items.filter(function(i) {
-      var displayedItems = this.state.items.map(function (i) {
+        if(!counts) return false;
-
+         var count = counts[i.get('id')].get('count');
+         return count > 0;
+        }).map(function (i) {
         var count = counts[i.get('id')].get('count');
         var price = i.get('list_price');
+        var firstImage = i.get('multi_media_descriptions')[0];
+        firstImage = firstImage || { resized_url:  "https://res.cloudinary.com/lfvt7ps2n/image/upload/c_fit,h_172,w_226/v1421732950/http_www.asms.ru_bitrix_templates_main_images_nophoto_irnofq.png" } ;
         return (
-      
+          <tr key={i.get('id')}>
-           <div key={i.get('id')} className="row cart-items">
+            <td>
-              <div className="col-md-3"><SingleItem item={i} hidePrice={true}/> </div>
+              <img style={{maxWidth: '90px', maxHeight: '90px'}} src={firstImage.url} alt="product image"/>
-              <div className="col-md-2"> { Globals.FormatCurrency(price) }</div>              
+            </td>
-              <div className="col-md-3"> 
-                42 </div>        
-              <div className="col-md-2"> { Globals.FormatCurrency(count * price) }</div>
-           </div>
 
-          )
+            <td>
+              <p> {i.get('brand').name}</p>
+              <p>
+                {i.get('name')}
+              </p>
+               </td>
+            <td>{ Globals.FormatCurrency(price) }</td>
+            <td>
+              <input style={{textAlign: 'center'}} className="form-control qty-box" type='text' value={count}></input>
+
+            </td>
+            <td>
+                { Globals.FormatCurrency(count * price) }
+
+
+            </td>
+            <td>
+              <button onClick={self._onTakeItemOut.bind(self, i.get('id'))}>Ukloni iz korpe</button>
+            </td>
+          </tr>)
       });
 
       var deliveryDestination = (<span></span>);
@@ -40,22 +60,29 @@ var CartPage = React.createClass({
       if (this.state.destinationValid) {
         deliveryDestination = (
             <div>
-               Na adresu {this.state.deliveryDestination.name}, 
+               Na adresu {this.state.deliveryDestination.name},
-
             </div>
-
           )
-      } 
+      }
 
-      
 
-      var cartTotal = ( 
+
-        <div className="row cart-total">        
+      var cartTotal = (
-           <CartTotal items={this.state.items} itemCounts={this.state.itemCounts} deliveryCosts={this.state.deliveryCosts}/> 
+        <div>
-           <div className="col-md-1 span1">
+
-              <button className="btn btn-warning" onClick={this._onOrderClick}>Izgleda OK</button>
+        <div className="row cart-total">
+          <div className="col-lg-6">Ukupno</div>
+           <div className="col-lg-6">
+             <CartTotal items={this.state.items} itemCounts={this.state.itemCounts} deliveryCosts={this.state.deliveryCosts}/>
            </div>
         </div>
+        <div className="row">
+           <div className="col-lg-12 pull-right">
+              <button className="btn btn-warning" onClick={this._onOrderClick}>Završi narudžbu</button>
+           </div>
+
+        </div>
+        </div>
       );
 
       var buySomethingMessage = (<div></div>);
@@ -64,20 +91,35 @@ var CartPage = React.createClass({
         cartTotal = (<div></div>)
         buySomethingMessage = (<div>Nemate ni jedan artikal u vašoj korpi. Kada vidite nešto što vam se sviđa - pritisnite dugme KUPI pored artikla kako biste ga dodali u korpu. </div>)
 
-      }; 
+      };
+
 
 
- 
       return (
-     
+
-        <div className="cart-page center">
+        <div className="col-lg-12">
           <LinkBanner locationName="thankYouPage" />
-           {cartTotal}
+           <div className="cart-title">KORPA</div>
-           {displayedItems} 
+
+           <table className="table">
+             <thead>
+               <tr>
+                 <th className="col-lg-2"></th>
+                 <th>Proizvod</th>
+                 <th>Cijena</th>
+                 <th className="col-lg-1">Količina</th>
+                 <th>Ukupna cijena</th>
+                 <th></th>
+               </tr>
+             </thead>
+             <tbody>
+               {displayedItems}
+             </tbody>
+           </table>
            {buySomethingMessage}
            {cartTotal}
         </div>
-        );       
+        );
 
     },
 
@@ -104,8 +146,7 @@ var CartPage = React.createClass({
     getInitialState: function () {
       return CartStore.getWholeCartState();
     }
-
 });
 
 
-module.exports = CartPage; 
+module.exports = CartPage;

front-ui/app/css/main.css

@@ -493,6 +493,12 @@ text-decoration: none;
   margin-left: 5px;
 }
 
+.qty-box {
+  background-color: #efefef;
+  border-radius: 0px;
+  border: 1px solid #cccccc;
+}
+
 .left-inner-addon {
     position: relative;
 }
@@ -504,3 +510,8 @@ text-decoration: none;
     padding: 10px 12px;
     pointer-events: none;
 }
+
+.cart-title {
+  font-size: 29px;
+  color: #06c3c3;
+}

front-ui/app/stores/cartStore.js

@@ -29,7 +29,7 @@ var _cartDataLoadCalled = false;
 
 var loadCart = function() {
 
-    states = {}; 
+    states = {};
     _itemsInCart.fetch({
         success: function() {
             states = {}
@@ -46,7 +46,7 @@ var loadCart = function() {
             CartActions.dataLoaded();
         }
     });
-   
+
      _deliveryDestination.fetch({
             success: function() {
                 validateDeliveryDestinationForm();
@@ -56,8 +56,8 @@ var loadCart = function() {
     });
 
      _cartDataLoadCalled = true;
- 
+
-}; 
+};
 
 
 var fetchPlace = function() {
@@ -82,8 +82,8 @@ var saveCartStateForItem = function(itemId) {
     });
 };
 
-/* need it for delete - will delete it later 
+/* need it for delete - will delete it later
-
+*/
 var takeItemOut = function(itemId) {
 
     var state = states[itemId] || new ItemInCart({
@@ -91,13 +91,14 @@ var takeItemOut = function(itemId) {
         count: 0
     })
     if (state.get('count') > 0) {
-        state.set('count', state.get('count') - 1);
+      // state.set('count', state.get('count') - 1);
+        state.set('count', 0);
     }
+
     states[itemId] = state;
     saveCartStateForItem(itemId);
 };
 
-*/
 
 var addNItems = function(item, count) {
 
@@ -108,7 +109,7 @@ var addNItems = function(item, count) {
     })
 
     _itemsForDisplay.add(item);
-    
+
     state.set('count', state.get('count') + count);
 
     states[itemId] = state;
@@ -268,11 +269,6 @@ AppDispatcher.register(function(payload) {
         case CartConstants.LOAD_CART_CONTENTS:
             loadCart();
             break;
-
-        case CartConstants.ADD_ITEM:
-            addItem(action.itemId);
-            break;
-
         case CartConstants.TAKE_ITEM_OUT:
             takeItemOut(action.itemId);
             break;
@@ -303,4 +299,4 @@ AppDispatcher.register(function(payload) {
 
 });
 
-module.exports = CartStore;
+module.exports = CartStore;