Skip to content

J
joshine
Commit f515ac06 by dhn
Options

按钮样式

parent d34c386d
Showing with 139 additions and 28 deletions
app/code/Magento/Checkout/view/frontend/layout/checkout_cart_index.xml
...@@ -176,7 +176,7 @@ ...@@ -176,7 +176,7 @@
</block> </block>
</container> </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\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"> <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\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" /> <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 { ...@@ -776,7 +776,7 @@ p.shopbycate-title {
background: url("../images/icons-pc.png"); background: url("../images/icons-pc.png");
background-position-x: -160px; background-position-x: -160px;
} }
.checkout-cart-index .checkout.checkout-methods-items li{ .checkout-cart-index .checkout.checkout-methods-items div{
height:auto; height:auto;
} }
.checkout-cart-index #cart-totals { .checkout-cart-index #cart-totals {
...@@ -850,7 +850,7 @@ p.shopbycate-title { ...@@ -850,7 +850,7 @@ p.shopbycate-title {
.checkout-cart-index .cart-container .cart-summary #block-summary, .checkout-cart-index .cart-container .cart-summary #block-summary,
.checkout-cart-index .cart-container #cart-totals, .checkout-cart-index .cart-container #cart-totals,
.checkout-cart-index .cart-container #block-discount, .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; background-color: #ffffff;
} }
...@@ -894,12 +894,22 @@ p.shopbycate-title { ...@@ -894,12 +894,22 @@ p.shopbycate-title {
position: static!important; position: static!important;
box-shadow: none!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; 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; 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{ .checkout-index-index .details-qty,.checkout-cart-index .details-qty{
display: block; display: block;
...@@ -2228,8 +2238,8 @@ button.action.submit.primary { ...@@ -2228,8 +2238,8 @@ button.action.submit.primary {
} }
.swatch-option.color, .swatch-option.image{ .swatch-option.color, .swatch-option.image{
width: 40px !important; width: 40px !important;
height: 40px !important; height: 40px !important;
border: 1px solid #000008; border: 1px solid #000008;
} }
...@@ -2243,25 +2253,25 @@ height: 40px !important; ...@@ -2243,25 +2253,25 @@ height: 40px !important;
} }
.block-minicart .block-content>.actions .action.checkout{ .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{ .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{ .products.products-grid .product.product-item-details .image{
margin: 0 !important; margin: 0 !important;
} }
//色块强制大小 //色块强制大小
#product-options-wrapper .swatch-option.image{ #product-options-wrapper .swatch-option.image{
width: 40px !important;; width: 40px !important;;
height: 40px !important;; height: 40px !important;;
border-radius: 50% !important;; border-radius: 50% !important;;
} }
//颜色提示强制关闭 //颜色提示强制关闭
.breeze .field-tooltip-content, .breeze .tooltip.wrapper .tooltip.content, .breeze .map-popup, .breeze .swatch-option-tooltip { .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){ @media (max-width: 1024px){
...@@ -2300,9 +2310,9 @@ display: none !important; ...@@ -2300,9 +2310,9 @@ display: none !important;
//商品评论 //商品评论
.amreview-submit-form .review-fieldset .review-legend.legend>span { .amreview-submit-form .review-fieldset .review-legend.legend>span {
float: left; float: left;
margin: 0 5px 0 0; margin: 0 5px 0 0;
font-weight: bold; font-weight: bold;
} }
.product.info .review-add { .product.info .review-add {
...@@ -2326,10 +2336,10 @@ font-weight: bold; ...@@ -2326,10 +2336,10 @@ font-weight: bold;
} }
.amreview-submit-form .review-control-vote.control:before{ .amreview-submit-form .review-control-vote.control:before{
position: absolute !important; position: absolute !important;
} }
.amreview-add-new .amreview-button.action{ .amreview-add-new .amreview-button.action{
background-color: #000; background-color: #000;
} }
//产品色块选中错位处理 //产品色块选中错位处理
...@@ -2444,7 +2454,7 @@ background-color: #000; ...@@ -2444,7 +2454,7 @@ background-color: #000;
} }
@media (max-width: 1024px){ @media (max-width: 1024px){
.select-element.section-before-footer.clearfix p { .select-element.section-before-footer.clearfix p {
font-weight: 200; font-weight: 200;
font-size: 12px; font-size: 12px;
color: #000000; color: #000000;
...@@ -2609,7 +2619,7 @@ button.action.primary.checkout{ ...@@ -2609,7 +2619,7 @@ button.action.primary.checkout{
tr.grand.totals { tr.grand.totals {
font-size: 20px; font-size: 20px;
} }
.checkout.checkout-methods-items li{ .checkout.checkout-methods-items item{
width: 100%; width: 100%;
height: 52px; height: 52px;
padding-top: 3px; padding-top: 3px;
...@@ -2617,11 +2627,12 @@ tr.grand.totals { ...@@ -2617,11 +2627,12 @@ tr.grand.totals {
font-size: 16px; font-size: 16px;
color: #1d1d1d; color: #1d1d1d;
} }
.cart-container .checkout-methods-items li { .cart-container .checkout-methods-items .item {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
gap: 0.5rem; gap: 0.5rem;
width:100%;
} }
.checkout-logo-medium, .paypal-credit { .checkout-logo-medium, .paypal-credit {
display: flex; display: flex;
...@@ -2633,12 +2644,20 @@ tr.grand.totals { ...@@ -2633,12 +2644,20 @@ tr.grand.totals {
justify-content: center; justify-content: center;
font-family: Outfit-Regular; font-family: Outfit-Regular;
} }
.or-checkout-with:after, .or-checkout-with:before {
.cart-container .checkout-methods-items li:first-child{ 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; background-color: #000000;
height: 3.2rem; height: 3.2rem;
} }
.checkout.checkout-methods-items li .paypal.checkout{ .checkout.checkout-methods-items div .paypal.checkout{
width: 100%; width: 100%;
} }
...@@ -2730,7 +2749,7 @@ tr.grand.totals { ...@@ -2730,7 +2749,7 @@ tr.grand.totals {
margin-left: 10px; margin-left: 10px;
} }
.cart-container .checkout-methods-items li:first-child { .cart-container .checkout-methods-items .checkout-now {
background: #ffa800; background: #ffa800;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
...@@ -2739,7 +2758,7 @@ tr.grand.totals { ...@@ -2739,7 +2758,7 @@ tr.grand.totals {
box-shadow: 0 0 20px #999; box-shadow: 0 0 20px #999;
padding: 5px 10px; padding: 5px 10px;
} }
.checkout.checkout-methods-items li{ .checkout.checkout-methods-items div{
height: auto !important; height: auto !important;
} }
.cart-container { .cart-container {
...@@ -2872,7 +2891,7 @@ div#shipping-method-buttons-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 ; background-color: #ffa800 ;
} }
......
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