Достали из нашей базы в ЛК, отряхнули от спана Espo и выкатили сюда. Код — чёрные блоки, как любим.
[ [!msCart?
&tpl=`tpl.msCartCustom`
]]
[ [!msOrder?
&tpl=`tpl.msOrderCustom`
]]
[ [!msGetOrder]]
tpl.msCartCustom
<div id="msCart"> {if $products | length == 0} <div> {'ms2_cart_is_empty' | lexicon} </div> {else} <div> <div> {foreach $products as $product} {var $image} {if $product.thumb?} <img src="{$product.thumb}" alt="{$product.pagetitle}" title="{$product.pagetitle}"/> {else} <img src="{'assets_url' | option}components/minishop2/img/web/ms2_small.png" srcset="{'assets_url' | option}components/minishop2/img/web/ms2_small@2x.png 2x" alt="{$product.pagetitle}" title="{$product.pagetitle}"/> {/if} {/var} <div id="{$product.key}"> <div> {if $product.id?} <a href="{$product.id | url}">{$image}</a> {else} {$image} {/if} </div> <div> <div> <div> <div> {if $product.id?} <a href="{$product.id | url}">{$image}</a> {else} {$image} {/if} </div> <div > {if $product.id?} <a href="{$product.id | url}">{$product.pagetitle}</a> {else} {$product.name} {/if} {if $product.options?} <div> {foreach $product.options as $key => $option} {if $key in ['modification','modifications','msal']}{continue}{/if} {set $caption = $product[$key ~ '.caption']} {set $caption = $caption ? $caption : ('ms2_product_' ~ $key) | lexicon} {if $option is array} {$caption} - {$option | join : '; '} <br> {else} {$caption} - {$option} <br> {/if} {/foreach} </div> {/if} </div> </div> </div> <div> <p>Кол-во:</p> <form method="post"> <input type="hidden" name="key" value="{$product.key}"/> <span data-ms2-count="minus"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"></path></svg> </span> <div> <div> <input type="text" name="count" value="{$product.count}"/> [ [- <div> <span>{'ms2_frontend_count_unit' | lexicon}</span> </div>]] </div> <button type="submit" name="ms2_action" value="cart/change">↻</button> </div> <span data-ms2-count="plus"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"></path></svg> </span> </form> </div> [ [- <div> <span>{$product.weight} {'ms2_frontend_weight_unit' | lexicon}</span> </div>]] <div> <p>Цена:</p> <span>{$product.price} {'ms2_frontend_currency' | lexicon}</span> {if $product.old_price?} <span>{$product.old_price} {'ms2_frontend_currency' | lexicon}</span> {/if} </div> <div> <p>Стоимость:</p> <span><span>{$product.cost}</span> {'ms2_frontend_currency' | lexicon}</span> </div> <div> <form method="post"> <input type="hidden" name="key" value="{$product.key}"> <button type="submit" name="ms2_action" value="cart/remove">×</button> </form> </div> </div> </div> {/foreach} </div> <div> <div><strong>{'ms2_cart_total' | lexicon}:</strong> </div> [ [- <div>{'ms2_cart_total' | lexicon}:</div> <div> <span>{$total.count}</span> {'ms2_frontend_count_unit' | lexicon} </div> <div colspan="2"> <span>{$total.weight}</span> {'ms2_frontend_weight_unit' | lexicon} </div> ]] <div colspan="2"> <span>{$total.cost}</span> {'ms2_frontend_currency' | lexicon} </div> </div> </div> [ [- <form method="post"> <button type="submit" name="ms2_action" value="cart/clean"> {'ms2_cart_clean' | lexicon} </button> </form>]] {/if} </div>
tpl.msOrderCustom
css
.cart-row-inner{
position: relative;
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
}
.cart-row{
display: flex;
padding:20px 0;
border-top: 1px solid #d6d6d6;
}
.cart-row:last-child{
border-bottom: 1px solid #d6d6d6;
}
.ms-title{
width: 30%;
}
.title-cart{
display: flex;
gap:10px;
}
.ms-cart-title_link{
color:inherit;
font-weight: bold;
margin-bottom: 10px;
display: block;
}
.ms-price{
display: flex;
flex-direction:column;
gap:10px;
}
.ms-count{
display: flex;
gap:10px;
align-items: center;
}
.table .ms-count-head{
flex: 0 0 auto;
margin-bottom: 0;
}
.form-control--count{
width: 100%;
border: none;
background: transparent;
text-align: center;
}
.btn-cart-count{
cursor:pointer;
}
.form-count{
display: flex;
align-items: center;
padding:10px;
border-radius:15px;
border:1px solid #d6d6d6;
}
#msCart .old_price{
color:#c5c5c5;
}
.ms-footer{
display: flex;
justify-content: flex-end;
gap: 10px;
margin: 20px 0;
}
.options-cart{
font-size: 12px;
}
.ms-remove{
width: 20px;
}
.ms-remove .btn{
cursor:pointer;
border: none;
background: #fff;
box-shadow: 0px 0px 67px -9px rgba(0, 0, 0, 0.2);
color: #646161;
}
#msOrder input{
-webkit-text-fill-color: inherit;
}
.table--cart{
display: flex;
flex-direction: column;
gap: 20px;
}
.order-list{
display: flex;
justify-content: space-between;
flex-wrap:wrap;
}
.order-list--address{
row-gap:15px;
}
.row--fields{
margin-bottom: 20px;
}
.delivery-block-order{
display: flex;
flex-direction:column;
}
.delivery-wrap-order{
display: flex;
justify-content: space-between;
}
.order-list .form-group{
width: 32%;
}
.order-list .form-control{
width: 100%;
padding:20px 20px;
border-radius:15px;
border:1px solid #d6d6d6;
}
.order-head{
display: block;
margin-bottom: 20px;
}
.order-list--address .form-group{
width: 33%;
}
.order-btn{
border:none;
cursor:pointer;
width: 30%;
margin-bottom: 0;
}
.payment-wrap-order{
justify-content: flex-start;
gap:20px;
}
.order-bottom-wrapper{
display: flex;
justify-content: space-between;
}
/* .order-list--address .form-group-building,.order-list--address .form-group-entrance,.order-list--address .form-group-floor,.order-list--address .form-group-room{
width: 16.2222%;
} */
.order-list--address{
justify-content: flex-start;
gap:5px;
}
.footer-order{
display: flex;
gap:10px;
align-items: center;
}
#msOrder .cart_aside-check span{
background-color: #9e9e9e;
}
#msOrder .cart_aside-check input:checked + span{
background-color: #6DB654;
}
.img-mobile,.mob-title{
display: none;
}
.order-list--full{
width: 100%;
}
.full-w{
width: 100%;
}
.d-none{
display: none;
}
@media(max-width:992px){
.cart-row-inner{
align-items: flex-start;
}
#msCart .mob-title{
display: block;
margin-bottom: 0;
}
.ms-cost{
display: flex;
flex-direction:column;
gap:10px;
}
.cart-row-inner{
flex-wrap:wrap;
gap:20px;
}
#msCart .ms-title{
width: 100%;
}
#msCart .ms-price{
width: 30%;
}
.cart-row{
gap:20px;
}
.img-mobile{
display: flex;
align-items: center;
}
.order-list--address{
gap:0.5%;
row-gap: 15px;
}
.ms-count{
flex-direction:column;
}
.image-desc{
display: none;
}
}
@media(max-width:769px){
.order-list .form-group,.order-btn{
width: 100%;
}
.order-list{
gap:10px;
}
#msCart .ms-count{
width: 100%;
align-items: flex-start;
}
.delivery-wrap-order,.payment-wrap-order{
flex-wrap:wrap;
gap:10px;
}
.order-bottom-wrapper{
flex-wrap:wrap;
gap:10px;
}
}
@media(max-width:427px){
#msCart .ms-price{
width: 100%;
}
.ms-remove{
position: absolute;
top:0;
right: 10px;
}
}
Комментарии
Комментарии (0)