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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,6 +24,14 @@ var CartActions = {
});
},
setItemCount: function(itemId, count) {
AppDispatcher.handleAction({
actionType: CartConstants.SET_ITEM_COUNT,
itemId: itemId,
count: count
});
},
dataLoaded: function() {
AppDispatcher.handleAction({
actionType: CartConstants.CART_DATA_LOADED

42
front-ui/app/components/cart/addToCart.js
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 () {

23
front-ui/app/components/items/itemWithDetailsPage.js
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>

6
front-ui/app/constants/cartConstants.js
View File

@@ -4,11 +4,11 @@ var keyMirror = require('react/lib/keyMirror');
module.exports = keyMirror({
LOAD_CART_CONTENTS: null,
ADD_ITEM: null,
// because REMOVE_ITEM could be used to completely remove item
// and not just decrease count by 1
TAKE_ITEM_OUT: null ,
CART_DATA_LOADED: null,
SAVE_CART_STATE_FOR_ITEM: null,
CHANGE_DELIVERY_DESTINATION_PROPERTY: null,
CONFIRM_DELIVERY: null
CONFIRM_DELIVERY: null,
SET_ITEM_COUNT: null,
REMOVE_ITEM: null
});

19
front-ui/app/css/items.css
View File

@@ -32,3 +32,22 @@
text-align: center;
padding-right: 5px;
}
.item_name {
font-size: 16px;
}
.item_brand_name {
font-size: 24px;
text-transform: uppercase;
}
.item_price {
font-size: 36px;
padding-top: 36px;
padding-bottom: 36px;
}

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

@@ -464,3 +464,16 @@ text-decoration: none;
.error-message {
color: red;
}
.white_button{
background-color: #f9f9f9;
width: 40px;
height: 40px;
padding-bottom: 7px;
display: block;
border-radius: 1px;
margin-top: 8px;
border: solid #cccccc 1px;
color: #4d4d4d !important;
font-size: 16px;
}

3
front-ui/app/globals.js
View File

@@ -5,5 +5,6 @@ module.exports = {
FormatCurrency: function(amount_s) {
var amount = parseFloat(amount_s);
return ( amount.toFixed(2) + " KM" )
}
},
MaxNumberOfItemsToBeAdded: 1000
};

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

@@ -101,6 +101,19 @@ var takeItemOut = function(itemId) {
saveCartStateForItem(itemId);
};
var setItemCount = function(itemId, count) {
var state = states[itemId] || new ItemInCart({
item_id: itemId,
count: 0
})
console.log("Old state", state.get('count'));
state.set('count', state.get('count') + count);
console.log("New state", state.get('count'));
states[itemId] = state;
saveCartStateForItem(itemId);
}
var changeDeliveryDestinationProperty = function(property, value) {
_deliveryDestination.set(property, value);
@@ -274,6 +287,9 @@ AppDispatcher.register(function(payload) {
case CartConstants.CONFIRM_DELIVERY:
saveDeliveryDestination();
break;
case CartConstants.SET_ITEM_COUNT:
setItemCount(action.itemId, action.count);
break;
default:
return true;
}

5
front-ui/app/stores/itemDetailsStore.js
View File

@@ -76,12 +76,13 @@ var ItemWithDetailsStore = _.extend({}, EventEmitter.prototype, {
getState: function() {
var firstImage = _images[0] || "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 {
item: _itemWithDetails,
images: _images,
currentImage: _currentImage,
count: _count
count: _count,
firstImage: firstImage
}
},

65
front-ui/app/stores/itemStore.js
View File

@@ -53,33 +53,34 @@ var fetchItemWithDetails = function() {
}
var fetchItemsByCategory = function(categoryId, offset, limit, query) {
//var items = _itemsByCategory;
var items = new ItemCollection();
items.clearFilter();
items.setClassificationType(2);
items.setClassificationId(categoryId);
items.setLimit(limit);
items.setOffset(offset);
//var items = _itemsByCategory;
var items = new ItemCollection();
items.clearFilter();
items.setClassificationType(2);
items.setClassificationId(categoryId);
items.setLimit(limit);
items.setOffset(offset);
for(var key in query) {
if (query.hasOwnProperty(key) && key != 'limit' && key !='offset') {
items.addFilter(key, query[key]);
for (var key in query) {
if (query.hasOwnProperty(key) && key != 'limit' && key != 'offset') {
items.addFilter(key, query[key]);
}
}
}
items.fetch({
success: function(collection, response, options) {
var total = options.xhr.getResponseHeader('x-total-count');
items.setTotalCount(total);
items.fetch({
success: function(collection, response, options) {
var total = options.xhr.getResponseHeader('x-total-count');
items.setTotalCount(total);
ItemStore.emitChange();
}});
ItemStore.emitChange();
}
});
_itemsByCategory = items;
_itemsByCategory = items;
};
var fetchBestSellingItemsForSection = function(sectionId) {
console.log('getting section', sectionId);
console.log('getting section', sectionId);
var items = _bestSellingForSection;
items.setClassificationType(1);
items.setClassificationId(sectionId);
@@ -87,15 +88,15 @@ var fetchBestSellingItemsForSection = function(sectionId) {
items.setOffset(0);
items.fetch({
success: function() {
ItemStore.emitChange();
}
success: function() {
ItemStore.emitChange();
}
});
};
var fetchBestSellingItemsForGroup = function(groupId) {
console.log('getting group', groupId);
console.log('getting group', groupId);
var items = _bestSellingForGroup;
items.setClassificationType(4);
items.setClassificationId(groupId);
@@ -103,9 +104,9 @@ var fetchBestSellingItemsForGroup = function(groupId) {
items.setOffset(0);
items.fetch({
success: function() {
ItemStore.emitChange();
}
success: function() {
ItemStore.emitChange();
}
});
};
@@ -113,19 +114,19 @@ var fetchBestSellingItemsForGroup = function(groupId) {
// Extend ItemStore with EventEmitter to add eventing capabilities
var ItemStore = _.extend({}, EventEmitter.prototype, {
getItemsForCategory: function() {
return _itemsByCategory;
},
getItemsForCategory: function() {
return _itemsByCategory;
},
getBestSellingForSection: function() {
return _bestSellingForSection;
return _bestSellingForSection;
},
// item with details
getLoadedItemWithDetails: function() {
return _itemWithDetails;
},
getItemsForGroup: function () {
getItemsForGroup: function() {
return _bestSellingForGroup;
},
@@ -190,4 +191,4 @@ AppDispatcher.register(function(payload) {
});
module.exports = ItemStore;
module.exports = ItemStore;

10
front-ui/package.json
View File

@@ -9,21 +9,21 @@
"author": "",
"license": "BSD-2-Clause",
"devDependencies": {
"Backbone.Mutators": "~0.4.4",
"browserify": "~8.1.0",
"events": "^1.0.2",
"flux": "^2.0.1",
"grunt": "~0.4.5",
"grunt": "^0.4.5",
"grunt-browserify": "~3.2.1",
"grunt-cli": "~0.1.13",
"grunt-config": "~0.2.2",
"grunt-contrib-concat": "~0.5.0",
"grunt-contrib-connect": "~0.9.0",
"grunt-contrib-uglify": "~0.7.0",
"grunt-contrib-watch": "~0.6.1",
"grunt-replace": "~0.8.0",
"reactify": "~0.17.1",
"underscore": "^1.7.0",
"Backbone.Mutators": "~0.4.4",
"grunt-config": "~0.2.2",
"grunt-replace": "~0.8.0"
"underscore": "^1.7.0"
},
"dependencies": {
"react": "~0.12.2",