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

cart page bearable on mobile

Browse Source
This commit is contained in:
Senad Uka
2015-06-21 12:24:18 +02:00
parent a158c76789
commit 52a03f3334
4 changed files with 250 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
front-api/app.rb
View File

@@ -16,7 +16,7 @@ before do
content_type :json content_type :json
# TODO: before running to production change this so that only specific # TODO: before running to production change this so that only specific
# domain is allowed # domain is allowed
headers 'Access-Control-Allow-Origin' => 'http://localhost:3001', headers 'Access-Control-Allow-Origin' => 'http://192.168.1.37:3001',
'Access-Control-Allow-Methods' => ['OPTIONS', 'GET', 'POST','PUT'], 'Access-Control-Allow-Methods' => ['OPTIONS', 'GET', 'POST','PUT'],
'Access-Control-Allow-Headers' => 'Origin, X-Requested-With, Content-Type, Accept', 'Access-Control-Allow-Headers' => 'Origin, X-Requested-With, Content-Type, Accept',
'Access-Control-Expose-Headers' => 'X-Total-Count', 'Access-Control-Expose-Headers' => 'X-Total-Count',

2
front-ui/Gruntfile.js
View File

@@ -47,7 +47,7 @@ module.exports = function(grunt) {
dev: { dev: {
options: { options: {
variables: { variables: {
apiEndpoint: 'http://localhost:4567' apiEndpoint: 'http://192.168.1.37:4567'
} }
} }
}, },

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

@@ -23,14 +23,102 @@ var CartPage = React.createClass({
if(!counts) return false; if(!counts) return false;
var count = counts[i.get('id')].get('count'); var count = counts[i.get('id')].get('count');
return count > 0 || count === ""; return count > 0 || count === "";
}).map(function (i) { }); // tableDetails
var displayedItemsDesktop = displayedItems.map( this.desktopDetails );
var displayedItemsMobile = displayedItems.map( this.mobileDetails );
var deliveryDestination = (<span></span>);
if (this.state.destinationValid) {
deliveryDestination = (
<div>
Na adresu {this.state.deliveryDestination.name},
</div>
)
}
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-left">
<button className="mybutton" onClick={this._onOrderClick}>Završi narudžbu</button>
</div>
</div>
</div>
);
var buySomethingMessage = (<div></div>);
var content;
if (displayedItems.length <= 0) {
cartTotal = (<div></div>)
buySomethingMessage = (<div>
<div className="text-primary">Nemate ni jedan artikal u vašoj korpi. Kada vidite nešto što vam se sviđa - pritisnite dugme UBACI U KORPU pored artikla kako biste ga dodali u korpu.</div>
<div>Evo nekoliko artikala koje vam možemo preporučiti: </div>
<AllItemsInGroup groupId={Globals.ItemGroupIdOfEmptyCartPage} />
</div>)
content = buySomethingMessage;
} else {
content = (<div>
<table className="table">
<thead className="hidden-md hidden-sm hidden-xs">
<tr className="text-center">
<th className="col-lg-2"></th>
<th>Proizvod</th>
<th>Cijena</th>
<th className="col-lg-1">Količina</th>
<th className="hidden-md hidden-sm hidden-xs">Ukupna cijena</th>
<th></th>
</tr>
</thead>
<tbody>
{displayedItemsMobile}
{displayedItemsDesktop}
</tbody>
</table>
{buySomethingMessage}
{cartTotal}
</div>)
}
return (
<div className="col-lg-12">
<div className="row">
<div className="col-lg-12">
<LinkBanner locationName="checkoutPage"/>
</div>
</div>
<div className="row">
<div className="col-lg-12">
<div className="cart-title">KORPA</div>
{content}
</div>
</div>
</div>
);
},
desktopDetails: function (i) {
var self = this;
var counts = this.state.itemCounts;
var count = counts[i.get('id')].get('count'); var count = counts[i.get('id')].get('count');
var commission = counts[i.get('id')].get('commission'); var commission = counts[i.get('id')].get('commission');
var price = i.get('list_price'); var price = i.get('list_price');
var firstImage = i.get('multi_media_descriptions')[0]; 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" } ; 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 ( return (
<tr key={i.get('id') } className="cart-table-row"> <tr key={i.get('id') } className="cart-table-row hidden-md hidden-xs hidden-sm">
<td className='text-center'> <td className='text-center'>
<img style={{maxWidth: '90px', maxHeight: '90px'}} src={firstImage.url} alt="product image"/> <img style={{maxWidth: '90px', maxHeight: '90px'}} src={firstImage.url} alt="product image"/>
</td> </td>
@@ -68,86 +156,50 @@ var CartPage = React.createClass({
<button className="btn btn-default" onClick={self._onTakeItemOut.bind(self, i.get('id'))}>Ukloni iz korpe</button> <button className="btn btn-default" onClick={self._onTakeItemOut.bind(self, i.get('id'))}>Ukloni iz korpe</button>
</td> </td>
</tr>) </tr>)
}); },
var deliveryDestination = (<span></span>);
if (this.state.destinationValid) {
deliveryDestination = (
<div>
Na adresu {this.state.deliveryDestination.name},
</div>
)
}
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="mybutton" onClick={this._onOrderClick}>Završi narudžbu</button>
</div>
</div>
</div>
);
var buySomethingMessage = (<div></div>);
var content;
if (displayedItems.length <= 0) {
cartTotal = (<div></div>)
buySomethingMessage = (<div>
<div className="text-primary">Nemate ni jedan artikal u vašoj korpi. Kada vidite nešto što vam se sviđa - pritisnite dugme UBACI U KORPU pored artikla kako biste ga dodali u korpu.</div>
<div>Evo nekoliko artikala koje vam možemo preporučiti: </div>
<AllItemsInGroup groupId={Globals.ItemGroupIdOfEmptyCartPage} />
</div>)
content = buySomethingMessage;
} else {
content = (<div>
<table className="table">
<thead>
<tr className="text-center">
<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>)
}
mobileDetails: function (i) {
var self = this;
var counts = this.state.itemCounts;
var count = counts[i.get('id')].get('count');
var commission = counts[i.get('id')].get('commission');
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 ( return (
<tr key={i.get('id') } className="cart-table-row hidden-lg">
<td className="cart-price-bigger">
<p> {i.get('brand').name}</p>
<p>
{i.get('name')}
</p>
<p>
{ Globals.FormatCurrency(price) }
<div className="cart-commision-tiny text-left">{ Globals.FormatPercentage(commission) } RUC</div>
<div className="col-lg-12"> </p>
<div className="row"> </td>
<div className="col-lg-12"> <td className="col-sm-2 col-xs-2 col-md-2">
<LinkBanner locationName="checkoutPage"/> <select style={{textAlign: 'center'}} value={count}
</div> onChange={self._onQuantityChange.bind(self, i.get('id'))}
</div> >
<div className="row">
<div className="col-lg-12">
<div className="cart-title">KORPA</div>
{content}
</div>
</div>
</div>
);
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td>
<button onClick={self._onTakeItemOut.bind(self, i.get('id'))}>X</button>
</td>
</tr>)
}, },
// Add change listeners to stores // Add change listeners to stores

227
front-ui/build/configured/ribica.bundle.js
View File

File diff suppressed because one or more lines are too long