98 lines
3.0 KiB
JavaScript
98 lines
3.0 KiB
JavaScript
var React = require('react'),
|
|
Carousel = require('../shared/carousel'),
|
|
Traits = require('../items/traits'),
|
|
ItemDetailsActions = require('../../actions/itemDetailsActions'),
|
|
NavigationStore = require('../../stores/navigationStore'),
|
|
ItemDetailsStore = require('../../stores/itemDetailsStore'),
|
|
AddToCart = require('../cart/addToCart');
|
|
|
|
var Router = require('react-router');
|
|
var Globals = require('../../globals');
|
|
|
|
|
|
var ItemWithDetailsPage = React.createClass({
|
|
|
|
render: function() {
|
|
|
|
return (
|
|
|
|
<div className="item-with-details row-fluid center">
|
|
<div className="col-md-5 col-md-offset-2 item_image col-sm-offset-2 col-sm-3">
|
|
<img src={this.state.firstImage} width="100%" />
|
|
</div>
|
|
|
|
<div className="col-md-5 col-sm-7 center">
|
|
<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='item_price'> {Globals.FormatCurrency(this.state.item.get('list_price'))}</div>
|
|
|
|
<div>Količina</div>
|
|
|
|
<div> <AddToCart item={this.state.item} /></div>
|
|
</div>
|
|
|
|
</div>
|
|
<div className="item-with-details row-fluid center">
|
|
<div className="col-lg-offset-2 col-lg-10 hidden-md hidden-sm hidden-xs">
|
|
<div className="item_description_tab">Opis proizvoda</div>
|
|
<div className="item_description_tab_area"> </div>
|
|
<div className="item_description_text">{this.state.item.get('description')}</div>
|
|
</div>
|
|
<div className="col-xs-offset-2 col-xs-10 hidden-lg">
|
|
<h2>Opis proizvoda: </h2>
|
|
<div> </div>
|
|
<p className="lead">{this.state.item.get('description')}</p>
|
|
</div>
|
|
<div className="col-xs-offset-2 col-xs-10">
|
|
<Traits traits={this.state.item.get('traits')} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
},
|
|
|
|
// Add change listeners to stores
|
|
componentDidMount: function() {
|
|
ItemDetailsStore.addChangeListener(this._onChange);
|
|
NavigationStore.addChangeListener(this._onChange);
|
|
ItemDetailsActions.loadItemWithDetails();
|
|
},
|
|
|
|
componentWillUnmount: function () {
|
|
ItemDetailsStore.removeChangeListener(this._onChange);
|
|
NavigationStore.removeChangeListener(this._onChange);
|
|
},
|
|
|
|
|
|
onClickLeft: function() {
|
|
ItemDetailsActions.previousCarouselImage();
|
|
|
|
},
|
|
|
|
onClickRight: function() {
|
|
ItemDetailsActions.nextCarouselImage();
|
|
},
|
|
|
|
onSelectImage: function(i) {
|
|
ItemDetailsActions.selectCarouselImage(i);
|
|
},
|
|
|
|
_onChange: function () {
|
|
|
|
if (this.isMounted()) {
|
|
this.setState(ItemDetailsStore.getState());
|
|
}
|
|
|
|
},
|
|
|
|
getInitialState: function () {
|
|
return ItemDetailsStore.getState();
|
|
}
|
|
|
|
});
|
|
|
|
|
|
module.exports = ItemWithDetailsPage;
|