Skip to content

J
joshine
Commit 6519bd39 by dhn
Options

支付按钮

parent 5eb030f3
Showing with 180 additions and 5 deletions
app/code/Magento/Checkout/view/frontend/web/js/view/part.js
......@@ -39,6 +39,11 @@ define([
if (!addressForm.validate().form()) {
return false;
}
var paymentMethodObj = $('.checkout-index-index .payment-method');
if(paymentMethodObj.length < 1)
{
return false;
}
var email = $('#customer-email').val() || '';
var firstname = $('#co-shipping-form input[name="firstname"]').val();
var lastname = $('#co-shipping-form input[name="lastname"]').val();
......@@ -57,6 +62,7 @@ define([
$('#shipping-text').show();
$('#shipping-text .main-address.shipping-address').html(firstname + ' ' + lastname + '<br>' + street + '<br>' + city + ', ' + regin + ', ' + country + '<br>' + postcode + ', ' + telephone + '<br>' + email);
}
$(paymentMethodObj[0]).find('input[type="radio"]').trigger('click');
$('#next-shipping').hide();
$('#checkout-step-shipping_method').show();
$('#checkout-payment-method-load').show();
......@@ -70,6 +76,7 @@ define([
$(document).on('click', '#shipping-text .address-edit', function () {
$('#shipping-text .main-address.shipping-address').html('');
$('#checkout_place_order').removeClass('button-fix');
$('#shipping-text').hide();
$('#checkout-step-shipping').show();
$('#next-shipping').show();
......
app/code/Magento/Checkout/view/frontend/web/js/view/place-order.js 0 → 100644
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'jquery',
'uiComponent'
], function ($, Component) {
'use strict';
return Component.extend({
defaults: {
template: 'Magento_Checkout/placeorder'
},
placeOrder:function(){
if($('#checkout-step-shipping').is(":visible"))
{
return false;
}
$('.checkout-index-index .payment-method._active').find('.actions-toolbar').find('button').trigger('click');
}
});
});
app/code/Magento/Checkout/view/frontend/web/js/view/security.js 0 → 100644
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'jquery',
'uiComponent'
], function ($, Component) {
'use strict';
return Component.extend({
defaults: {
template: 'Magento_Checkout/security'
}
});
});
app/code/Magento/Checkout/view/frontend/web/template/placeorder.html 0 → 100644
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<div id="checkout_place_order">
<button id="place-order" data-bind="click: placeOrder">
<span class="button-inner">
<span class="secure">
<img alt="" src="/media/wysiwyg/secure.png">
</span>
<span class="txt">Place Order</span>
</span>
</button>
</div>
\ No newline at end of file
app/code/Magento/Checkout/view/frontend/web/template/security.html 0 → 100644
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<div id="checkout_security_guarantee">
<div style="background: #fff; padding: 15px 10px 20px;">
<div style="position: relative;">
<img style="position: absolute; left: 2px; top: 0;" alt="" src="/media/wysiwyg/cart.png">
<div style="padding-left: 45px;">
<span style="display: block; font-family: Lato-Bold; font-size: 14px; margin-bottom: 5px;color: #1d1d1d;">EASY RETURNS</span>
<span style="display: block; font-family: Regular; font-size: 12px; margin-bottom: 15px;color: #1d1d1d;">No-quibble return &amp; exchange within 15 Days</span>
</div>
</div>
<div style="position: relative;">
<img style="position: absolute; left: 9px; top: 0;" alt="" src="/media/wysiwyg/key.png">
<div style="padding-left: 45px;">
<span style="display: block; font-family: Lato-Bold; font-size: 14px; margin-bottom: 5px;color: #1d1d1d;">SAFE &amp; SECURE</span>
<span style="display: block; font-family: Regular; font-size: 12px; margin-bottom: 15px;color: #1d1d1d;">Your information is always protected</span>
</div>
</div>
<div>
<img style="margin-left: 6px; display: block;" alt="" src="/media/wysiwyg/support-payments-pc.png">
</div>
</div>
</div>
\ No newline at end of file
app/design/frontend/Joshine/breeze/Magento_Checkout/layout/checkout_index_index.xml
......@@ -59,6 +59,14 @@
</item>
</item>
</item>
<item name="placeOrder" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/place-order</item>
<item name="displayArea" xsi:type="string">placeOrder</item>
</item>
<item name="security" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/security</item>
<item name="displayArea" xsi:type="string">security</item>
</item>
</item>
</item>
</item>
......
app/design/frontend/Joshine/breeze/Magento_Checkout/templates/onepage.phtml
......@@ -469,6 +469,8 @@
}
.checkout-index-index #opc-sidebar{
border:none;
margin-bottom: 0px;
font-size: 16px !important
}
.checkout-index-index .opc .actions-toolbar.action-update-cancel {
position: relative;
......@@ -482,8 +484,29 @@
.checkout-index-index .opc .action-update-cancel {
height: 100%;
}
.checkout-index-index .page-wrapper a.logo{
margin-left: 35%!important;
}
.checkout-index-index div#checkout {
margin-top: 1rem;
}
.checkout-index-index .authentication-wrapper{
padding: 5px 20px;
}
.button-fix {
position: fixed;
bottom: 0;
left: 0;
right: 0;
box-shadow: 0 0 20px #999;
z-index: 1;
}
/***************payment end******************/
}
.checkout-index-index .opc .actions-toolbar {
display:none!important;
}
.opc .step-title{
font-size: 25px;
padding: 0;
......@@ -521,7 +544,7 @@
float: none;
width:100%;
}
#opc-sidebar{
.slip-div{
position:absolute;
top:0px;
border:none;
......@@ -581,6 +604,28 @@
border-bottom: 1px solid #dcdcdc !important;
}
.teliphone_number{width:100% !important;}
#checkout_security_guarantee span{
line-height: normal;
}
.checkout-index-index #checkout_place_order #place-order{
width: 95%;
border: none;
background-color: #ff9600;
height: 48px;
color: #fff;
font-size: 20px;
text-transform: uppercase;
outline: none;
text-align: center;
box-sizing: border-box;
}
.checkout-index-index #checkout_place_order
{
text-align: center;
background-color: #fff;
padding: 10px 0px;
transition: all .3s;
}
@media(min-width: 1024px){
.opc .actions-toolbar{
position: absolute;
......@@ -759,18 +804,34 @@ script;
var scrollTop = $(document).scrollTop(),
offsetTop = $('.checkout-container').offset().top,
containerHeight = $('.checkout-container').height()-20,
sidebarHeight = $('#opc-sidebar').height();
sidebarHeight = $('.slip-div').height();
if (scrollTop > offsetTop) {
if (containerHeight + offsetTop - scrollTop > sidebarHeight) {
$('#opc-sidebar').css('top', (scrollTop - offsetTop)+'px');
$('.slip-div').css('top', (scrollTop - offsetTop)+'px');
} else {
$('.slip-div').css('top', (containerHeight - sidebarHeight)+'px');
}
} else {
$('#opc-sidebar').css('top', (containerHeight - sidebarHeight)+'px');
$('.slip-div').css('top', '0');
}
});
}
else {
$(window).scroll(function () {
if(!$('#checkout-step-shipping').is(":visible")) {
var scrollTop = $(document).scrollTop() - 120;
var wh = $(document.body).height();
var offsetTop = $('#checkout_place_order').offset().top;
if (wh - offsetTop <= scrollTop) {
//
$('#checkout_place_order').removeClass('button-fix');
} else {
$('#opc-sidebar').css('top', '0');
$('#checkout_place_order').addClass('button-fix');
}
}
});
}
});
</script>
\ No newline at end of file
app/design/frontend/Joshine/breeze/Magento_Checkout/web/template/onepage.html
......@@ -30,9 +30,19 @@
</div>
</div>
<div class="payment-right">
<div class="slip-div">
<!-- ko foreach: getRegion('sidebar') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<!-- ko foreach: getRegion('placeOrder') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<!-- ko foreach: getRegion('security') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment