senaduka/old-ribica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

started with cart design

Browse Source 
removing of items from cart now possible
This commit is contained in:
Edin Dazdarevic
2015-05-26 18:08:03 +02:00
parent 850e4a267c
commit 8bed4eb3f7
4 changed files with 108 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
front-ui/app/actions/cartActions.js
View File

@@ -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;

113
front-ui/app/components/cart/cartPage.js
View File

@@ -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 (
<div key={i.get('id')} className="row cart-items">
<div className="col-md-3"><SingleItem item={i} hidePrice={true}/> </div>
<div className="col-md-2"> { Globals.FormatCurrency(price) }</div>
<div className="col-md-3">
42 </div>
<div className="col-md-2"> { Globals.FormatCurrency(count * price) }</div>
</div>
<tr key={i.get('id')}>
<td>
<img style={{maxWidth: '90px', maxHeight: '90px'}} src={firstImage.url} alt="product image"/>
</td>
)
<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">
<CartTotal items={this.state.items} itemCounts={this.state.itemCounts} deliveryCosts={this.state.deliveryCosts}/>
<div className="col-md-1 span1">
<button className="btn btn-warning" onClick={this._onOrderClick}>Izgleda OK</button>
var cartTotal = (
<div>
<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}
{displayedItems}
<div className="cart-title">KORPA</div>
<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;

11
front-ui/app/css/main.css
View File

@@ -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;
}

26
front-ui/app/stores/cartStore.js
View File

@@ -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;