Убрать выпадающие(toogle) корзину. А сделать просто кликабельной

tailbee · 19 вересня 2016

Подскажите как сделать просто кликабельной корзину. Сейчас она выпадающая. Но товар специфичный и люди берут по 200 позиций и листать в узкой полоски ой как не удобно. Получается нужно сделать корзину кликабельной в переход в корзину. http://joxi.ru/823LDp4ijlxQAO Сейчас так. Помогите пожалуйста. Сайт, если что 911hm.ru

вот код с /catalog/view/theme/theme629/template/common.cart.tpl

<div class="box-cart">
<div id="cart" class="cart toggle-wrap">
	<button type="button" data-loading-text="<?php echo $text_loading; ?>" class="toggle">
		<i class="material-design-shopping232"></i> 
		<strong><?php echo $text_shopping_cart; ?></strong>
		<span id="cart-total" class="cart-total"><?php echo $text_items; ?></span>
		<?php if (isset($text_items2)) { ?><span id="cart-total2" class="cart-total2"><?php echo $text_items2; ?></span><?php } ?>
		<i class="material-design-drop25"></i>
	</button>
  <ul class="pull-right toggle_cont">
	<?php if ($products || $vouchers) { ?>
	<li>
		<div>
	  <table class="table">
		<?php foreach ($products as $product) { ?>
		<tr>
		  <td class="text-center"><?php if ($product['thumb']) { ?>
			<div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-thumbnail" /></a></div>
			<?php } ?></td>
		  <td class="text-left">
			<div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>
			<?php if ($product['option']) { ?>
			<?php foreach ($product['option'] as $option) { ?>
			
			- <small><?php echo $option['name']; ?> <?php echo $option['value']; ?></small>
			<?php } ?>
			<?php } ?>
			<?php if ($product['recurring']) { ?>
			<br />
			- <small><?php echo $text_recurring; ?> <?php echo $product['recurring']; ?></small>
			<?php } ?>
			<div> x <?php echo $product['quantity']; ?>  <span class="price-cart"><?php echo $product['total']; ?></span></div>
			</td>
		  
		  <td class="text-right"></td>
		  <td class="text-center"><button type="button" onclick="cart.remove('<?php echo $product['key']; ?>');" title="<?php echo $button_remove; ?>" class="btn btn-danger btn-xs" style="background:none !important;"><i class="fa fa-times"></i></button></td>
		</tr>
		<?php } ?>
		<?php foreach ($vouchers as $voucher) { ?>
		<tr>
		  <td class="text-center"></td>
		  <td class="text-left"><?php echo $voucher['description']; ?></td>
		  <td class="text-right">x 1</td>
		  <td class="text-right"><?php echo $voucher['amount']; ?></td>
		  <td class="text-center text-danger"><button type="button" onclick="voucher.remove('<?php echo $voucher['key']; ?>');" title="<?php echo $button_remove; ?>" class="btn btn-danger btn-xs"><i class="fa fa-times"></i></button></td>
		</tr>
		<?php } ?>
	  </table>
		</div>
	</li>
	<li>
	  <div>
		<table class="table total">
		  <?php foreach ($totals as $total) { ?>
		  <tr>
			<td class="text-right"><strong><?php echo $total['title']; ?></strong></td>
			<td class="text-right"><?php echo $total['text']; ?></td>
		  </tr>
		  <?php } ?>
		</table>
		<div class="text-right">
			<a class="btn" href="<?php echo $cart; ?>"><span><?php echo $text_cart; ?></span></a>
			<a class="btn btn-add" href="<?php echo $checkout; ?>"><span ><?php echo $text_checkout; ?></span></a></p>
	  </div>
	</li>
	<?php } else { ?>
	<li>
	  <p class="text-center"><?php echo $text_empty; ?></p>
	</li>
	<?php } ?>
  </ul>
</div>
</div>

Змінено 19 вересня 2016 користувачем tailbee

