Skip to content

J
joshine
Commit f515ac06 by dhn
Options

按钮样式

parent d34c386d
Showing with 158 additions and 47 deletions
app/code/Magento/Checkout/view/frontend/layout/checkout_cart_index.xml
......@@ -176,7 +176,7 @@
</block>
</container>
<block class="Magento\Checkout\Block\Cart\Coupon" name="checkout.cart.coupon" as="coupon" template="Magento_Checkout::cart/coupon.phtml" after="checkout.cart.summary.title"/>
<block class="Magento\Checkout\Block\Cart" name="checkout.cart.methods.bottom" template="Magento_Checkout::cart/methods.phtml">
<block class="Magento\Checkout\Block\Cart" name="checkout.cart.methods.bottom" template="Magento_Checkout::cart/methods-new.phtml">
<container name="checkout.cart.methods" as="methods" label="Payment Methods After Checkout Button">
<block class="Magento\Checkout\Block\Onepage\Link" name="checkout.cart.methods.onepage.bottom" template="Magento_Checkout::onepage/link.phtml" />
<block class="Magento\Checkout\Block\QuoteShortcutButtons" name="checkout.cart.shortcut.buttons" />
......
app/code/Magento/Checkout/view/frontend/templates/cart/methods-new.phtml 0 → 100644
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
?>
<?php
/** @var $block \Magento\Checkout\Block\Cart */
?>
<?php if (!$block->hasError()) :?>
<style>
.or-checkout-with span{
display: block;
padding: 0 10px;
flex-grow: 1;
white-space: nowrap;
}
</style>
<div class="checkout methods items checkout-methods-items">
<div class="item checkout-now">
<button type="button" data-role="proceed-to-checkout" title="Checkout Now" class="action primary checkout" style="background: #0000; height: 40px;font-size: 22px;text-transform: uppercase;font-weight: 400;">
<span class="secure"><img alt="" src="/media/wysiwyg/secure.png"></span>
<span>Checkout Now</span>
</button>
</div>
<div class="item">
<style type="text/css">
.displayno{
display: none;
}
</style>
<div class="or-checkout-with" style="display: flex;width:100%;line-height: 1.2rem;"><span>OR CHECKOUT WITH</span></div>
<div data-label="or" class="paypal checkout after paypal-logo
ec_shortcut_jjTyyXrRb0sVUXZkA5EduNvUofEEqeuO">
<div class="checkout-logo-medium">
<input type="image" data-action="checkout-form-submit" data-checkout-url="/paypal/express/start/button/1/" src="/static/frontend/Joshine/breeze/en_US/Magento_Paypal/images/paypal-color.svg" alt="Checkout with PayPal" title="Checkout with PayPal">
<div class="checkout-txt">Checkout</div>
</div>
</div>
<style type="text/css">
.displayno{
display: none;
}
</style>
<div data-label="or" class="paypal checkout after paypal-logo
ec_shortcut_bml_uk4wcxXNp0BvGHWy4ZWUMx397QbCJKdp">
<div class="paypal-credit displayno">
<input type="image" data-action="checkout-form-submit" data-checkout-url="/paypal/bml/start/button/1/" src="/static/frontend/Joshine/breeze/en_US/Magento_Paypal/images/paypal-credit.png" alt="Checkout with PayPal" title="Checkout with PayPal">
<a href="https://www.securecheckout.billmelater.com/paycapture-content/fetch?hash=AU826TU8&amp;content=/bmlweb/ppwpsiw.html">
<img src="https://www.paypalobjects.com/webstatic/en_US/btn/btn_bml_text.png">
</a>
<div class="checkout-txt">Checkout</div>
</div>
</div>
</div>
</div>
<?php endif; ?>
<script>
require(['jquery'], function ($) {
$('.checkout-now .checkout').click(function (){
location.href='/checkout';
});
$('.checkout-logo-medium').click(function (){
var url = $(this).find('input[data-action="checkout-form-submit"]').attr('data-checkout-url');
location.href = url;
});
var isMobile = window.matchMedia("(pointer:coarse)").matches;
if (isMobile) {
$(window).scroll(function () {
var positionUl = $('.cart-container .checkout-methods-items .checkout-now')
if (window.outerHeight + $(document).scrollTop() < $(positionUl).parent().offset().top + 50) {
$(positionUl).removeClass("button-static");
} else {
$(positionUl).addClass("button-static");
}
});
}
});
</script>
app/design/frontend/Joshine/breeze/web/css/_custom.less
......@@ -776,7 +776,7 @@ p.shopbycate-title {
background: url("../images/icons-pc.png");
background-position-x: -160px;
}
.checkout-cart-index .checkout.checkout-methods-items li{
.checkout-cart-index .checkout.checkout-methods-items div{
height:auto;
}
.checkout-cart-index #cart-totals {
......@@ -850,7 +850,7 @@ p.shopbycate-title {
.checkout-cart-index .cart-container .cart-summary #block-summary,
.checkout-cart-index .cart-container #cart-totals,
.checkout-cart-index .cart-container #block-discount,
.checkout-cart-index .checkout-methods-items ul li
.checkout-cart-index .checkout-methods-items .item
{
background-color: #ffffff;
}
......@@ -894,12 +894,22 @@ p.shopbycate-title {
position: static!important;
box-shadow: none!important;
}
.checkout-cart-index .cart-container .checkout-methods-items li:first-child{
.checkout-cart-index table tr{
border: none;
}
.checkout-cart-index .cart-container .checkout-methods-items{
margin-top:2rem;
}
.checkout-cart-index .cart-container .checkout-methods-items .checkout-now{
z-index:1;
}
.checkout-cart-index .cart-container .checkout-methods-items li:first-child button{
.checkout-cart-index .cart-container .checkout-methods-items .checkout-now button{
transition: all .3s;
}
.checkout-cart-index #cart-totals table td,.checkout-cart-index #cart-totals table th {
padding: 0.3rem 0.5rem;
}
}
.checkout-index-index .details-qty,.checkout-cart-index .details-qty{
display: block;
......@@ -2228,8 +2238,8 @@ button.action.submit.primary {
}
.swatch-option.color, .swatch-option.image{
width: 40px !important;
height: 40px !important;
width: 40px !important;
height: 40px !important;
border: 1px solid #000008;
}
......@@ -2243,25 +2253,25 @@ height: 40px !important;
}
.block-minicart .block-content>.actions .action.checkout{
background: #000;
background: #000;
}
.cart-container .action.primary,.cart-container .action-primary,.cart-container [type='submit'],.cart-container .pagebuilder-button-primary{
background: #000;
background: #000;
}
.products.products-grid .product.product-item-details .image{
margin: 0 !important;
margin: 0 !important;
}
//色块强制大小
#product-options-wrapper .swatch-option.image{
width: 40px !important;;
height: 40px !important;;
border-radius: 50% !important;;
width: 40px !important;;
height: 40px !important;;
border-radius: 50% !important;;
}
//颜色提示强制关闭
.breeze .field-tooltip-content, .breeze .tooltip.wrapper .tooltip.content, .breeze .map-popup, .breeze .swatch-option-tooltip {
display: none !important;
display: none !important;
}
@media (max-width: 1024px){
......@@ -2300,9 +2310,9 @@ display: none !important;
//商品评论
.amreview-submit-form .review-fieldset .review-legend.legend>span {
float: left;
margin: 0 5px 0 0;
font-weight: bold;
float: left;
margin: 0 5px 0 0;
font-weight: bold;
}
.product.info .review-add {
......@@ -2319,17 +2329,17 @@ font-weight: bold;
}
.amrev-toolbar-container.-all .amrev-sorting {
border-left: none;
float: right;
text-align: end;
border-left: none;
float: right;
text-align: end;
}
}
.amreview-submit-form .review-control-vote.control:before{
position: absolute !important;
position: absolute !important;
}
.amreview-add-new .amreview-button.action{
background-color: #000;
background-color: #000;
}
//产品色块选中错位处理
......@@ -2444,11 +2454,11 @@ background-color: #000;
}
@media (max-width: 1024px){
.select-element.section-before-footer.clearfix p {
font-weight: 200;
font-size: 12px;
color: #000000;
text-transform: none;
.select-element.section-before-footer.clearfix p {
font-weight: 200;
font-size: 12px;
color: #000000;
text-transform: none;
}
.amreview-summary-details .amreview-label .amreview-bar{
margin: 0px;
......@@ -2475,27 +2485,27 @@ background-color: #000;
@media (max-width: 1024px) and (min-width: 768px){
.select-element.section-before-footer.clearfix p {
font-size: 16px;
color: #000000;
text-transform: none;
}
font-size: 16px;
color: #000000;
text-transform: none;
}
.flash-sale-item{
width: 33.33%;
}
width: 33.33%;
}
.shopcatewpt{
width: 100%;
}
}
.shop-by-cata {
padding: 10px;
width: 50%;
float: left;
}
}
p.flashsale-title {
font-size: 16px;
font-weight: 400;
font-size: 16px;
font-weight: 400;
}
}
......@@ -2511,7 +2521,7 @@ background-color: #000;
}
.header-top.header-fixed{
//height: 60px ;
//height: 60px ;
}
.page-with-filter .toolbar .modes{
......@@ -2609,7 +2619,7 @@ button.action.primary.checkout{
tr.grand.totals {
font-size: 20px;
}
.checkout.checkout-methods-items li{
.checkout.checkout-methods-items item{
width: 100%;
height: 52px;
padding-top: 3px;
......@@ -2617,11 +2627,12 @@ tr.grand.totals {
font-size: 16px;
color: #1d1d1d;
}
.cart-container .checkout-methods-items li {
.cart-container .checkout-methods-items .item {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
width:100%;
}
.checkout-logo-medium, .paypal-credit {
display: flex;
......@@ -2633,12 +2644,20 @@ tr.grand.totals {
justify-content: center;
font-family: Outfit-Regular;
}
.cart-container .checkout-methods-items li:first-child{
.or-checkout-with:after, .or-checkout-with:before {
content: "";
display: block;
width: 50%;
height: 1px;
border-top: 1px solid #ddd;
margin-top: 7px;
flex-shrink: 1;
}
.cart-container .checkout-methods-items .checkout-now{
background-color: #000000;
height: 3.2rem;
}
.checkout.checkout-methods-items li .paypal.checkout{
.checkout.checkout-methods-items div .paypal.checkout{
width: 100%;
}
......@@ -2730,7 +2749,7 @@ tr.grand.totals {
margin-left: 10px;
}
.cart-container .checkout-methods-items li:first-child {
.cart-container .checkout-methods-items .checkout-now {
background: #ffa800;
position: fixed;
bottom: 0;
......@@ -2739,7 +2758,7 @@ tr.grand.totals {
box-shadow: 0 0 20px #999;
padding: 5px 10px;
}
.checkout.checkout-methods-items li{
.checkout.checkout-methods-items div{
height: auto !important;
}
.cart-container {
......@@ -2872,7 +2891,7 @@ div#shipping-method-buttons-container {
}
.cart-container .checkout-methods-items li:first-child{
.cart-container .checkout-methods-items .checkout-now{
background-color: #ffa800 ;
}
......@@ -2924,7 +2943,7 @@ button.primary.action.create {
}
.slick-list.draggable .slick-track {
width: 100% !important;
width: 100% !important;
}
strong#block-related-heading,strong#block-upsell-heading{ font-weight: 600; color: #000;font-size: 16px;}
......
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