КОРЗИНА ДЛЯ ВСЕХ САЙТОВ ЕПТИ

Достали из нашей базы в ЛК, отряхнули от спана 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">&#8635;</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">&times;</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

<form id="msOrder" method="post"> <div> <div> <h4>Чтобы завершить <strong>оформление заказа</strong></h4> <p>Пользователю необходимо пройти следующие шаги:</p> <strong>1. Данные получателя</strong> <div> {foreach ['email','receiver','phone'] as $field} <div> <div> <input type="text" id="{$field}" placeholder="{('ms2_frontend_' ~ $field) | lexicon}" name="{$field}" value="{$form[$field]}" > </div> </div> {/foreach} </div> </div> </div> <div> <div id="deliveries"> <strong>2. Варианты доставки:</strong> <div> <div> {foreach $deliveries as $delivery index=$index} {var $checked = !($order.delivery in keys $deliveries) && $index == 0 || $delivery.id == $order.delivery} <div> [ [- <label> <input type="radio" name="delivery" value="{$delivery.id}" id="delivery_{$delivery.id}" data-payments="{$delivery.payments | json_encode}" {$checked ? 'checked' : ''}> {if $delivery.logo?} <img src="{$delivery.logo}" alt="{$delivery.name}" title="{$delivery.name}"/> {else} {$delivery.name} {/if} {if $delivery.description?} <p> {$delivery.description} </p> {/if} </label> ]] <label> <input type="radio" name="delivery" value="{$delivery.id}" id="delivery_{$delivery.id}" data-payments="{$delivery.payments | json_encode}" {$checked ? 'checked' : ''}> <span></span> <div> {$delivery.name} {if $delivery.description?} <p> {$delivery.description} </p> {/if} </div> </label> </div> {/foreach} </div> </div> </div> <div id="payments"> <strong>3. Способы оплаты:</strong> <div> <div> {foreach $payments as $payment index=$index} {var $checked = !($order.payment in keys $payments) && $index == 0 || $payment.id == $order.payment} <div> <label> <input type="radio" name="payment" value="{$payment.id}" id="payment_{$payment.id}" {$payment.id == $order.payment ? 'checked' : ''}> {if $payment.logo?} <img src="{$payment.logo}" alt="{$payment.name}" title="{$payment.name}"/> {else} {$payment.name} {/if} {if $payment.description?} <p> {$payment.description} </p> {/if} </label> [ [- <label> <input type="radio" name="payment" value="{$payment.id}" id="payment_{$payment.id}"{$checked ? 'checked' : ''}> {if $payment.logo?} <img src="{$payment.logo}" alt="{$payment.name}" title="{$payment.name}"/> {else} {$payment.name} {/if} {if $payment.description?} <p>{$payment.description}</p> {/if} </label>]] </div> {/foreach} </div> </div> </div> <div> <strong>4. Адрес доставки:</strong> <div> {foreach ['index','region','city', 'street', 'building'] as $field} <div> <div> <input type="text" id="{$field}" placeholder="{('ms2_frontend_' ~ $field) | lexicon}" name="{$field}" value="{$form[$field]}" > </div> </div> {/foreach} </div> </div> </div> [ [- <button type="button" name="ms2_action" value="order/clean"> {'ms2_frontend_order_cancel' | lexicon} </button> ]] <div> <strong for="comment"> 5. {'ms2_frontend_comment' | lexicon} <span>*</span> </strong> <div> <textarea name="comment" id="comment" placeholder="{'ms2_frontend_comment' | lexicon}" >{$form.comment}</textarea> </div> </div> <div> <div> <h4>{'ms2_frontend_order_cost' | lexicon}:</h4> <strong> <span id="ms2_order_cost">{$order.cost ?: 0}</span> {'ms2_frontend_currency' | lexicon}</strong> </div> <button type="submit" name="ms2_action" value="order/submit"> {'ms2_frontend_order_submit' | lexicon} </button> </div> </form>

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)



Разрешённые теги: <b><i><br>Добавить новый комментарий: