[IMP] website_sale: no accordion

bzr revid: chm@openerp.com-20130716143048-fafg42kd92396d2z
This commit is contained in:
Christophe Matthieu 2013-07-16 16:30:48 +02:00
parent d1c74232b8
commit 02e8b1ab3e
7 changed files with 139 additions and 285 deletions

View File

@ -3,6 +3,60 @@
-->
<openerp>
<data>
<record id="header" model="ir.ui.view">
<field name="name">customer</field>
<field name="type">qweb</field>
<field name="arch" type="xml">
<div class="container">
<div class="row">
<div class="oe_website_logo span4">
<a href='/page/website.homepage'><img t-att-alt="res_company.name" src='/web/binary/company_logo'/></a>
</div>
<ul class="oe_website_nav span8 nav nav-pills">
<li class="pull-right"><a href="/admin">Sign in</a></li>
<li class="pull-right"><a href="/page/website.contactus">Contact us</a></li>
</ul>
</div>
</div>
</field>
</record>
<record id="footer" model="ir.ui.view">
<field name="name">customer</field>
<field name="type">qweb</field>
<field name="arch" type="xml">
<div class="container">
<div class="row">
<div class="span4">
<h5>Product and services</h5>
<ul>
<li><a href="https://www.openerp.com/start?download">Download</a></li>
<li><a href="https://launchpad.net/openobject">Launchpad</a></li>
<li><a href="http://runbot.openerp.com">Automated Tests</a></li>
</ul>
</div>
<div class="span4">
<h5>Social</h5>
<ul>
<li><a href="http://twitter.com/openerp"><i class="icon-twitter-sign"></i>Twitter</a></li>
<li><a href="http://www.facebook.com/OpenERP"><i class="icon-facebook-sign"></i>Facebook</a></li>
<li><a href="https://plus.google.com/+openerp/posts"><i class="icon-google-plus-sign"></i>Google+</a></li>
</ul>
</div>
<div class="span4">
<h5 t-esc="res_company.name">Company name</h5>
<ul>
<li><a href="/page/website.contactus">Contact us</a></li>
<li><a href="/page/website.news">News</a></li>
<li><a href="/page/website.contactus">About us</a></li>
<li>&amp;#x2706; <span t-record="res_company" t-field="phone"/></li>
</ul>
</div>
</div>
</div>
</field>
</record>
<record id="layout" model="ir.ui.view">
<field name="name">layout</field>
<field name="type">qweb</field>
@ -45,17 +99,7 @@
<body class="oe_website oe_styling_v8">
<header class="oe_website_header">
<div class="container">
<div class="row">
<div class="oe_website_logo span4">
<a href='/page/website.homepage'><img t-att-alt="res_company.name" src='/web/binary/company_logo'/></a>
</div>
<ul class="oe_website_nav span8 nav nav-pills">
<li class="pull-right"><a href="/admin">Sign in</a></li>
<li class="pull-right"><a href="/page/website.contactus">Contact us</a></li>
</ul>
</div>
</div>
<t t-call="website.header"/>
</header>
<div class="oe_website_body" t-raw="0">
<div class="container">
@ -65,35 +109,7 @@
</div>
</div>
<footer class="oe_website_footer">
<div class="container">
<div class="row">
<div class="span4">
<h5>Product and services</h5>
<ul>
<li><a href="https://www.openerp.com/start?download">Download</a></li>
<li><a href="https://launchpad.net/openobject">Launchpad</a></li>
<li><a href="http://runbot.openerp.com">Automated Tests</a></li>
</ul>
</div>
<div class="span4">
<h5>Social</h5>
<ul>
<li><a href="http://twitter.com/openerp"><i class="icon-twitter-sign"></i>Twitter</a></li>
<li><a href="http://www.facebook.com/OpenERP"><i class="icon-facebook-sign"></i>Facebook</a></li>
<li><a href="https://plus.google.com/+openerp/posts"><i class="icon-google-plus-sign"></i>Google+</a></li>
</ul>
</div>
<div class="span4">
<h5 t-esc="res_company.name">Company name</h5>
<ul>
<li><a href="/page/website.contactus">Contact us</a></li>
<li><a href="/page/website.news">News</a></li>
<li><a href="/page/website.contactus">About us</a></li>
<li>&amp;#x2706; <span t-record="res_company" t-field="phone"/></li>
</ul>
</div>
</div>
</div>
<t t-call="website.footer"/>
<p class="oe_website_copy text-center">&amp;copy; <span t-record="res_company" t-field="name">Company name</span>.</p>
</footer>

