almost finished new design on product page / reproduced bug with amount not updating

This commit is contained in:
Senad Uka
2015-05-13 16:32:53 +02:00
parent fe452d359f
commit 49dd10acbc
16 changed files with 158 additions and 234 deletions

View File

@@ -1,6 +1,7 @@
var React = require('react');
var CartStore = require('../../stores/cartStore.js');
var CartActions = require('../../actions/cartActions.js');
var Globals = require('../../globals');
@@ -12,25 +13,23 @@ var AddToCart = React.createClass({
render: function() {
var itemCount = this.state.item.get('count');
var itemCount = this.state.count;
var moreThanZeroItems = (
var amountAndAddButton = (
<div className="row-fluid add-to-cart">
<div className="span12">
<div style={buttonHolderStyle}><button className="btn btn-default" onClick={this._onDecreaseClick}>-</button></div>
<div style={buttonHolderStyle}><button className="btn white_button" onClick={this._onDecreaseClick}>-</button></div>
<div style={buttonHolderStyle}> <div className="add-to-cart-count">{ itemCount }</div> </div>
<div style={buttonHolderStyle}><button className="btn btn-success" onClick={this._onIncreaseClick}>+ Dodaj</button></div>
<div style={buttonHolderStyle}><button className="btn white_button" onClick={this._onIncreaseClick}>+</button></div>
</div>
<div>
<div style={buttonHolderStyle}><button className="btn mybutton" onClick={this._addToCartClick}>Dodaj na popis za kupovinu</button></div>
</div>
</div>
);
var zeroItems = (<div className="row-fluid add-to-cart">
<div className="span12">
<div style={buttonHolderStyle}><button className="btn btn-success" onClick={this._onIncreaseClick}>Kupi</button></div>
</div>
</div> );
return (itemCount <= 0) ? zeroItems : moreThanZeroItems;
return amountAndAddButton;
},
// Add change listeners to stores
@@ -42,23 +41,38 @@ var AddToCart = React.createClass({
getInitialState: function() {
var itemInCart = CartStore.getStateFor(this.props.itemId);
return { item: itemInCart }
return {
item: itemInCart,
count: 0
}
},
_onChange: function () {
if (this.isMounted()) {
var item = CartStore.getStateFor(this.props.itemId);
this.setState({ item: item });
this.setState({ item: item, count: 0 });
}
},
_onIncreaseClick: function () {
CartActions.addItem(this.props.itemId);
//CartActions.addItem(this.props.itemId);
if (this.state.count < Globals.MaxNumberOfItemsToBeAdded ) {
this.state.count = this.state.count + 1;
this.setState(this.state);
}
},
_onDecreaseClick: function () {
CartActions.takeItemOut(this.props.itemId);
// CartActions.takeItemOut(this.props.itemId);
if (this.state.count > 0) {
this.state.count = this.state.count - 1;
this.setState(this.state);
}
},
_addToCartClick: function () {
CartActions.setItemCount(this.props.itemId, this.state.count);
},
componentWillUnmount: function () {

View File

@@ -16,22 +16,19 @@ var ItemWithDetailsPage = React.createClass({
return (
<div className="item-with-details row-fluid center">
<div className="col-md-5">
<Carousel images={this.state.images}
selected={this.state.currentImage}
onClickLeft={this.onClickLeft}
onClickRight={this.onClickRight}
onSelectImage={this.onSelectImage} />
<AddToCart itemId={this.state.item.get('id')} />
<div className="col-md-5 col-md-offset-2">
<img src={this.state.firstImage} width="100%" />
</div>
<div className="col-md-7">
<h3> {this.state.item.get('name')}</h3>
<div className="col-md-5">
<div className='item_brand_name'> {this.state.item.get('brand').name}</div>
<div className='item_name'> {this.state.item.get('name')}</div>
<div>
<div className='h4'> {this.state.item.get('brand').name}</div>
<div className='h4'> {this.state.item.get('list_price')} KM</div>
<div className='h5'>{this.state.item.get('pricePerUnit')}</div>
<div className='item_price'> {this.state.item.get('list_price')} KM</div>
<div>Količina</div>
<div> <AddToCart itemId={this.state.item.get('id')} /></div>
<div> {this.state.item.get('description')}</div>
</div>