Shagrath · 19 вересня 2016

Есть несколько вариантов. Как по мне, легче всего сделать элемент с ссылкой который перекроет блок корзины, к примеру:

<a href="<?php echo $cart; ?>"><i style="display: block;height: 60px;width: 230px;position: relative;z-index: 999;margin-top: -62px;"></i></a>

вставить его необходимо между последним и предпоследним </div>, что бы получилось так:

<li>
     <p class="text-center"><?php echo $text_empty; ?></p>
    </li>
    <?php } ?>
</ul>
</div>
<a href="<?php echo $cart; ?>"><i style="display: block;height: 60px;width: 230px;position: relative;z-index: 9;margin-top: -62px;"></i></a> 
</div>

или же нужно убирать обработчик который отслеживается этим скриптом /catalog/view/theme/theme629/js/script.js по классу toggle_cont у <ul class="pull-right toggle_cont">, заменой класса к примеру на toggle_cont1, но тогда нужно css-стили которые были дописать и для этого класса, или же в /catalog/view/theme/theme629/js/script.js заменить действие которое делает выпадание списка товаров на перекидывание в корзину.

Змінено 19 вересня 2016 користувачем Shagrath

tailbee · 20 вересня 2016

Есть несколько вариантов. Как по мне, легче всего сделать элемент с ссылкой который перекроет блок корзины, к примеру:
<a href="<?php echo $cart; ?>"><i style="display: block;height: 60px;width: 230px;position: relative;z-index: 999;margin-top: -62px;"></i></a> 
вставить его необходимо между последним и предпоследним </div>, что бы получилось так:
<li>
     <p class="text-center"><?php echo $text_empty; ?></p>
    </li>
    <?php } ?>
</ul>
</div>
<a href="<?php echo $cart; ?>"><i style="display: block;height: 60px;width: 230px;position: relative;z-index: 9;margin-top: -62px;"></i></a> 
</div>
или же нужно убирать обработчик который отслеживается этим скриптом /catalog/view/theme/theme629/js/script.js по классу toggle_cont у <ul class="pull-right toggle_cont">, заменой класса к примеру на toggle_cont1, но тогда нужно css-стили которые были дописать и для этого класса, или же в /catalog/view/theme/theme629/js/script.js заменить действие которое делает выпадание списка товаров на перекидывание в корзину.

После применения первого способа. Было всё хорошо. Пока не заметил такую тенденцию, что в мобильной версии на кнопки акции и контакты поместилась ссылка войти в корзину :) А можно подробнее про последние способы?

Shagrath · 21 вересня 2016

Можно.

1) Из /catalog/view/theme/theme629/js/script.js убираем функцию которая отвечает за действия при клике на кнопку корзины

/* Toggle
========================================================*/
;
(function ($) {
var o = $('.toggle');
$(document).ready(function () {
$('.toggle').click(function (e) {
e.preventDefault();
var tmp = $(this);
o.each(function () {
if ($(this).hasClass('active') && !$(this).is(tmp)) {
$(this).parent().find('.toggle_cont').slideToggle();
$(this).removeClass('active');
}
});
$(this).toggleClass('active');
$(this).parent().find('.toggle_cont').slideToggle();
});
$(document).on('click touchstart', function (e) {
var container = $(".toggle-wrap");
if (!container.is(e.target)
&& container.has(e.target).length === 0 && container.find('.toggle').hasClass('active')) {
container.find('.active').toggleClass('active').parent().find('.toggle_cont').slideToggle();
}
})
});
})(jQuery);

2) И в кнопку вставить ссылку на корзину

<button type="button" data-loading-text="<?php echo $text_loading; ?>" class="toggle">
<a href="<?php echo $cart; ?>">
        <i class="material-design-shopping232"></i>
        <strong><?php echo $text_shopping_cart; ?></strong>
        <span id="cart-total" class="cart-total"><?php echo $text_items; ?></span>
        <?php if (isset($text_items2)) { ?><span id="cart-total2" class="cart-total2"><?php echo $text_items2; ?></span><?php } ?>
        <i class="material-design-drop25"></i></a>
    </button>

