Skip to content

J
joshine
Commit 3184c921 by dhn
Options

购物车及mini购物车优化

parent e407f864
Showing with 283 additions and 244 deletions
app/design/frontend/Joshine/breeze/Magento_Checkout/templates/cart/form.phtml
......@@ -42,242 +42,7 @@ $mobileDetect = $objectManager->get(\Joshine\Common\Lib\MobileDetect\MobileDetec
?>
<style>
.free_message{
margin-left: .7rem;
text-align: left;
}
.free_message.tddiv{
margin-left: 1.3rem;
}
.free-shipping-area .cart-icon{
float: left;
}
.free-shipping-area .content-wrap{
float: left;
}
.free-shipping-area{
width:100%!important;
order:-3;
padding: 15px;
background-color: #FFFFFF;
color:#000;
}
@media(min-width:768px){
.free-shipping-area{
padding: 10px 10px 10px 20px;
}
.area-blk-notitle{
display:none;
}
.cart-title{
margin-top:50px;
color: #444;
width: 100%!important;
text-align: center;
font-weight: normal;
font-family: "Montserrat";
font-size: 48px;
}
}
@media(max-width:768px){
.free-shipping-area{
padding: 0px;
}
.free-shipping-area .content-wrap{
padding: 10px 0px;background-color: #f2f2f2;
width:100%;
}
.area-blk{
display:none;
}
.area-fix {
position: fixed;
left: 0;
z-index: 1;
border-top: 1px solid #fff;
}
.cart-title{
margin-top: 1rem;
color: #444;
width: 100%!important;
text-align: center;
font-weight: normal;
font-size: 26px;
}
}
.cart-top{
order: -4;
text-align: center;
width:100%!important;
}
.msg-content{
margin: 2rem 0px;
color: #AB3F3F;
}
.item-options-line span{
display: inline-block;
}
.item-options-line span:first-child{
width:30%;
}
@media (max-width: 1024px){
.cart-container .cart.table-wrapper .item-options {
min-width: 100px;
}
}
.is_mobile .item-info{
display: table;
font-family: "Poppins";
table-layout: fixed;
margin: 15px 0;
width: 100%;
}
.is_mobile .item-info{
display: table;
table-layout: fixed;
margin:3rem 0;
width: 100%;
}
.item-info-left{
width: 150px;
min-width: 150px;
text-align: center;
display: table-cell;
vertical-align: middle;
padding-bottom: 10px;
}
.item-info-left .item-image{
position: relative;
margin-left: auto;
margin-right: auto;
}
.item-info-right{
padding-left: 25px;
display: table-cell;
padding-bottom: 10px;
}
.item-info-right .item-name{
width: 100%;
font-size: 16px;
font-weight: 400;
font-style: normal;
color: #000000;
-webkit-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
.item-info-right .item-options-meta{
font-size: 16px;
font-weight: 400;
font-style: normal;
-webkit-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
margin-top: 1rem;
}
.item-info-right .item-price{
margin-top: 1rem;
font-size: 10px;
font-weight: 400;
font-style: normal;
-webkit-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.checkout-cart-index .price-final_price .price{
font-size: 20px;
color:#000000;
}
.item-info-right .item-price .price-box.price-final_price{
float: none;
}
.item-info-right .item-price .product-info-promotion-span,.item-info-right .item-price .price-label{
display:none;
}
.item-info-right .item-price .no-display{
display:inline-block!important;
}
.item-info-right .item-handle{
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
font-family: Futura,sans-serif;
font-weight: 400;
font-style: normal;
-webkit-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
font-size: 12px;
}
.item-info-right .item-quantity{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: 1px solid #e7e7e7;
white-space: nowrap;
}
.checkout-cart-index .item-info-right .new-qty .input-text {
border:none;
width:1rem;
padding:0;
font-size: 12px;
}
.checkout-cart-index .item-info-right .qty-change {
padding:2px 15px;
}
.checkout-cart-index .item-info-right .actions-toolbar {
margin-top: 0px;
margin-bottom: 0px;
}
.checkout-cart-index .item-info-right .action-delete span{
color:#0a0a0a;
}
@media (min-width:768px) {
.item-info-right .item-name {
width: 80%;
font-size: 18px;
margin-bottom: 1rem
}
.item-info-right .item-options-meta {
font-size: 18px;
margin-bottom: 1rem;
}
.price-final_price .price{
font-size: 18px;
}
}
.is_mobile .item-info:first-child{
margin:0px 0px 3rem 0;
}
.item-info-right,.item-info-left{
padding-bottom:0px;
position:relative;
}
.item-handle{
width: 80%;
position: absolute;
bottom: 0;
}
</style>
<?php $mergedCells = ($this->helper(Magento\Tax\Helper\Data::class)->displayCartBothPrices() ? 2 : 1); ?>
<?= $block->getChildHtml('form_before') ?>
<div class="cart-top">
......
app/design/frontend/Joshine/breeze/Magento_Checkout/templates/cart/minicart.phtml
......@@ -7,7 +7,6 @@
/** @var $block \Magento\Checkout\Block\Cart\Sidebar */
/** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
?>
<div data-block="minicart" class="minicart-wrapper">
<a class="action showcart" href="<?= $block->escapeUrl($block->getShoppingCartUrl()) ?>"
data-bind="scope: 'minicart_content'">
......
app/design/frontend/Joshine/breeze/Magento_Checkout/web/template/minicart/content.html
......@@ -4,7 +4,8 @@
* See COPYING.txt for license details.
*/
-->
<div class="block-title">
<if args="getCartParam('summary_count')">
<div class="block-title">
<strong>
<span class="trade-cart-banner--product-title--icon">
<svg aria-hidden="true" focusable="false" role="presentation" width="18" height="13" viewBox="0 0 18 13" xmlns="http://www.w3.org/2000/svg">
......@@ -13,7 +14,8 @@
</span>
Added to your cart
</strong>
</div>
</div>
</if>
<div class="block-content">
<button type="button"
id="btn-minicart-close"
......@@ -61,17 +63,17 @@
</div>
</if>
</ifnot>
<div class="actions mini-div" if="getCartParam('summary_count')">
<div class="actions minidiv" if="getCartParam('summary_count')">
<a class="action viewcart" data-bind="attr: {href: shoppingCartUrl}" style="vertical-align: sub;color: #ffff;">
<div class="secondary" style="background-color: #FAF3FA;width: 100%;color: #7E6452;font-size: 16px;height: 40px;line-height: 40px;border: 1px solid #7E6452;">
<span translate="'View and Edit Cart'"></span><span>(<span class="count" text="getCartParam('summary_count')"></span>)</span>
<span class="exin" translate="'View and Edit Cart'"></span><span class="exin">(<span class="count" text="getCartParam('summary_count')"></span>)</span>
</div>
</a>
</div>
<div class="actions mini-div" if="getCartParam('summary_count')">
<div class="actions minidiv" if="getCartParam('summary_count')">
<a class="action checkoutbtn" data-bind="attr: {href: checkoutUrl}" style="vertical-align: sub;color: #ffff;">
<div class="secondary" style="background-color: #7E6452;width: 100%;font-size: 16px;height: 40px;line-height: 40px;">
<span>checkout</span>
<span class="exin">checkout</span>
</div>
</a>
</div>
......
app/design/frontend/Joshine/breeze/Magento_Checkout/web/template/minicart/item/default.html
......@@ -30,7 +30,31 @@
<span data-bind="html: $parent.getProductNameUnsanitizedHtml(product_name)"></span>
<!-- /ko -->
</strong>
<!-- ko if: options.length -->
<div class="product options" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}'>
<span data-role="title" class="toggle"><!-- ko i18n: 'See Details' --><!-- /ko --></span>
<div data-role="content" class="content">
<strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
<dl class="product options list">
<!-- ko foreach: { data: options, as: 'option' } -->
<dt class="label"><!-- ko text: option.label --><!-- /ko --></dt>
<dd class="values">
<!-- ko if: Array.isArray(option.value) -->
<span data-bind="html: $parents[1].getOptionValueUnsanitizedHtml(option.value.join('<br/>'))"></span>
<!-- /ko -->
<!-- ko if: (!Array.isArray(option.value) && ['file', 'html'].includes(option.option_type)) -->
<span data-bind="html: $parents[1].getOptionValueUnsanitizedHtml(option.value)"></span>
<!-- /ko -->
<!-- ko if: (!Array.isArray(option.value) && !['file', 'html'].includes(option.option_type)) -->
<span data-bind="text: option.value"></span>
<!-- /ko -->
</dd>
<!-- /ko -->
</dl>
</div>
</div>
<!-- /ko -->
<div class="product-item-pricing" style="font-size: 18px;">
<div class="details-qty qty">
......
app/design/frontend/Joshine/breeze/web/css/_custom.less
......@@ -2151,10 +2151,259 @@ footer{
.minicart-items li.product-item > div.product > :nth-child(1) {
max-width: 100%!important;
}
.mini-div a:hover{
text-decoration: none;
.exin{
display: inline-block;
}
.action.viewcart .secondary:hover{
box-shadow: 0px 0px 1px 1px #7F6452;
}
#mini-cart .product-item-details .product.options.list .label{
float:left;
margin-top:0;
margin-right:5px;
}
#mini-cart .product-item-details .product.options.list .values{
color:#888;
font-family: inherit;
}
/***********************************minicart edit end*********************************************************/
/***********************************cart style start**********************************************************/
.free_message{
margin-left: .7rem;
text-align: left;
}
.free_message.tddiv{
margin-left: 1.3rem;
}
.free-shipping-area .cart-icon{
float: left;
}
.free-shipping-area .content-wrap{
float: left;
}
.free-shipping-area{
width:100%!important;
order:-3;
padding: 15px;
background-color: #FFFFFF;
color:#000;
}
@media(min-width:768px){
.free-shipping-area{
padding: 10px 10px 10px 20px;
}
.area-blk-notitle{
display:none;
}
.cart-title{
margin-top:50px;
color: #444;
width: 100%!important;
text-align: center;
font-weight: normal;
font-family: "Montserrat";
font-size: 48px;
}
}
@media(max-width:768px){
.free-shipping-area{
padding: 0px;
}
.free-shipping-area .content-wrap{
padding: 10px 0px;background-color: #f2f2f2;
width:100%;
}
.area-blk{
display:none;
}
.area-fix {
position: fixed;
left: 0;
z-index: 1;
border-top: 1px solid #fff;
}
.cart-title{
margin-top: 1rem;
color: #444;
width: 100%!important;
text-align: center;
font-weight: normal;
font-size: 26px;
}
}
.cart-top{
order: -4;
text-align: center;
width:100%!important;
}
.msg-content{
margin: 2rem 0px;
color: #AB3F3F;
}
.item-options-line span{
display: inline-block;
}
.item-options-line span:first-child{
width:30%;
}
@media (max-width: 1024px){
.cart-container .cart.table-wrapper .item-options {
min-width: 100px;
}
}
.is_mobile .item-info{
display: table;
font-family: "Poppins";
table-layout: fixed;
margin: 15px 0;
width: 100%;
}
.is_mobile .item-info{
display: table;
table-layout: fixed;
margin:3rem 0;
width: 100%;
}
.item-info-left{
width: 150px;
min-width: 150px;
text-align: center;
display: table-cell;
vertical-align: middle;
padding-bottom: 10px;
}
.item-info-left .item-image{
position: relative;
margin-left: auto;
margin-right: auto;
}
.item-info-right{
padding-left: 25px;
display: table-cell;
padding-bottom: 10px;
}
.item-info-right .item-name{
width: 100%;
font-size: 16px;
font-weight: 400;
font-style: normal;
color: #000000;
-webkit-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
.item-info-right .item-options-meta{
font-size: 16px;
font-weight: 400;
font-style: normal;
-webkit-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
margin-top: 1rem;
}
.item-info-right .item-price{
margin-top: 1rem;
font-size: 10px;
font-weight: 400;
font-style: normal;
-webkit-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.checkout-cart-index .price-final_price .price{
font-size: 20px;
color:#000000;
}
.item-info-right .item-price .price-box.price-final_price{
float: none;
}
.item-info-right .item-price .product-info-promotion-span,.item-info-right .item-price .price-label{
display:none;
}
.item-info-right .item-price .no-display{
display:inline-block!important;
}
.item-info-right .item-handle{
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
font-family: Futura,sans-serif;
font-weight: 400;
font-style: normal;
-webkit-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
font-size: 12px;
}
.item-info-right .item-quantity{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: 1px solid #e7e7e7;
white-space: nowrap;
}
.checkout-cart-index .item-info-right .new-qty .input-text {
border:none;
width:1rem;
padding:0;
font-size: 12px;
}
.checkout-cart-index .item-info-right .qty-change {
padding:2px 15px;
}
.checkout-cart-index .item-info-right .actions-toolbar {
margin-top: 0px;
margin-bottom: 0px;
}
.checkout-cart-index .item-info-right .action-delete span{
color:#0a0a0a;
}
@media (min-width:768px) {
.item-info-right .item-name {
width: 80%;
font-size: 18px;
margin-bottom: 1rem
}
.item-info-right .item-options-meta {
font-size: 18px;
margin-bottom: 1rem;
}
.price-final_price .price{
font-size: 18px;
}
}
.is_mobile .item-info:first-child{
margin:0px 0px 3rem 0;
}
.item-info-right,.item-info-left{
padding-bottom:0px;
position:relative;
}
.item-handle{
width: 80%;
position: absolute;
bottom: 0;
}
/***********************************cart style end**********************************************************/
@media (min-width: 992px) {
.product-item:hover .product-item-info .image0,
.product-list-item:hover .product-item-info .image0 {
......
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