Skip to content

J
joshine
Commit 2c484922 by 王东红
Options

fix 购物车优化

parent 0ed66ac0
Showing with 90 additions and 80 deletions
app/code/Magento/Checkout/i18n/en_US.csv
......@@ -180,8 +180,8 @@ Payment,Payment
"Thank you for your purchase!","Thank you for your purchase!"
"Password", "Password"
"Something went wrong while saving the page. Please refresh the page and try again.","Something went wrong while saving the page. Please refresh the page and try again."
"Item in Cart","Item in Cart"
"Items in Cart","Items in Cart"
"Item in Cart","Item"
"Items in Cart","Items"
"Close","Close"
"Show Cross-sell Items in the Shopping Cart","Show Cross-sell Items in the Shopping Cart"
"You added %1 to your <a href=""%2"">shopping cart</a>.","You added %1 to your <a href=""%2"">shopping cart</a>."
......
app/code/Magento/Checkout/view/frontend/web/template/minicart/content.html
......@@ -31,19 +31,47 @@
</button>
<if args="getCartParam('summary_count')">
<div class="items-total">
<span class="count" if="maxItemsToDisplay < getCartLineItemsCount()" text="maxItemsToDisplay"></span>
<translate args="'of'" if="maxItemsToDisplay < getCartLineItemsCount()"></translate>
<span class="count" text="getCartParam('summary_count')"></span>
<strong class="subtitle" translate="'Recently added item(s)'"></strong>
<div data-action="scroll" class="minicart-items-wrapper">
<ol id="mini-cart" class="minicart-items" data-bind="foreach: { data: getCartItems(), as: 'item' }">
<each args="$parent.getRegion($parent.getItemRenderer(item.product_type))"
render="{name: getTemplate(), data: item, afterRender: function() {$parents[1].initSidebar()}}"></each>
</ol>
</div>
</if>
<ifnot args="getCartParam('summary_count')">
<strong class="subtitle empty"
translate="'You have no items in your shopping cart.'"></strong>
<if args="getCartParam('cart_empty_message')">
<p class="minicart empty text" text="getCartParam('cart_empty_message')"></p>
<div class="actions">
<div class="secondary">
<a class="action viewcart" data-bind="attr: {href: shoppingCartUrl}">
<span translate="'View and Edit Cart'"></span>
</a>
</div>
</div>
</if>
</ifnot>
<if args="getCartParam('summary_count')">
<div class="item-total-subtotal">
<div class="items-total">
<span class="count" if="maxItemsToDisplay < getCartLineItemsCount()" text="maxItemsToDisplay"></span>
<translate args="'of'" if="maxItemsToDisplay < getCartLineItemsCount()"></translate>
<span class="count" text="getCartParam('summary_count')"></span>
<!-- ko if: (getCartParam('summary_count') > 1) -->
<span translate="'Items in Cart'"></span>
<span translate="'Items in Cart'"></span>
<!--/ko-->
<!-- ko if: (getCartParam('summary_count') === 1) -->
<span translate="'Item in Cart'"></span>
<span translate="'Item in Cart'"></span>
<!--/ko-->
</div>
</div>
<each args="getRegion('subtotalContainer')" render=""></each>
<each args="getRegion('subtotalContainer')" render=""></each>
</div>
<each args="getRegion('extraInfo')" render=""></each>
<div class="actions" if="getCartParam('possible_onepage_checkout')">
......@@ -66,31 +94,6 @@
</div>
</if>
<if args="getCartParam('summary_count')">
<strong class="subtitle" translate="'Recently added item(s)'"></strong>
<div data-action="scroll" class="minicart-items-wrapper">
<ol id="mini-cart" class="minicart-items" data-bind="foreach: { data: getCartItems(), as: 'item' }">
<each args="$parent.getRegion($parent.getItemRenderer(item.product_type))"
render="{name: getTemplate(), data: item, afterRender: function() {$parents[1].initSidebar()}}"></each>
</ol>
</div>
</if>
<ifnot args="getCartParam('summary_count')">
<strong class="subtitle empty"
translate="'You have no items in your shopping cart.'"></strong>
<if args="getCartParam('cart_empty_message')">
<p class="minicart empty text" text="getCartParam('cart_empty_message')"></p>
<div class="actions">
<div class="secondary">
<a class="action viewcart" data-bind="attr: {href: shoppingCartUrl}">
<span translate="'View and Edit Cart'"></span>
</a>
</div>
</div>
</if>
</ifnot>
<div class="actions" if="getCartParam('summary_count')">
<div class="secondary">
<a class="action viewcart" data-bind="attr: {href: shoppingCartUrl}">
......
app/code/Magento/Checkout/view/frontend/web/template/minicart/item/default.html
......@@ -20,46 +20,45 @@
<!-- /ko -->
</span>
<!-- /ko -->
<div class="product-item-details">
<strong class="product-item-name">
<!-- ko if: product_has_url -->
<a data-bind="attr: {href: product_url}, html: $parent.getProductNameUnsanitizedHtml(product_name)"></a>
<!-- /ko -->
<!-- ko ifnot: product_has_url -->
<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 class="product options">
<div data-role="content" class="content">
<strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
<dl class="product options list">
<div class="product options list">
<!-- ko foreach: { data: options, as: 'option' } -->
<dt class="label"><!-- ko text: option.label --><!-- /ko --></dt>
<dd class="values">
<div class="opitem">
<!-- ko if: Array.isArray(option.value) -->
<span data-bind="html: $parents[1].getOptionValueUnsanitizedHtml(option.value.join('<br/>'))"></span>
<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>
<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 if: ($index() != ($parent.options.length-1)) -->
,
<!-- /ko -->
</div>
<!-- /ko -->
</dl>
</div>
</div>
</div>
<!-- /ko -->
<div class="product-item-pricing">
<div class="details-qty qty">
<span data-bind="text: qty"></span>*
</div>
<!-- ko if: canApplyMsrp -->
<div class="details-map">
<span class="label" data-bind="i18n: 'Price'"></span>
<span class="value" data-bind="i18n: 'See price before order confirmation.'"></span>
......@@ -71,38 +70,10 @@
<!-- /ko -->
<!-- /ko -->
<div class="details-qty qty">
<label class="label" data-bind="i18n: 'Qty', attr: {
for: 'cart-item-'+item_id+'-qty'}"></label>
<input data-bind="attr: {
id: 'cart-item-'+item_id+'-qty',
'data-cart-item': item_id,
'data-item-qty': qty,
'data-cart-item-id': product_sku
}, value: qty"
type="number"
size="4"
class="item-qty cart-item-qty"/>
<button data-bind="attr: {
id: 'update-cart-item-'+item_id,
'data-cart-item': item_id,
title: $t('Update')
}"
class="update-cart-item"
style="display: none">
<span data-bind="i18n: 'Update'"></span>
</button>
</div>
</div>
<div class="product actions">
<!-- ko if: is_visible_in_site_visibility -->
<div class="primary">
<a data-bind="attr: {href: configure_url, title: $t('Edit item')}" class="action edit">
<span data-bind="i18n: 'Edit'"></span>
</a>
</div>
<!-- /ko -->
<div class="secondary">
<a href="#" data-bind="attr: {'data-cart-item': item_id, title: $t('Remove item')}"
class="action delete">
......
app/design/frontend/Joshine/breeze/web/css/_custom.less
......@@ -1629,7 +1629,43 @@ footer{
visibility: hidden;
}
#minicart-content-wrapper .product-item-details a{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
width: 100%;
display: inline-block;
color: #333333;
font-size: 13px;
}
#minicart-content-wrapper .product.options.list{display: flex;}
#minicart-content-wrapper .product-item-pricing{display: flex;}
#minicart-content-wrapper .product-item-pricing .details-qty.qty{margin-right: 4px;gap: 0.175rem !important;color: #333333;}
#minicart-content-wrapper .minicart-items .actions{bottom: 1.5rem !important;}
#minicart-content-wrapper .item-total-subtotal{display: flex;align-items: center;justify-content: space-between;}
.block-minicart .items-total{display: block !important;font-size: 13px;color: #666666;}
#minicart-content-wrapper .action.primary.checkout{display: none !important;}
#minicart-content-wrapper .actio.delete{color: #999999 !important;}
#minicart-content-wrapper .actions .secondary a.action.viewcart{
outline: none;
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 0.25rem;
font-weight: 400;
padding: 0.5rem 1.25rem;
color: #ffffff;
background-color: #ffa800;
text-decoration: none !important;
white-space: nowrap;
height: 45px;
text-transform: uppercase;
font-size: 13px;
border-radius: 2px;
width: 100%;
}
.product-items .product-item-photo{
overflow: hidden;
}
......
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