Должно помочь :)

tailbee · 21 вересня 2016

Можно.

1) Из /catalog/view/theme/theme629/js/script.js убираем функцию которая отвечает за действия при клике на кнопку корзины

/* Toggle
========================================================*/
;
(function ($) {
var o = $('.toggle');
$(document).ready(function () {
$('.toggle').click(function (e) {
e.preventDefault();
var tmp = $(this);
o.each(function () {
if ($(this).hasClass('active') && !$(this).is(tmp)) {
$(this).parent().find('.toggle_cont').slideToggle();
$(this).removeClass('active');
}
});
$(this).toggleClass('active');
$(this).parent().find('.toggle_cont').slideToggle();
});
$(document).on('click touchstart', function (e) {
var container = $(".toggle-wrap");
if (!container.is(e.target)
&& container.has(e.target).length === 0 && container.find('.toggle').hasClass('active')) {
container.find('.active').toggleClass('active').parent().find('.toggle_cont').slideToggle();
}
})
});
})(jQuery);

2) И в кнопку вставить ссылку на корзину

<button type="button" data-loading-text="<?php echo $text_loading; ?>" class="toggle">
<a href="<?php echo $cart; ?>">
        <i class="material-design-shopping232"></i>
        <strong><?php echo $text_shopping_cart; ?></strong>
        <span id="cart-total" class="cart-total"><?php echo $text_items; ?></span>
        <?php if (isset($text_items2)) { ?><span id="cart-total2" class="cart-total2"><?php echo $text_items2; ?></span><?php } ?>
        <i class="material-design-drop25"></i></a>
    </button>

Должно помочь :)

1) Я просто удаляю функцию Toogle? Полностью этот код?

2) А вставляю получается опять в cart.tpl? Вставляю и ничего не происходит.

Но у меня походу в одном диве находится карточка и топ меню. И при изменения устройства с ПК на мобильное происходит, что ваш код попадает в топ-меню.

<!-- <div id="stuck" class="stuck-menu"> -->
			
            <div class="header-bottom">  
			
			<ul class="list-unstyled top-menu col-sm-offset-3">
				<li class="home-button"><a href="<?php echo $home; ?>"><?php echo $text_home; ?></a></li>
				<li class="akcii-button"><a href="https://911hm.ru/akcii"><?php echo $text_special; ?></a></li>
				<li class="contact-button"><a href="<?php echo $contact; ?>"><?php echo $text_contact_name; ?></a></li>
				<!--<li class="blog-button"><a href="https://911hm.ru/blog"><?php echo $simple_blog_footer_heading; ?></a></li>-->
				
				
				
			</ul>
                
			<?php echo $cart; ?>
			
			</div>
			
        </div>

Что делать? Подскажите пожалуйста.

Так заглушка Ваша работает, но только в ПК версии.

Змінено 21 вересня 2016 користувачем tailbee

Вхід

Убрать выпадающие(toogle) корзину. А сделать просто кликабельной

Recommended Posts

tailbee

Надіслати

Поділитися на інших сайтах

Shagrath

Надіслати

Поділитися на інших сайтах

tailbee

Надіслати

Поділитися на інших сайтах

Shagrath

Надіслати

Поділитися на інших сайтах

tailbee

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Схожі публікації

batch [Поддержка] Универсальный массовый редактор товаров. MULTIEDIT AI 1 2 3 4 11

batch Універсальний масовий редактор товарів. MultiEdit AI

модуль [Поддержка] CART CACHE - кэшируем корзину (cart.php => getProducts) 1 2 3

Модуль Акции, Подарки PRO [Поддержка] 1 2 3 4 10

Акции, Подарки PRO

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Ваші замовлення

ocStore

Шаблони

OpenCart.Pro

Important Information