From 8bed4eb3f7652a8bb6bc57c506ba07a98ee63a64 Mon Sep 17 00:00:00 2001 From: Edin Dazdarevic Date: Tue, 26 May 2015 18:08:03 +0200 Subject: [PATCH] started with cart design removing of items from cart now possible --- front-ui/app/actions/cartActions.js | 11 ++- front-ui/app/components/cart/cartPage.js | 113 +++++++++++++++-------- front-ui/app/css/main.css | 11 +++ front-ui/app/stores/cartStore.js | 26 +++--- 4 files changed, 108 insertions(+), 53 deletions(-) diff --git a/front-ui/app/actions/cartActions.js b/front-ui/app/actions/cartActions.js index d53b19f..9e92056 100644 --- a/front-ui/app/actions/cartActions.js +++ b/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; \ No newline at end of file +module.exports = CartActions; diff --git a/front-ui/app/components/cart/cartPage.js b/front-ui/app/components/cart/cartPage.js index f25a1b3..307217f 100644 --- a/front-ui/app/components/cart/cartPage.js +++ b/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 displayedItems = this.state.items.map(function (i) { - + var counts = this.state.itemCounts; + var self = this; + var displayedItems = this.state.items.filter(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 ( - -
-
-
{ Globals.FormatCurrency(price) }
-
- 42
-
{ Globals.FormatCurrency(count * price) }
-
+ + + product image + - ) + +

{i.get('brand').name}

+

+ {i.get('name')} +

+ + { Globals.FormatCurrency(price) } + + + + + + { Globals.FormatCurrency(count * price) } + + + + + + + ) }); var deliveryDestination = (); @@ -40,22 +60,29 @@ var CartPage = React.createClass({ if (this.state.destinationValid) { deliveryDestination = (
- Na adresu {this.state.deliveryDestination.name}, - + Na adresu {this.state.deliveryDestination.name},
- ) - } + } - - var cartTotal = ( -
- -
- + + var cartTotal = ( +
+ +
+
Ukupno
+
+
+
+
+ +
+ +
+
); var buySomethingMessage = (
); @@ -64,20 +91,35 @@ var CartPage = React.createClass({ cartTotal = (
) buySomethingMessage = (
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.
) - }; + }; + - return ( - -
+ +
- {cartTotal} - {displayedItems} +
KORPA
+ + + + + + + + + + + + + + {displayedItems} + +
ProizvodCijenaKoličinaUkupna cijena
{buySomethingMessage} {cartTotal}
- ); + ); }, @@ -104,8 +146,7 @@ var CartPage = React.createClass({ getInitialState: function () { return CartStore.getWholeCartState(); } - }); -module.exports = CartPage; +module.exports = CartPage; diff --git a/front-ui/app/css/main.css b/front-ui/app/css/main.css index 69fd122..b45565d 100644 --- a/front-ui/app/css/main.css +++ b/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; +} diff --git a/front-ui/app/stores/cartStore.js b/front-ui/app/stores/cartStore.js index e099c09..7759b59 100644 --- a/front-ui/app/stores/cartStore.js +++ b/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; \ No newline at end of file +module.exports = CartStore;