This commit is contained in:
Senad Uka
2015-11-14 04:39:05 +01:00
parent c5fd654f5f
commit 82d0195530
4 changed files with 275 additions and 306 deletions

View File

@@ -7,6 +7,7 @@ var React = require('react'),
Globals = require('../../globals'),
CartTotal = require('./cartTotal'),
LinkBanner = require('../linkBanner/linkBanner'),
PaymentSelect = require('../payment/paymentSelect'),
RibicaFormError = require('../shared/ribicaFormError');
@@ -17,6 +18,13 @@ var CheckoutPage = React.createClass({
render: function() {
var choosePayment = (
<div>
Plaćanje: <br />
<PaymentSelect />
</div>
);
var supportedPlaceOptions = CartStore.getSupportedPlaces().map ( function (p) { return (<option value={p.code}>{p.placeLabel}</option>)});
var content = (
@@ -87,11 +95,18 @@ var CheckoutPage = React.createClass({
Ukupno: <CartTotal items={this.state.items} itemCounts={this.state.itemCounts} deliveryCosts={this.state.deliveryCosts} />
</span>
</div>
<div>
{choosePayment}
</div>
<div><button id="order" name="order" className="mybutton" disabled={!this.state.isDeliveryDestinationValid} onClick={this._onOrderClick}>Završi narudžbu</button></div>
</div>
</div>
</fieldset>
</div>
</div>
);
@@ -118,7 +133,8 @@ var CheckoutPage = React.createClass({
<div> </div>
<div></div>
</div>
</div>
</div>
{choosePayment}
</div>);
}

View File

@@ -0,0 +1,26 @@
var React = require('react');
var ItemActions = require('../../actions/itemActions');
var NavigationActions = require('../../actions/navigationActions');
var NavigationStore = require('../../stores/navigationStore');
var Globals = require('../../globals');
var Router = require('react-router');
var PaymentSelect = React.createClass({
render: function() {
return (
<div className="payment_select">
<input name="payment_method" type="radio" value="credit_card" defaultChecked="checked" className="js-payment-method radio-input" id="pay-by-cod" />
<label for="pay-by-credit-card" className="radio-label">
Gotovinom (prilikom preuzimanja robe)
</label>
<input name="payment_method" type="radio" value="paypal" className="js-payment-method radio-input" id="pay-by-credit-card" />
<label for="pay-with-paypal" className="radio-label">
Kreditnom / debitnom karticom
</label>
</div>);
}
});
module.exports = PaymentSelect;

View File

@@ -1,95 +1,77 @@
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300italic,300,100italic,100,400italic,500,500italic,700italic,700,900,900italic);
/* site */
html {
overflow-y: scroll;
overflow-y: scroll;
}
body{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813560/bg_prp6pz.jpg") fixed 100% 100% ;
background-size: cover ;
background-position: center ;
background-repeat: no-repeat;
font-family: 'Roboto', sans-serif;
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813560/bg_prp6pz.jpg") fixed 100% 100% ;
background-size: cover ;
background-position: center ;
background-repeat: no-repeat;
font-family: 'Roboto', sans-serif;
}
#left-nave {
background: blue;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 250px;
}
.beba{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/beba-bg_wip7kj.png");
background-size: cover;
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/beba-bg_wip7kj.png");
background-size: cover;
}
html, body { height: 100%; width: 100%; margin: 0; }
h1 h2 h3 h4 h5{
font-family: 'Roboto', sans-serif;
font-family: 'Roboto', sans-serif;
}
.col-centered{
float: none;
margin: 5% auto;
float: none;
margin: 5% auto;
}
.mybutton{
background-color: #00a8a8;
padding: 6px 11px !important;
border-radius: 3px;
margin-top: 8px;
border: solid #06c3c3 1px;
color: #ffffff !important;
background-color: #00a8a8;
padding: 6px 11px !important;
border-radius: 3px;
margin-top: 8px;
border: solid #06c3c3 1px;
color: #ffffff !important;
}
.mybutton:hover {
background-color: #06c3c3 !important;
padding: 6px 11px !important;
color: black !important;
border-radius: 3px;
margin-top: 8px;
border: solid #06c3c3 1px;
color: #ffffff !important;
background-color: #06c3c3 !important;
padding: 6px 11px !important;
color: black !important;
border-radius: 3px;
margin-top: 8px;
border: solid #06c3c3 1px;
color: #ffffff !important;
}
.add-to-cart-button {
background-color: #00a8a8;
padding: 6px 11px !important;
border-radius: 3px;
border: solid #06c3c3 1px;
color: #ffffff !important;
background-color: #00a8a8;
padding: 6px 11px !important;
border-radius: 3px;
border: solid #06c3c3 1px;
color: #ffffff !important;
}
.add-to-cart-button:hover {
background-color: #06c3c3 !important;
padding: 6px 11px !important;
color: black !important;
border-radius: 3px;
border: solid #06c3c3 1px;
color: #ffffff !important;
background-color: #06c3c3 !important;
padding: 6px 11px !important;
color: black !important;
border-radius: 3px;
border: solid #06c3c3 1px;
color: #ffffff !important;
}
a{
font-family: 'Roboto', sans-serif;
font-weight: bold;
font-family: 'Roboto', sans-serif;
font-weight: bold;
}
.mynav li{
display: inline-block;
display: inline-block;
}
.mynav {
margin-top: 6px;
text-align: center;
text-align: center;
}
.mynav a{
text-decoration: none;
@@ -108,27 +90,24 @@ text-decoration: none;
color: #06c3c3;
background: none;
}
.mynav li .mybutton {
background-color: #00a8a8;
padding: 4px 10px !important;
margin-top: 6px;
display: block;
border-radius: 3px;
border: solid #06c3c3 1px;
color: #ffffff;
background-color: #00a8a8;
padding: 4px 10px !important;
margin-top: 6px;
display: block;
border-radius: 3px;
border: solid #06c3c3 1px;
color: #ffffff;
}
.mynav li .mybutton:hover {
background-color: #06c3c3;
padding: 4px 10px !important;
margin-top: 6px;
display: block;
border-radius: 3px;
border: solid #06c3c3 1px;
color: #ffffff;
background-color: #06c3c3;
padding: 4px 10px !important;
margin-top: 6px;
display: block;
border-radius: 3px;
border: solid #06c3c3 1px;
color: #ffffff;
}
.productbox{
cursor: pointer;
-moz-box-shadow: 1px 2px 2px #cccccc;
@@ -143,219 +122,181 @@ margin-bottom: 35px;
height: auto;
border-bottom: solid gray 1px;
width: 100%;
}
.productbox div{
padding: 4px 10px;
}
.productbox a{
color: black;
text-decoration: none;
text-decoration: none;
}
.productbox a:hover{
color: black;
text-decoration: none;
text-decoration: none;
text-decoration: underline;
}
.productbox div span{
color: black;
}
#beba{
padding-left: 45px;
padding-right: 45px;
margin-left: -23px;
margin-right: -23px;
padding-left: 45px;
padding-right: 45px;
margin-left: -23px;
margin-right: -23px;
}
#beba:hover{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/beba-bg_wip7kj.png");
background-position: center ;
background-size: 100% 100%;
color: white;
background-repeat: no-repeat;
background-repeat: no-repeat;
}
#dijete:hover{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/dijete-bg_gff80o.png");
background-position: center ;
background-size: 100% 100%;
color: white;
background-repeat: no-repeat;
background-repeat: no-repeat;
}
#dijete:hover a{
color: white;
}
#mama:hover{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/mama-bg_rqbnuo.png");
background-position: center ;
background-size: 100% 100%;
color: white;
background-repeat: no-repeat;
background-repeat: no-repeat;
}
#mama:hover a{
color: white;
}
#madeinbih:hover{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/made-in-bih-bg_uusqpm.png");
background-position: center ;
background-size: 100% 100%;
color: white;
background-repeat: no-repeat;
background-repeat: no-repeat;
}
#madeinbih:hover a{
color: white;
}
#onama:hover{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/made-in-bih-bg_uusqpm.png");
background-position: center ;
background-size: 100% 100%;
color: white;
background-repeat: no-repeat;
background-repeat: no-repeat;
}
#onama:hover a{
color: white;
}
#marka:hover{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/marka-bg_cy8hpe.png");
background-position: center ;
background-size: 100% 100%;
color: white;
background-repeat: no-repeat;
background-repeat: no-repeat;
}
#marka:hover a{
color: white;
}
#akcija:hover{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/akcija-bg_xtawus.png");
background-position: center ;
background-size: 100% 100%;
color: white;
background-repeat: no-repeat;
background-repeat: no-repeat;
}
#akcija:hover a{
color: white;
}
.mydropdown li:hover .sub-menu {
visibility: visible;
display: block;
visibility: visible;
display: block;
}
.mydropdown:hover .dropdown-menu {
display: block;
visibility: visible;
display: block;
visibility: visible;
}
.navbar-default{
color: black;
background-color: white;
border-color: lightgray;
}
.navbar-default .navbar-nav > li > a{
color:black;
color:black;
}
.navbar-default .navbar-nav > li{
padding-left: 16px;
padding-right: 16px;
}
.navbar-default .navbar-nav > li > a:focus{
background-color: rgba(255, 255, 255, 0.6) !important;
-moz-box-shadow: 0px 0px 2px #999;
background-color: rgba(255, 255, 255, 0.6) !important;
-moz-box-shadow: 0px 0px 2px #999;
-webkit-box-shadow: 0px 0px 2px #999;
box-shadow: 0px 0px 2px #999;
border: none !important;
border-radius: 2px;
}
.navbar-default .navbar-nav > .dropdown > a .caret{
border-top-color: #fff;
border-bottom-color: #fff;
border-top-color: #fff;
border-bottom-color: #fff;
}
.navbar-default .navbar-brand{
color:#fff;
color:#fff;
}
.menu-large {
position: static !important;
position: static !important;
}
.megamenu{
padding: 20px 0px;
width:94%;
margin-left: 3%;
border-top: none !important;
-moz-box-shadow: 0px 1px 2px #999;
padding: 20px 0px;
width:94%;
margin-left: 3%;
border-top: none !important;
-moz-box-shadow: 0px 1px 2px #999;
-webkit-box-shadow: 0px 1px 2px #999;
box-shadow: 0px 1px 2px #999;
}
.megamenu> li > ul {
padding: 0;
margin: 0;
padding: 0;
margin: 0;
}
.megamenu> li > ul > li {
list-style: none;
padding-left: 10px;
list-style: none;
padding-left: 10px;
}
.megamenu> li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: black;
white-space: normal;
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: black;
white-space: normal;
}
.megamenu> li ul > li > a:hover,
.megamenu> li ul > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.megamenu.disabled > a,
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
color: #999999;
color: #999999;
}
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
cursor: not-allowed;
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
cursor: not-allowed;
}
.megamenu.dropdown-header {
color: #428bca;
font-size: 18px;
color: #428bca;
font-size: 18px;
}
.dropdown-header p {
border-bottom: solid 1.5px lightgray !important;
@@ -363,200 +304,186 @@ margin-bottom: 2px;
text-transform: uppercase;
color: black;
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 16px;
font-weight: 500;
font-size: 16px;
}
.mycart{
position: absolute;
position: absolute;
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/cart-icon_p9u63r.png");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
width: 42px;
height: 44px;
padding-bottom: 0px;
right:-14px;
bottom: -15px;
text-align: right;
background-repeat: no-repeat;
width: 42px;
height: 44px;
padding-bottom: 0px;
right:-14px;
bottom: -15px;
text-align: right;
}
.mycart div {
text-align: right;
text-align: right;
}
.mycart span{
position: absolute;
left: 13.4px;
top: 4px;
color: #ffffff;
}
.mycart span:hover{
color: white;
}
#myhome{
border-bottom: solid #06c3c3 1px;
border-bottom: solid #06c3c3 1px;
}
#myhome-hover:hover {
border-bottom: solid #06c3c3 1px;
#myhome-hover:hover {
border-bottom: solid #06c3c3 1px;
}
.sidebar ul{
list-style: none;
list-style: none;
}
.sidebar li{
margin-left:10px;
margin-bottom: 5px;
color:black;
padding: 10px;
border-bottom: solid 1px lightgray;
margin-left:10px;
margin-bottom: 5px;
color:black;
padding: 10px;
border-bottom: solid 1px lightgray;
}
.sidebar li a{
text-decoration: none;
color:black;
color:black;
}
.sidebar li a:hover{
color:#06c3c3;
color:#06c3c3;
}
@media (max-width: 768px) {
.megamenu{
margin-left: 0 ;
margin-right: 0 ;
}
.megamenu> li {
margin-bottom: 30px;
}
.megamenu> li:last-child {
margin-bottom: 0;
}
.megamenu.dropdown-header {
padding: 3px 15px !important;
}
.navbar-nav .open .dropdown-menu .dropdown-header{
color:#fff;
}
.megamenu{
margin-left: 0 ;
margin-right: 0 ;
}
.megamenu> li {
margin-bottom: 30px;
}
.megamenu> li:last-child {
margin-bottom: 0;
}
.megamenu.dropdown-header {
padding: 3px 15px !important;
}
.navbar-nav .open .dropdown-menu .dropdown-header{
color:#fff;
}
}
@media (max-width: 1000px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
border-top:none !important;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>ul {
margin-bottom: 0px;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
border-top:none !important;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>ul {
margin-bottom: 0px;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
.error-message {
color: red;
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;
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;
}
.search-box {
background-color: #efefef;
border-radius: 0px;
border: 1px solid #cccccc;
padding-left: 10px;
padding-right: 10px;
background-color: #efefef;
border-radius: 0px;
border: 1px solid #cccccc;
padding-left: 10px;
padding-right: 10px;
}
.search-button {
background-color: #f9f9f9;
color: #31b8b8;
border: 1px solid #cccccc;
border-radius: 0px;
margin-left: 5px;
background-color: #f9f9f9;
color: #31b8b8;
border: 1px solid #cccccc;
border-radius: 0px;
margin-left: 5px;
}
.qty-box {
background-color: #efefef;
border-radius: 0px;
border: 1px solid #cccccc;
background-color: #efefef;
border-radius: 0px;
border: 1px solid #cccccc;
}
.left-inner-addon {
position: relative;
position: relative;
}
.left-inner-addon input {
padding-left: 30px;
padding-left: 30px;
}
.left-inner-addon i {
position: absolute;
padding: 10px 12px;
pointer-events: none;
position: absolute;
padding: 10px 12px;
pointer-events: none;
}
.cart-title {
font-size: 29px;
color: #06c3c3;
font-size: 29px;
color: #06c3c3;
}
.footer {
text-align: center;
width: 100%;
bottom: 20px;
margin-bottom: 20px;
text-align: center;
width: 100%;
bottom: 20px;
margin-bottom: 20px;
}
.message {
font-size: 130%;
text-align: left;
margin-left: 20px;
margin-right: 20px;
.message {
font-size: 130%;
text-align: left;
margin-left: 20px;
margin-right: 20px;
}
}
.payment {
box-sizing: border-box;
color: rgb(102, 102, 102);
display: block;
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';
font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 36px;
line-height: 18.2px;
width: 708px;
word-wrap: break-word;
}

View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>ribica.ba - ispunjava zelje</title>
<title>ribica.ba - prvi online shop sa dostavom u BiH za mame i bebe - kupite igracke, pelene i ostalo</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">