Кастомная miniCart. Проблема обновления total_coun

Доброго времени суток,
Кастомизирую дизайн мини корзины и столкнулся с проблемой.

Корзина отображается нормально, функционально все работает кроме JS при добавлении товара.
т.е. на странице когда нажимаешь «добавить товар в корзину» всплывает pop-up, что товар добавлен в корзину, класс дива меняется на full, но [[+total_count]] и [[+total_cost]] не отрабатывают корректно.
Сумма и количество товара появляется только после перезагрузки страницы.

Верстка отличается от стандартной тем, что дополнительно завернуто в ul->li, empty|not_empty классы висят на li элементах.

Верстка ниже.

<div id="msMiniCart" display="style:inline-block" [[+total_count:isnot=`0`:then=`class="full"`:else=``]]>
            <ul class="nav navbar-nav">

<li id="bottomCart" class="empty b-bottom-panel__buy">
    <a class="nounderline" id="bottom-cart">
        <i class="b-ico b-ico_basket b-ico_sm"></i>
            <span class="b-tooltip b-tooltip_bp js-tooltip-buy">
                <span class="underline">Корзина</span>
                
            </span>
        <span class="badge badge_theme_normal">[[+total_count]]</span>
    </a>
</li>


<li id="bottomCart" class="not_empty active b-bottom-panel__buy">
    <a href="/cart" class="nounderline pull-left" id="bottom-cart">
        <span class="b-ico b-ico_basket b-ico_sm"></span>
            <span class="b-tooltip b-tooltip_bp js-tooltip-buy">
                <span class="underline">Корзина</span>
                <span class="b-tooltip__wrap" style="display: none; visibility: visible; margin-bottom: 70px;">
                    Добавлено в корзину
                </span>
            </span>
        <span class="badge badge_theme_normal">[[+total_count]]</span>
            <span class="b-price b-price_theme_normal">
                        <span class="b-price__num">[[+total_cost]]</span>
                        <span class="b-price__sign"> руб.</span>
                      </span>
    </a>
</li>

            </ul>
<a id="bottomButton" class="empty btn btn_theme_normal btn-primary navbar-right disabled navbar-btn" href="#" rel="nofollow">Оформить заказ</a>
<a id="bottomButton" class="not_empty btn btn_theme_normal btn-primary navbar-btn navbar-right" href="#" rel="nofollow">Оформить заказ</a>
</div>

Что я упустил, подскажите?

SaLacoste

26 мая 2015, 22:01

3 147

Комментарии: 6

Наумов Алексей

27 мая 2015, 08:54

Сравните с оригинальной версткой и найдите отличие:

<strong class="ms2_total_count">[[+total_count]]</strong>

SaLacoste

27 мая 2015, 22:46

Упустил…
Добавил, но увы проблему это не решило.
Происходит добавление, но в minicart отображается total_count/cost только после обновления страницы.

SaLacoste

27 мая 2015, 23:12

Посмотрел механику работы, понял в чем проблема.

Верстка разделена на дублирующиеся li (отличаются css классами).
JS отрабатывает корректно, total_count, total_cost отрабатывает, но т.к. они отражаются в li, который имеет display:none, то он не виден.

т.е. при первом добавлении в корзину, не происходит изменение display:none на элементе, который имеет класс not_empty и поэтому все так же виден li с классом empty.

SaLacoste

27 мая 2015, 23:35

Да, верна мысль.

Исправил ситуацию дополнительным костылем на JS.

Николай

15 декабря 2016, 11:59

Здравствуйте. Посмотрите пж кастомную всплывающую корзину. Но товар в ней не добавляется, без перезагрузки страницы. А при удалении — товар он нормально исчезает.
dnaty.ru/katalog/rasxodniki/koleso2.html

Делал через вызов tpl.msMiniCart…

<div class="top-cart-holder dropdown animate-dropdown">
       
        <div class="basket" >
            
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                <div class="basket-item-count">
                    <span class="ms2_total_count count">[[+total_count]]</span>
                   <img src="assets/images/icon-cart.png" alt="" />
                </div>

                <div class="total-price-basket"> 
                    <span class="lbl">[[%ms2_minicart]]</span>
                    <span class="total-price">
                       <span class="ms2_total_cost value">[[+total_cost]] [[%ms2_frontend_currency]]</span>
                    </span>
                </div>
            </a>

            <ul class="dropdown-menu">
[[!msCart2]]
                               
                <li class="checkout">
                    <div class="basket-item">
                        <div class="row">
                            <div class="col-xs-12 col-sm-6">
                                <a href="cart.html" class="le-button inverse">View cart</a>
                            </div>
                            <div class="col-xs-12 col-sm-6">
                                <a href="checkout.html" class="le-button">Checkout</a>
                            </div>
                        </div>
                    </div>
                </li>

            </ul>
        </div><!-- /.basket -->
    </div><!-- /.top-cart-holder -->
</div><!-- /.top-cart-row-container -->

> tpl.msCart.outer2

<div id="msCart">
	<table class="table table-striped">
		
		[[+goods]]
		<tr class="footer">
			<th class="total" colspan="2">[[%ms2_cart_total]]:</th>
		
			
			<th class="total_cost"><span class="ms2_total_cost">[[+total_cost]]</span> [[%ms2_frontend_currency]]</th>
			<th> </th>
		</tr>
	</table>
	
</div>

> tpl.msCart.row2

<li>
                    <div id="[[+key]]" class="basket-item">
                        <div class="row">
                            <div class="col-xs-4 col-sm-4 no-margin text-center">
                                <div class="thumb image">
                                    <a href="[[~[[+id]]]]"><img src="[[+thumb:default=`[[++assets_url]]components/minishop2/img/web/ms2_small.png`]]" /></a>
                                </div>
                            </div>

                            <div class="col-xs-8 col-sm-8 no-margin">
                         <div class="title">[[+pagetitle]] [[+count]] [[%ms2_frontend_count_unit]]</div>
                         <div class="price">[[+price]] [[%ms2_frontend_currency]]</div>
                         <div class="old_price">[[+old_price]] [[%ms2_frontend_currency]]</div>

                            </div>
                      

<a class="remove close-btn" basket-item></a>

<td class="remove close-btn basket-item">
	<form method="post" class="ms2_form">
			<input type="hidden" name="key" value="[[+key]]">
			<button class="btn btn-default" type="submit" name="ms2_action" value="cart/remove" title="[[%ms2_cart_remove]]">✖</button>
	</form>
	</td>
                      

 
                    </div>
</li>

Николай

15 декабря 2016, 20:32