Commit 2bb47f90 by dhn

购物车页结算页按钮上部添加总价格

parent f9299937
...@@ -16,7 +16,6 @@ ...@@ -16,7 +16,6 @@
var isMobile = window.matchMedia("(pointer:coarse)").matches; var isMobile = window.matchMedia("(pointer:coarse)").matches;
var productIds = localStorage.getItem('recently_viewed') || ''; var productIds = localStorage.getItem('recently_viewed') || '';
if (productIds != '') { if (productIds != '') {
console.log('productIds',productIds)
$.ajax({ $.ajax({
url: '/catalog/product/recently', url: '/catalog/product/recently',
data: {ids: productIds}, data: {ids: productIds},
......
...@@ -220,7 +220,6 @@ require(['jquery'], function ($) { ...@@ -220,7 +220,6 @@ require(['jquery'], function ($) {
if (isMobile) { if (isMobile) {
var fixHeight = $('.area-blk-notitle').height(); var fixHeight = $('.area-blk-notitle').height();
$(window).scroll(function () { $(window).scroll(function () {
if(!$('#checkout-step-shipping').is(":visible")) {
$(window).scroll(function () { $(window).scroll(function () {
var scrollTop = $(document).scrollTop(); var scrollTop = $(document).scrollTop();
...@@ -244,7 +243,6 @@ require(['jquery'], function ($) { ...@@ -244,7 +243,6 @@ require(['jquery'], function ($) {
$('.area-blk-notitle .content-wrap').removeClass("area-fix"); $('.area-blk-notitle .content-wrap').removeClass("area-fix");
} }
}); });
}
}); });
} }
......
...@@ -7,6 +7,15 @@ ...@@ -7,6 +7,15 @@
?> ?>
<?php <?php
/** @var $block \Magento\Checkout\Block\Cart */ /** @var $block \Magento\Checkout\Block\Cart */
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$_cart = $objectManager->get('\Magento\Checkout\Model\Cart');
$subtotal = $_cart->getGrandTotal();
$subtotalStr = $block->escapeHtml(
$this->helper(Magento\Checkout\Helper\Data::class)->formatPrice($subtotal),
['span']
);
?> ?>
<?php if (!$block->hasError()) :?> <?php if (!$block->hasError()) :?>
<style> <style>
...@@ -16,10 +25,39 @@ ...@@ -16,10 +25,39 @@
flex-grow: 1; flex-grow: 1;
white-space: nowrap; white-space: nowrap;
} }
@media(max-width:768px)
{
.checkout-methods-items .checkout-now{
background-color: #FFFFFF!important;
}
.checkout-methods-items .checkout-now button.checkout{
background-color: #ffa800!important;
}
.checkout-now.button-static .now-grand-total{
display: none;
}
}
@media(min-width:768px)
{
.now-grand-total{
display: none;
}
.checkout-methods-items .checkout-now{
margin-bottom: 1rem;
}
}
</style> </style>
<div class="checkout methods items checkout-methods-items" style="background-color: #f2f2f2;"> <div class="checkout methods items checkout-methods-items" style="background-color: #f2f2f2;">
<div style="background-color: #fff;width:100%;gap: 1rem;"> <div style="background-color: #fff;width:100%;gap: 1rem;">
<div class="item checkout-now" style="margin:10px 0px 20px 0px;"> <div class="item checkout-now">
<div class="now-grand-total" style="font-size: 18px;width:100%;">
<div style="float: left;text-align: left;"><strong>Order Total:</strong></div>
<div style="float: right;text-align: right;"><?= $subtotalStr ?></div>
</div>
<button type="button" data-role="proceed-to-checkout" title="Checkout Now" class="action primary checkout"> <button type="button" data-role="proceed-to-checkout" title="Checkout Now" class="action primary checkout">
<span class="secure"><img alt="" src="/media/wysiwyg/secure.png"></span> <span class="secure"><img alt="" src="/media/wysiwyg/secure.png"></span>
<span>Checkout Now</span> <span>Checkout Now</span>
...@@ -101,8 +139,10 @@ ...@@ -101,8 +139,10 @@
var positionUl = $('.cart-container .checkout-methods-items .checkout-now') var positionUl = $('.cart-container .checkout-methods-items .checkout-now')
if (window.outerHeight + $(document).scrollTop() < $(positionUl).parent().offset().top + 50) { if (window.outerHeight + $(document).scrollTop() < $(positionUl).parent().offset().top + 50) {
$(positionUl).removeClass("button-static"); $(positionUl).removeClass("button-static");
$('.now-grand-total').show();
} else { } else {
$(positionUl).addClass("button-static"); $(positionUl).addClass("button-static");
$('.now-grand-total').hide();
} }
}); });
......
...@@ -5,22 +5,27 @@ ...@@ -5,22 +5,27 @@
define([ define([
'jquery', 'jquery',
'uiComponent' 'Magento_Checkout/js/view/summary/abstract-total',
], function ($, Component) { 'Magento_Checkout/js/model/quote'
], function ($, Component,quote) {
'use strict'; 'use strict';
return Component.extend({ return Component.extend({
defaults: { defaults: {
template: 'Magento_Checkout/placeorder' template: 'Magento_Checkout/placeorder'
}, },
totals: quote.getTotals(),
placeOrder:function(){ placeOrder:function(){
if($('#checkout-step-shipping').is(":visible")) if($('#checkout-step-shipping').is(":visible"))
{ {
return false; return false;
} }
$('.checkout-index-index .payment-method._active').find('.actions-toolbar').find('button').trigger('click'); $('.checkout-index-index .payment-method._active').find('.actions-toolbar').find('button').trigger('click');
} }
,
getTotalPrice:function(){
return this.getFormattedPrice(this.totals().grand_total);
}
}); });
}); });
...@@ -5,6 +5,11 @@ ...@@ -5,6 +5,11 @@
*/ */
--> -->
<div id="checkout_place_order"> <div id="checkout_place_order">
<div class="fix-content">
<div class="now-order-total" style="font-size: 18px;width:95%;margin:0 auto;">
<div style="float: left;text-align: left;"><strong>Order Total:</strong></div>
<div style="float: right;text-align: right;" data-bind="text: getTotalPrice()"></div>
</div>
<button id="place-order" data-bind="click: placeOrder"> <button id="place-order" data-bind="click: placeOrder">
<span class="button-inner"> <span class="button-inner">
<span class="secure"> <span class="secure">
...@@ -13,4 +18,5 @@ ...@@ -13,4 +18,5 @@
<span class="txt">Place Order</span> <span class="txt">Place Order</span>
</span> </span>
</button> </button>
</div>
</div> </div>
\ No newline at end of file
...@@ -506,8 +506,15 @@ $flatraPrice = $block->getFlatratePrice(); ...@@ -506,8 +506,15 @@ $flatraPrice = $block->getFlatratePrice();
right: 0; right: 0;
box-shadow: 0 0 20px #999; box-shadow: 0 0 20px #999;
z-index: 1; z-index: 1;
background-color: #FFFFFF;
padding-bottom: 10px;
}
#checkout_place_order .fix-content .now-order-total{
display:none;
}
#checkout_place_order .fix-content.button-fix .now-order-total{
display:block;
} }
/***************payment end******************/ /***************payment end******************/
} }
.checkout-index-index .opc .actions-toolbar { .checkout-index-index .opc .actions-toolbar {
...@@ -826,9 +833,9 @@ script; ...@@ -826,9 +833,9 @@ script;
$(window).scroll(function () { $(window).scroll(function () {
var positionUl = $('#checkout_place_order') var positionUl = $('#checkout_place_order')
if (window.outerHeight + $(document).scrollTop() < $(positionUl).offset().top + 50) { if (window.outerHeight + $(document).scrollTop() < $(positionUl).offset().top + 50) {
$('#place-order').addClass("button-fix"); $('.fix-content').addClass("button-fix");
} else { } else {
$('#place-order').removeClass("button-fix"); $('.fix-content').removeClass("button-fix");
} }
}); });
......
...@@ -790,7 +790,12 @@ p.shopbycate-title { ...@@ -790,7 +790,12 @@ p.shopbycate-title {
color:#cacaca!important; color:#cacaca!important;
} }
.checkout-cart-index .cart-container .checkout-methods-items .checkout-now button{ .checkout-cart-index .cart-container .checkout-methods-items .checkout-now button{
background: #0000; height: 40px;font-size: 22px;text-transform: uppercase;font-weight: 400; background: #0000;
height: 40px;
font-size: 22px;
text-transform: uppercase;
font-weight: 400;
padding: 1.47rem 0px;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.checkout-cart-index .cart-container { .checkout-cart-index .cart-container {
...@@ -897,6 +902,12 @@ p.shopbycate-title { ...@@ -897,6 +902,12 @@ p.shopbycate-title {
.button-static{ .button-static{
position: static!important; position: static!important;
box-shadow: none!important; box-shadow: none!important;
margin-bottom:1rem!important;
padding: 0px!important;
gap: 0.5rem;
}
.checkout-now.button-static .now-grand-total{
display: none;
} }
.checkout-cart-index table tr{ .checkout-cart-index table tr{
border: none; border: none;
...@@ -906,7 +917,8 @@ p.shopbycate-title { ...@@ -906,7 +917,8 @@ p.shopbycate-title {
} }
.checkout-cart-index .cart-container .checkout-methods-items .checkout-now{ .checkout-cart-index .cart-container .checkout-methods-items .checkout-now{
z-index:1; z-index:1;
gap: 0rem;
margin-bottom: 0px;padding: 0px 10px 10px;
} }
.checkout-cart-index .cart-container .checkout-methods-items .checkout-now button{ .checkout-cart-index .cart-container .checkout-methods-items .checkout-now button{
transition: all .3s; transition: all .3s;
...@@ -2792,7 +2804,6 @@ tr.grand.totals { ...@@ -2792,7 +2804,6 @@ tr.grand.totals {
left: 0; left: 0;
z-index: 100; z-index: 100;
box-shadow: 0 0 20px #999; box-shadow: 0 0 20px #999;
padding: 5px 10px;
} }
.checkout.checkout-methods-items div{ .checkout.checkout-methods-items div{
height: auto !important; height: auto !important;
......
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