View File

@ -188,8 +188,8 @@ class Ecommerce(http.Controller):
def remove_cart(self, product_id=0):
return self.add_cart(product_id=product_id, remove=True)
@http.route(['/shop/customer'], type='http', auth="admin")
def customer(self, *arg, **post):
@http.route(['/shop/checkout'], type='http', auth="admin")
def checkout(self, *arg, **post):
cr, uid, partner_id = self.get_cr_uid()
values = self.get_values()
partner_obj = request.registry.get('res.partner')
@ -204,7 +204,7 @@ class Ecommerce(http.Controller):
if partner_id:
values['partner'] = partner_obj.browse(cr, uid, partner_id)
return request.registry.get("ir.ui.view").render(cr, uid, "website_sale.customer", values)
return request.registry.get("ir.ui.view").render(cr, uid, "website_sale.checkout", values)
@http.route(['/shop/confirm_cart'], type='http', auth="admin")
def confirm_cart(self, *arg, **post):

View File

@ -1,20 +1,3 @@
.oe_ecommerce {
font-family: "Lato";
font-size: 13px;
}
.oe_ecommerce input:not([type="radio"]):not([type="checkbox"]) {
height: 30px;
}
.oe_ecommerce label > input:not([type="radio"]):not([type="checkbox"]), .oe_ecommerce label > div {
display: block;
margin-top: 3px;
}
.oe_ecommerce label select {
margin-top: 3px;
}
.oe_ecommerce label > div > input {
margin-bottom: 0;
}
.oe_ecommerce .oe_total {
margin-top: 10px;
}
@ -144,9 +127,6 @@
background: -o-linear-gradient(#51a351, #418541);
background: linear-gradient(#51a351, #418541);
}
.oe_ecommerce form.oe_signup {
display: none;
}
.oe_ecommerce .oe_search form {
width: 100%;
margin: 24px;
@ -163,10 +143,20 @@
max-width: 64px;
max-height: 64px;
}
.oe_ecommerce .oe_checkout .accordion-inner {
padding: 9px;
}
.oe_ecommerce .oe_checkout .accordion-inner h4 {
.oe_ecommerce .oe_checkout h4 {
border-bottom: 1px solid #dddddd;
margin-right: 30px;
}
.oe_ecommerce .oe_checkout input:not([type="radio"]):not([type="checkbox"]) {
height: 30px;
}
.oe_ecommerce .oe_checkout label > input:not([type="radio"]):not([type="checkbox"]), .oe_ecommerce .oe_checkout label > div {
display: block;
margin-top: 3px;
}
.oe_ecommerce .oe_checkout label select {
margin-top: 3px;
}
.oe_ecommerce .oe_checkout label > div > input {
margin-bottom: 0;
}

View File

@ -2,22 +2,10 @@
.oe_ecommerce
input:not([type="radio"]):not([type="checkbox"])
height: 30px
label
> input:not([type="radio"]):not([type="checkbox"]), > div
display: block
margin-top: 3px
select
margin-top: 3px
> div > input
margin-bottom: 0
.oe_total
margin-top: 10px
td
padding: 5px 10px
font-family: "Lato"
font-size: 13px
.oe_products
.oe_product
.oe_hidden
@ -104,8 +92,6 @@
@include background(linear-gradient(#0088cc,#0076b1))
&.btn-success
@include background(linear-gradient(#51a351, #418541))
form.oe_signup
display: none
.oe_search
form
width: 100%
@ -122,8 +108,16 @@
max-width: 64px
max-height: 64px
.oe_checkout
.accordion-inner
padding: 9px
h4
border-bottom: 1px solid #ddd
margin-right: 30px
h4
border-bottom: 1px solid #ddd
margin-right: 30px
input:not([type="radio"]):not([type="checkbox"])
height: 30px
label
> input:not([type="radio"]):not([type="checkbox"]), > div
display: block
margin-top: 3px
select
margin-top: 3px
> div > input
margin-bottom: 0

View File

@ -18,10 +18,6 @@ $(document).ready(function (){
$('.oe_ecommerce .oe_total').replaceWith(''+result.totalHTML);
});
});
$('.oe_ecommerce form').on('click', '.oe_toggleform', function (ev) {
ev.preventDefault();
$('.oe_ecommerce form').toggle();
});
});
@ -34,8 +30,11 @@ openerp.website = function(instance) {
'click button[data-action=gotostep]': 'gotostep',
},
start: function() {
console.log("instance.website.sale.Checkout", this);
return this._super.apply(this, arguments);
var self = this;
this._super.apply(this, arguments);
this.$('input[name="shipping_different"]').on('change', function (ev) {
self.$('.oe_shipping').toggle();
});
},
goto: function (e) {
@ -62,5 +61,5 @@ $(document).ready(function () {
instance.web.qweb.add_template('/website_sale/static/src/xml/ecommerce.xml');
var editor = new instance.website.sale.Checkout(instance.webclient);
editor.prependTo($('.oe_placeholder_checkout'));
editor.replace($('.oe_placeholder_checkout'));
});

View File

@ -3,163 +3,35 @@
<t t-name="Website.sale.Checkout">
<div class="oe_checkout">
<div class="accordion" id="accordion_checkout">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_checkout" href="#accordion_checkout_method">Checkout Method</a>
</div>
<div id="accordion_checkout_method" class="accordion-body collapse in">
<div class="accordion-inner">
<div class="span4">
<h4>Checkout as a Guest or Register</h4>
<p>Register with us for future convenience:</p>
<div>
<label class="radio">Checkout as Guest<input type="radio" checked="checked" name="register_mode" value="guest"/></label>
<label class="radio">Register<input type="radio" name="register_mode" value="register"/></label>
</div>
<h5>Register and save time!</h5>
<p>Register with us for future convenience:</p>
<ul class="ul">
<li>Fast and easy check out</li>
<li>Easy access to your order history and status</li>
</ul>
<button type="button" class="btn" data-toggle="collapse" data-target="#accordion_checkout_billing" data-parent="#accordion_checkout">Continue</button>
</div>
<div class="span4">
<h4>Login</h4>
<h5>Already registered?</h5>
<p>Please log in below:</p>
<input type="text" name="email" placeholder="Email address"/>
<input type="password" name="password" placeholder="Password"/>
<div><a href="#">Forgot your password?</a></div>
<button type="submit" class="btn" data-toggle="collapse" data-target="#accordion_checkout_billing" data-parent="#accordion_checkout">Login</button>
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_checkout" href="#accordion_checkout_billing">Billing Information</a>
</div>
<div id="accordion_checkout_billing" class="accordion-body collapse">
<div class="accordion-inner">
<label class="span8">Name and firstname<input class="span7" type="text" name="name" placeholder="Name and firstname"/></label>
<label class="span4">Telephone<input type="text" name="tel" placeholder="Telephone"/></label>
<label class="span4">Fax<input type="text" name="fax" placeholder="Fax"/></label>
<label class="span4">Company<input type="text" name="company" placeholder="Company"/></label>
<label class="span4">Email address<input type="email" name="email" placeholder="Email address"/></label>
<label class="span8">Street<input class="span7" type="text" name="street" placeholder="Street address"/></label>
<label class="span4">City<input type="text" name="city" placeholder="City"/></label>
<label class="span4">State/Province<input type="text" name="state" placeholder="State/Province"/></label>
<label class="span4">Zip/Postal Code<input type="text" name="zip" placeholder="Zip/Postal Code"/></label>
<label class="span4">Country<input type="text" name="state" placeholder="Country"/></label>
<div>
<label class="radio">Ship to this address<input type="radio" name="shipping_method" checked="checked" value="same"/></label>
<label class="radio">Ship to different address<input type="radio" name="shipping_method" value="different"/></label>
</div>
<div class="span8">
<button type="submit" class="btn" data-toggle="collapse" data-target="#accordion_checkout_shipping" data-parent="#accordion_checkout">Continue</button>
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_checkout" href="#accordion_checkout_shipping">Shipping Information</a>
</div>
<div id="accordion_checkout_shipping" class="accordion-body collapse">
<div class="accordion-inner">
<label class="span8">Name and firstname<input class="span7" type="text" name="name" placeholder="Name and firstname"/></label>
<label class="span4">Telephone<input type="text" name="tel" placeholder="Telephone"/></label>
<label class="span4">Fax<input type="text" name="fax" placeholder="Fax"/></label>
<label class="span4">Company<input type="text" name="company" placeholder="Company"/></label>
<label class="span8">Street<input class="span7" type="text" name="street" placeholder="Street address"/></label>
<label class="span4">City<input type="text" name="city" placeholder="City"/></label>
<label class="span4">State/Province<input type="text" name="state" placeholder="State/Province"/></label>
<label class="span4">Zip/Postal Code<input type="text" name="zip" placeholder="Zip/Postal Code"/></label>
<label class="span4">Country<input type="text" name="state" placeholder="Country"/></label>
<div class="span8">
<button type="submit" class="btn" data-toggle="collapse" data-target="#accordion_checkout_payment" data-parent="#accordion_checkout">Continue</button>
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_checkout" href="#accordion_checkout_payment">Payment Information</a>
</div>
<div id="accordion_checkout_payment" class="accordion-body collapse">
<div class="accordion-inner">
<div>
<label class="radio">Check / Money order<input type="radio" name="payment_method" checked="checked" value="check"/></label>
<label class="radio">Credit Card (saved)<input type="radio" name="payment_method" value="card"/></label>
</div>
<div>
<label class="span4">Name on Card<input type="text" name="name" placeholder="Name on Card"/></label>
<label class="span4">Credit Card Type
<select name="type">
<option value="">--Please Select--</option>
<option value="AE">American Express</option>
<option value="VI">Visa</option>
<option value="MC">MasterCard</option>
<option value="DI">Discover</option>
</select>
</label>
<label class="span4">Credit Card Number<input type="text" name="number" placeholder="Credit Card Number"/></label>
<label class="span4">Expiration Date
<div>
<select class="span2" name="expiration_month">
<option value="" selected="selected">Month</option>
<option value="1">01 - January</option>
<option value="2">02 - February</option>
<option value="3">03 - March</option>
<option value="4">04 - April</option>
<option value="5">05 - May</option>
<option value="6">06 - June</option>
<option value="7">07 - July</option>
<option value="8">08 - August</option>
<option value="9">09 - September</option>
<option value="10">10 - October</option>
<option value="11">11 - November</option>
<option value="12">12 - December</option>
</select>
<select class="span1" name="expiration_year">
<option value="" selected="selected">Year</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select>
</div>
</label>
<label class="span4">Card Verification Number<input type="text" name="verification" placeholder="Card Verification Number"/></label>
</div>
<div class="span8">
<button type="submit" class="btn" data-toggle="collapse" data-target="#accordion_checkout_review" data-parent="#accordion_checkout">Continue</button>
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_checkout" href="#accordion_checkout_review">Order Review</a>
</div>
<div id="accordion_checkout_review" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
<div class="span8">
<button type="submit" class="btn">Confirm your order</button>
</div>
</div>
</div>
</div>
<h3 class="span8">Billing Information</h3>
<div class="span8">
<button class="btn btn-success">Log me, I have an account</button>
<label class="span8">Name and firstname<input class="span7" type="text" name="name" placeholder="Name and firstname"/></label>
<label class="span4">Telephone<input type="text" name="tel" placeholder="Telephone"/></label>
<label class="span4">Fax<input type="text" name="fax" placeholder="Fax"/></label>
<label class="span4">Company<input type="text" name="company" placeholder="Company"/></label>
<label class="span4">Email address<input type="email" name="email" placeholder="Email address"/></label>
<label class="span8">Street<input class="span7" type="text" name="street" placeholder="Street address"/></label>
<label class="span4">City<input type="text" name="city" placeholder="City"/></label>
<label class="span4">State/Province<input type="text" name="state" placeholder="State/Province"/></label>
<label class="span4">Zip/Postal Code<input type="text" name="zip" placeholder="Zip/Postal Code"/></label>
<label class="span4">Country<input type="text" name="state" placeholder="Country"/></label>
<label class="checkbox">Ship to different address<input type="checkbox" name="shipping_different"/></label>
</div>
<h3 class="span8 oe_shipping" style="display:none">Shipping Information</h3>
<div class="span8 oe_shipping" style="display:none">
<label class="span8">Name and firstname<input class="span7" type="text" name="name" placeholder="Name and firstname"/></label>
<label class="span4">Telephone<input type="text" name="tel" placeholder="Telephone"/></label>
<label class="span4">Fax<input type="text" name="fax" placeholder="Fax"/></label>
<label class="span4">Company<input type="text" name="company" placeholder="Company"/></label>
<label class="span8">Street<input class="span7" type="text" name="street" placeholder="Street address"/></label>
<label class="span4">City<input type="text" name="city" placeholder="City"/></label>
<label class="span4">State/Province<input type="text" name="state" placeholder="State/Province"/></label>
<label class="span4">Zip/Postal Code<input type="text" name="zip" placeholder="Zip/Postal Code"/></label>
<label class="span4">Country<input type="text" name="state" placeholder="Country"/></label>
</div>
<h3 class="span8">Choose your payment</h3>
<div class="span8">
</div>
</div>
</t>

View File

@ -3,16 +3,24 @@
<data>
<!-- Layout add nav and footer -->
<record id="layout_ecommerce" model="ir.ui.view">
<field name="name">layout_ecommerce</field>
<field name="inherit_id" ref="website.layout"/>
<record id="header_ecommerce" model="ir.ui.view">
<field name="name">header_ecommerce</field>
<field name="inherit_id" ref="website.header"/>
<field name="arch" type="xml">
<data>
<xpath expr="(//header//li)[last()]" position="after">
<xpath expr="(//li)[last()]" position="after">
<li class="pull-right"><a href="/shop/mycart"><i class="icon-shopping-cart icon-large"></i> My cart</a></li>
<li class="pull-right"><a href="/shop">Shop</a></li>
</xpath>
<xpath expr="//footer/div/div/div[3]" position="inside">
</data>
</field>
</record>
<record id="footer_ecommerce" model="ir.ui.view">
<field name="name">footer_ecommerce</field>
<field name="inherit_id" ref="website.footer"/>
<field name="arch" type="xml">
<data>
<xpath expr="/div/div/div[3]" position="inside">
SHOP Footer
</xpath>
</data>
@ -186,7 +194,7 @@
</div>
<t t-call="website_sale.product_recommended"/>
<t t-call="website_sale.total"/>
<a t-if="order.order_line" href="/shop/customer"><button class="btn btn-success">Next stage</button></a>
<a t-if="order.order_line" href="/shop/checkout"><button class="btn btn-success">Next stage</button></a>
</span>
</t>
</t>
@ -217,40 +225,15 @@
<!-- Page confirm my cart -->
<record id="customer" model="ir.ui.view">
<field name="name">customer</field>
<record id="checkout" model="ir.ui.view">
<field name="name">checkout</field>
<field name="type">qweb</field>
<field name="arch" type="xml">
<t t-name="website_sale.customer">
<t t-call="website_sale.page">
<t t-set="title">Your informations</t>
<t t-set="title">Checkout</t>
<t t-set="shop_content">
<div class="oe_placeholder_checkout">-</div>
<form action="/shop/customer" class="oe_signin" method="post" t-if="not partner">
<h5>Please Sign in or enter your informations</h5>
<input name="login" type="text" placeholder="Login..."/><br/>
<input name="password" type="password" placeholder="Password..."/><br/>
<button type="submit" class="btn btn-success">Login</button> or <button type="reset" class="btn btn-primary oe_toggleform">Complete your address</button>
</form>
<form action="/shop/confirm_cart" class="oe_signup" method="post" t-att-style="partner and 'display:block' or ''">
<h5 t-if="partner">Please confirm your informations</h5>
<h5 t-if="not partner">Please enter your informations</h5>
<input name="name" type="text" required="True" placeholder="Name..." t-att-value="partner and partner.name or ''"/><br/>
<input name="phone" type="tel"
required="True" placeholder="Phone number..." t-att-value="partner and partner.phone or ''"/>
<input name="email" type="email" required="True" placeholder="Email..." t-att-value="partner and partner.email or ''"/>
<h5 t-if="partner">Please confirm your address</h5>
<h5 t-if="not partner">Please enter your address</h5>
<address>
<input name="street" type="text" required="True" placeholder="Street..." t-att-value="partner and partner.street or ''"/><br/>
<input name="street2" type="text" placeholder="Street..." t-att-value="partner and partner.street2 or ''"/><br/>
<input name="zip" type="text" required="True" placeholder="Zip-code..." t-att-value="partner and partner.zip or ''"/>
<input name="city" type="text" required="True" placeholder="City..." t-att-value="partner and partner.city or ''"/><br/>
<input name="country" type="text" required="True" placeholder="Country..." t-att-value="partner and partner.country_id and partner.country_id.name_get()[0][1] or ''"/>
<input name="state" type="text" placeholder="State..." t-att-value="partner and partner.state_id and partner.state_id.name_get()[0][1] or ''"/>
</address>
<button type="submit" class="btn btn-success">Next stage</button><t t-if="not partner"> or <button type="reset" class="btn btn-primary oe_toggleform">Sign in</button></t>
</form>
<div class="oe_placeholder_checkout">oe_placeholder_checkout</div>
</t>
</t>
</t>