Skip to content

Commit 608c9ae

Browse files
webdevstarwebdevstar
committed
Ceckout design
1 parent e881088 commit 608c9ae

8 files changed

Lines changed: 234 additions & 74 deletions

File tree

‎themes/current/assets/css/theme.css‎

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
.checkout-form {
2-
max-width: 600px;
3-
margin: 0 auto;
4-
padding: 0 20px;
2+
margin: 0;
3+
padding: 0;
54
}
65

76
.checkout-button {
@@ -66,6 +65,7 @@
6665
.shipping-methods, .payment-methods {
6766
border: 1px solid #e0e0e0;
6867
border-radius: 3px;
68+
margin-bottom: 14px;
6969
}
7070

7171
.shipping-method, .payment-method {
@@ -100,3 +100,39 @@
100100
.payment-method:last-child, .shipping-method:last-child {
101101
border-bottom: none;
102102
}
103+
104+
105+
106+
.mini-cart {
107+
visibility: hidden;
108+
position: absolute;
109+
min-width: 200px;
110+
top: calc(100%);
111+
right: 0;
112+
background: #fff;
113+
z-index: 1;
114+
opacity: 0;
115+
box-shadow: 2px 2px 1px 0 rgba(0,0,0,0.2);
116+
border: 1px solid #f3f3f3;
117+
border-width: 1px 0 0 1px;
118+
transition: all 200ms ease-in-out;
119+
padding: 20px;
120+
max-width: 500px;
121+
text-align: left;
122+
font-size: 90%;
123+
}
124+
125+
.mini-cart.active {
126+
visibility: visible;
127+
opacity: 1;
128+
z-index: 99;
129+
}
130+
131+
@media screen and (max-width: 768px)
132+
.mini-cart {
133+
width: 100%;
134+
}
135+
136+
.mini-cart-item-price {
137+
padding-bottom: 6px
138+
}

‎themes/current/locales/de.json‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎themes/current/locales/en.json‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
{
2-
"cartTitle": "cart",
3-
"cartEmpty": "Cart is empty",
2+
"cart": "cart",
3+
"cartEmpty": "Your cart is empty",
4+
"proceedToCheckout": "Proceed to checkout",
5+
"subtotal": "Subtotal",
6+
"shipping": "Shipping",
7+
"discount": "Discount",
8+
"total": "Total",
9+
"remove": "Remove",
10+
"qty": "Qty",
11+
"checkoutPageTitle": "Checkout",
12+
"grandTotal": "Grand total",
13+
"orderSummary": "Order Summary",
414
"footerCopyright": "Copyright © 2017 Demo Drone Store. All Rights Reserved. EN. "
515
}

‎themes/current/src/components/cart.js‎

Lines changed: 0 additions & 55 deletions
This file was deleted.

‎themes/current/src/components/header.js‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
import React from 'react'
22
import {Link} from 'react-router'
3+
import MiniCart from './miniCart'
4+
import text from '../lib/text'
35

46
const CartIndicator = ({cart}) => {
57
if (cart && cart.items && cart.items.length > 0) {
6-
return <span className="tag is-danger">{cart.items.length}</span>
8+
const itemsCount = cart.items.reduce((prev, curr) => {
9+
return parseInt(prev || 0) + parseInt(curr.quantity || 0);
10+
}, []);
11+
12+
return <span className="tag is-danger">{itemsCount}</span>
713
} else {
814
return <span></span>
915
}
@@ -13,17 +19,24 @@ export default class Header extends React.Component {
1319
constructor(props) {
1420
super(props);
1521
this.state = {
16-
mobileMenuIsActive: false
22+
mobileMenuIsActive: false,
23+
cartIsActive: false
1724
}
1825
}
1926

2027
menuToggle = () => this.setState({
21-
mobileMenuIsActive: !this.state.mobileMenuIsActive
28+
mobileMenuIsActive: !this.state.mobileMenuIsActive,
29+
cartIsActive: false
2230
});
2331
menuClose = () => this.setState({mobileMenuIsActive: false});
2432

33+
cartToggle = () => this.setState({
34+
cartIsActive: !this.state.cartIsActive,
35+
mobileMenuIsActive: false
36+
});
37+
2538
render() {
26-
const {categories, cart} = this.props.state;
39+
const {categories, cart, settings} = this.props.state;
2740
const classMenu = this.state.mobileMenuIsActive ? 'nav-center nav-menu is-active' : 'nav-center nav-menu is-hidden-mobile';
2841
const classToggle = this.state.mobileMenuIsActive ? 'nav-toggle is-active' : 'nav-toggle';
2942
const categoriesLinks = categories.filter(category => category.parent_id === null).map(category => (
@@ -49,12 +62,13 @@ export default class Header extends React.Component {
4962
{categoriesLinks}
5063
</div>
5164
<div className="nav-right is-flex-mobile">
52-
<Link className="nav-item" to="/checkout">
65+
<span className="nav-item" onClick={this.cartToggle} style={{ cursor: 'pointer' }}>
5366
<span className="icon">
54-
<img src="/assets/images/shopping-bag.svg" alt="cart"/>
67+
<img src="/assets/images/shopping-bag.svg" alt={text.cart} title={text.cart}/>
5568
</span>
5669
<CartIndicator cart={cart} />
57-
</Link>
70+
</span>
71+
<MiniCart cart={cart} deleteCartItem={this.props.deleteCartItem} active={this.state.cartIsActive} settings={settings} cartToggle={this.cartToggle} />
5872
</div>
5973
</div>
6074
</nav>

‎themes/current/src/components/miniCart.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React from 'react';
2+
import {Link} from 'react-router'
3+
import * as helper from '../lib/helper'
4+
import text from '../lib/text'
5+
6+
const MiniCartItem = ({item, deleteCartItem, settings}) => {
7+
return (
8+
<div className="columns is-mobile">
9+
<div className="column is-2">
10+
<div className="image">
11+
<a><img src="https://store.cezerin.com/static/products/58b574a593223a427233ed9a/340/8.png" /></a>
12+
</div>
13+
</div>
14+
<div className="column">
15+
<a>{item.name}</a><br />
16+
<span>{text.qty}: {item.quantity}</span>
17+
</div>
18+
<div className="column is-4 has-text-right">
19+
<div className="mini-cart-item-price">{helper.formatCurrency(item.price_total, settings)}</div>
20+
<a className="button is-light is-small" onClick={() => deleteCartItem(item.id)}>{text.remove}</a>
21+
</div>
22+
</div>
23+
)
24+
}
25+
26+
export default({cart, deleteCartItem, active, settings, cartToggle}) => {
27+
const rootClass = active ? "mini-cart active" : "mini-cart";
28+
29+
if (cart && cart.items && cart.items.length > 0) {
30+
let items = cart.items.map(item =>
31+
<MiniCartItem key={item.id} item={item} deleteCartItem={deleteCartItem} settings={settings} />
32+
);
33+
34+
return (
35+
<div className={rootClass}>
36+
{items}
37+
38+
<div className="columns is-mobile is-gapless is-multiline">
39+
<div className="column is-7">{text.subtotal}</div>
40+
<div className="column is-5 has-text-right">
41+
{helper.formatCurrency(cart.subtotal, settings)}
42+
</div>
43+
<div className="column is-7">{text.shipping}</div>
44+
<div className="column is-5 has-text-right">
45+
{helper.formatCurrency(cart.shipping_total, settings)}
46+
</div>
47+
<div className="column is-7">{text.discount}</div>
48+
<div className="column is-5 has-text-right">
49+
{helper.formatCurrency(cart.discount_total, settings)}
50+
</div>
51+
<div className="column is-7">{text.total}</div>
52+
<div className="column is-5 has-text-right">
53+
{helper.formatCurrency(cart.grand_total, settings)}
54+
</div>
55+
</div>
56+
57+
<Link className="button is-primary is-fullwidth has-text-centered" style={{ textTransform: 'uppercase' }} to="/checkout" onClick={cartToggle}>{text.proceedToCheckout}</Link>
58+
</div>
59+
)
60+
} else {
61+
return <div className={rootClass}><p>{text.cartEmpty}</p></div>
62+
}
63+
}
64+
65+
// {cart.shipping_method}
66+
// {cart.payment_method}
67+
// <span class="select is-small" onChange={e => {updateCartItemQuantiry(item.id, e.target.value)}}>
68+
// <select>
69+
// <option>Select dropdown</option>
70+
// </select>
71+
// </span>

‎themes/current/src/components/orderSummary.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React from 'react';
2+
import {Link} from 'react-router'
3+
import * as helper from '../lib/helper'
4+
import text from '../lib/text'
5+
6+
const OrderSummaryItem = ({settings, item, deleteCartItem, updateCartItemQuantiry}) => {
7+
return (
8+
<div className="columns is-mobile">
9+
<div className="column is-3">
10+
<div className="image">
11+
<a><img src="https://store.cezerin.com/static/products/58b574a593223a427233ed9a/340/8.png" /></a>
12+
</div>
13+
</div>
14+
<div className="column">
15+
<a>{item.name}</a><br />
16+
<span>{text.qty}: {item.quantity}</span>
17+
<div className="mini-cart-item-price">{helper.formatCurrency(item.price_total, settings)}</div>
18+
<a className="button is-light is-small" onClick={() => deleteCartItem(item.id)}>{text.remove}</a>
19+
</div>
20+
</div>
21+
)
22+
}
23+
24+
// <span className="select is-small" onChange={e => {updateCartItemQuantiry(item.id, e.target.value)}}>
25+
// <select>
26+
// <option>Select dropdown</option>
27+
// </select>
28+
// </span>
29+
30+
export default(props) => {
31+
const {cart, settings} = props.state;
32+
33+
if (cart && cart.items && cart.items.length > 0) {
34+
let items = cart.items.map(item =>
35+
<OrderSummaryItem
36+
key={item.id}
37+
item={item}
38+
deleteCartItem={props.deleteCartItem}
39+
updateCartItemQuantiry={props.updateCartItemQuantiry}
40+
settings={settings}
41+
/>
42+
);
43+
44+
return (
45+
<div>
46+
{items}
47+
48+
<div className="columns is-mobile is-gapless is-multiline">
49+
<div className="column is-7">{text.subtotal}</div>
50+
<div className="column is-5 has-text-right">
51+
{helper.formatCurrency(cart.subtotal, settings)}
52+
</div>
53+
<div className="column is-7">{text.shipping}</div>
54+
<div className="column is-5 has-text-right">
55+
{helper.formatCurrency(cart.shipping_total, settings)}
56+
</div>
57+
<div className="column is-7">{text.discount}</div>
58+
<div className="column is-5 has-text-right">
59+
{helper.formatCurrency(cart.discount_total, settings)}
60+
</div>
61+
<div className="column is-7">{text.grandTotal}</div>
62+
<div className="column is-5 has-text-right">
63+
{helper.formatCurrency(cart.grand_total, settings)}
64+
</div>
65+
</div>
66+
</div>
67+
)
68+
} else {
69+
return <div><p>{text.cartEmpty}</p></div>
70+
}
71+
}

‎themes/current/src/containers/checkout.js‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from 'react'
22
import Helmet from 'react-helmet'
3+
import text from '../lib/text'
4+
import OrderSummary from '../components/orderSummary'
35

46
const CheckoutContainer = (props) => {
57
const {page} = props.state;
@@ -19,8 +21,24 @@ const CheckoutContainer = (props) => {
1921
"href": page.url
2022
}
2123
]}/>
22-
<h1>Checkout</h1>
23-
{props.checkoutForm}
24+
<section className="section" style={{ backgroundColor: '#f5f5f5' }}>
25+
<div className="container">
26+
<div className="columns">
27+
<div className="column is-4">
28+
<div className="box">
29+
<div className="title is-4">{text.orderSummary}</div>
30+
<OrderSummary {...props} />
31+
</div>
32+
</div>
33+
<div className="column is-offset-1">
34+
<div className="box">
35+
<h1 className="title is-4">{text.checkoutPageTitle}</h1>
36+
{props.checkoutForm}
37+
</div>
38+
</div>
39+
</div>
40+
</div>
41+
</section>
2442
</div>
2543
)
2644
}

0 commit comments

Comments
 (0)