Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

[Решено] Делаем вертикальные вкладки на странице товара


 Поделиться

Рекомендованные сообщения

Делаем вкладки (tabs) на странице товара вертикальными.

Используем jQuery, эффект "Accordion". (плавное открытие вкладок)

=========================================================

Изображение

1). Качаем архив со скриптом (ссылка ниже) и распаковываем в папку catalog/view/javascript/jquery

2). Из этого же архива, распаковываем изображение tabs.png в папку catalog/view/theme/ВАША_ТЕМА/image

3). Открываем файл catalog/view/theme/ВАША_ТЕМА/template/common/header.tpl найдите строку:

<script type="text/javascript" src="catalog/view/javascript/jquery/tab.js"></script>
Замените на эту:

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.tools.min.js"></script>
4). Открываем файл catalog/view/theme/ВАША_ТЕМА/stylesheet/stylesheet.css и находим строки:

.tabs {
	width: 100%;
	height: 31px;
	margin-bottom: 0px;
}
.tabs a {
	float: left;
	display: block;
	padding: 6px 15px 7px 15px;
	margin-right: 2px;
	border-top: 1px solid #DDDDDD;
	border-bottom: 1px solid #DDDDDD;
	border-left: 1px solid #DDDDDD;
	border-right: 1px solid #DDDDDD;
	background: #FFFFFF url('../image/tab_3.png') repeat-x;
	color: #000000;
	font-weight: bold;
	font-size: 13px;
	text-decoration: none;
	z-index: 1;
	position: relative;
	top: 1px;
}
.tabs a.selected {
	background: #FFFFFF url('../image/tab_3.png') repeat-x;
	border-bottom: 0px;
	padding-bottom: 8px;
	z-index: 3;
}
.tab_page {
	border: 1px solid #DDDDDD;
	background: #FFFFFF;
	padding: 10px;
	display: block;
	z-index: 2;
	margin-bottom: 10px;
}
Меняем их на эти:

#accordion {
width: 100%;
}
#accordion h2 {
	cursor:pointer;
	background: url("../image/tabs.png") top left no-repeat;
	background-position:0px 0px;
	background-color:#F7F7F7;
	padding:7px 30px;
	border:1px solid #e1e1e1;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	font-size:14px;
	margin:2px 0;
}
#accordion h2.current {
	background: url("../image/tabs.png") top left no-repeat;
	background-position:0px -32px;
	background-color:#F7F7F7;
	font-size: 14px;
	color: #838b8b; /* цвет текста (надпись) на открытой вкладке */
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
}

#accordion .pane {
	background-color:#ffffff;
	display: none;
	font-size: 12px;
	padding:15px;
}
5). Открываем файл catalog/view/theme/ВАША_ТЕМА/template/product/product.tpl и находим (в районе 110 строки):

<div class="tabs">
Эту строку, и всё что идёт после неё (до самого конца) меняем на эти:

	<div id="note"></div>	
	<div id="accordion">
	<h2 class="current"><?php echo $tab_description; ?></h2>
	<div class="pane" style="display:block"><?php echo $description; ?></div>	

<?php if ($images) { ?>	  
<h2><?php echo $tab_image; ?></h2>
<div id="tab_image" class="pane">
	  <div id="tab_image"></div>
	  <div class="heading" id="tab_image"></div>
	  <div style="display: inline-block;">
		<?php foreach ($images as $image) { ?>
		<div style="display: inline-block; float: left; text-align: center; margin-left: 5px; margin-right: 5px; margin-bottom: 10px;"><a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="thickbox" rel="gallery"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" style="border: 1px solid #DDDDDD; margin-bottom: 3px;" /></a><br />
	  </div>
	  <?php } ?>
	  </div>
</div>
<?php } ?>

<?php if ($products) { ?>
<h2><?php echo $tab_related; ?> (<?php echo count($products); ?>)</h2>
<div id="tab_review" class="pane">
<div id="tab_review"></div>
	  <table class="list">
		<?php for ($i = 0; $i < sizeof($products); $i = $i + 4) { ?>
		<tr>
		  <?php for ($j = $i; $j < ($i + 4); $j++) { ?>
		  <td width="25%"><?php if (isset($products[$j])) { ?>
			<a href="<?php echo str_replace('&', '&', $products[$j]['href']); ?>"><img src="<?php echo $products[$j]['thumb']; ?>" title="<?php echo $products[$j]['name']; ?>" alt="<?php echo $products[$j]['name']; ?>" /></a><br />
			<a href="<?php echo str_replace('&', '&', $products[$j]['href']); ?>"><?php echo $products[$j]['name']; ?></a><br />
			<span style="color: #999; font-size: 11px;"><?php echo $products[$j]['model']; ?></span><br />
			<?php if ($display_price) { ?>
			<?php if (!$products[$j]['special']) { ?>
			<span style="color: #900; font-weight: bold;"><?php echo $products[$j]['price']; ?></span>
			<?php } else { ?>
			<span style="color: #900; font-weight: bold; text-decoration: line-through;"><?php echo $products[$j]['price']; ?></span> <span style="color: #F00;"><?php echo $products[$j]['special']; ?></span>
			<?php } ?>
			<?php } ?>
			<br />
			<?php if ($products[$j]['rating']) { ?>
			<img src="catalog/view/theme/default/image/stars_<?php echo $products[$j]['rating'] . '.png'; ?>" alt="<?php echo $products[$j]['stars']; ?>" />
			<?php } ?>
			<?php } ?></td>
		  <?php } ?>
		</tr>
		<?php } ?>
	</table>
	</div>
	  <?php } ?>
	
<?php if ($review_status) { ?>
<h2><?php echo $tab_review; ?></h2>
<div id="tab_review" class="pane">
	  <div id="review"></div>
	  <div class="heading" id="review_title"><?php echo $text_write; ?></div>
	  <div class="content"><b><?php echo $entry_name; ?></b><br />
		<input type="text" name="name" value="" />
		<br />
		<br />
		<b><?php echo $entry_review; ?></b>
		<textarea name="text" style="width: 98%;" rows="8"></textarea>
		<span style="font-size: 11px;"><?php echo $text_note; ?></span><br />
		<br />
		<b><?php echo $entry_rating; ?></b> <span><?php echo $entry_bad; ?></span>
		<input type="radio" name="rating" value="1" style="margin: 0;" />
		
		<input type="radio" name="rating" value="2" style="margin: 0;" />
		
		<input type="radio" name="rating" value="3" style="margin: 0;" />
		
		<input type="radio" name="rating" value="4" style="margin: 0;" />
		
		<input type="radio" name="rating" value="5" style="margin: 0;" />
		  <span><?php echo $entry_good; ?></span><br />
		<br />
		<b><?php echo $entry_captcha; ?></b><br />
		<input type="text" name="captcha" value="" autocomplete="off" />
		<br />
		<img src="index.php?route=product/product/captcha" id="captcha" /></div>
	  <div class="buttons">
		<table>
		  <tr>
			<td align="right"><a onclick="review();" class="button"><span><?php echo $button_continue; ?></span></a></td>
		  </tr>
		</table>
	  </div>
	</div>
	<?php } ?>	
</div>

<script type="text/javascript"><!--
$('#review .pagination a').live('click', function() {
	$('#review').slideUp('slow');
	$('#review').load(this.href);
	$('#review').slideDown('slow');
	return false;
});			
$('#review').load('index.php?route=product/product/review&product_id=<?php echo $product_id; ?>');
function review() {
	$.ajax({
		type: 'POST',
		url: 'index.php?route=product/product/write&product_id=<?php echo $product_id; ?>',
		dataType: 'json',
		data: 'name=' + encodeURIComponent($('input[name='name']').val()) + '&text=' + encodeURIComponent($('textarea[name='text']').val()) + '&rating=' + encodeURIComponent($('input[name='rating']:checked').val() ? $('input[name='rating']:checked').val() : '') + '&captcha=' + encodeURIComponent($('input[name='captcha']').val()),
		beforeSend: function() {
			$('.success, .warning').remove();
			$('#review_button').attr('disabled', 'disabled');
			$('#review_title').after('<div class="wait"><img src="catalog/view/theme/default/image/loading_1.gif" alt="" /> <?php echo $text_wait; ?></div>');
		},
		complete: function() {
			$('#review_button').attr('disabled', '');
			$('.wait').remove();
		},
		success: function(data) {
			if (data.error) {
				$('#review_title').after('<div class="warning">' + data.error + '</div>');
			}
			if (data.success) {
				$('#review_title').after('<div class="success">' + data.success + '</div>');
				$('input[name='name']').val('');
				$('textarea[name='text']').val('');
				$('input[name='rating']:checked').attr('checked', '');
				$('input[name='captcha']').val('');
			}
		}
	});
}

</script>
<script type="text/javascript">	
$(function() {
$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
});
</script>

<script type="text/javascript">
$.tools.tabs.addEffect("slide", function(i, done) {
this.getPanes().slideUp().css({backgroundColor: "#ffffff"});
this.getPanes().eq(i).slideDown(function() {
$(this).css({backgroundColor: 'transparent'});
done.call();
});
});
</script>

</div>
  <div class="bottom">
	<div class="left"></div>
	<div class="right"></div>
	<div class="center"></div>
  </div>
  <?php if ($tags) { ?>
  <div class="tags"><?php echo $text_tags; ?>
  <?php foreach ($tags as $tag) { ?>
  <a href="<?php echo $tag['href']; ?>"><?php echo $tag['tag']; ?></a>,
  <?php } ?>
  </div>
  <?php } ?>
</div>

<?php echo $footer; ?>
6). Зайти в админку и изменить "Размер дополнительных изображений" (Additional Produst Image Size) со 150 на 120.

Всё.

Если у кого то возникают ошибки, воспользуйтесь файлом product.tpl из архива. Просто замените его.

(Не забываем про бекап.)

[Отредактировано 13 апр. в 13:46] Поправил код..

new_tabs.zip

Изменено пользователем tim21701
  • +1 1
Ссылка на комментарий
Поделиться на других сайтах

Внёс небольшие изменения.. Пример полностью рабочий.

Добавлено:

Если у товара нет дополнительных изображений и рекомендуемых товаров - то эти вкладки не отображаются.

Изображение

===============================================================

Убедительная просьба отписаться тех - кто поставил, о корректном отображении вкладок.

Проверено в браузерах:

Safari 5.0.4 (7533.20.27)

Opera 11.01 (1190)

Internet Explorer 6 (2900.2180)

Google Chrome 10.0 (648.204)

Всё работает.

Ссылка на комментарий
Поделиться на других сайтах

сделал всё так как написано! НЕПОЛУЧИЛОСЬ! заменил продукт.тпл на тот что в теме все равно НЕПОЛУЧИЛОСЬ!

в обоих случаях выходит так:

Изображение

Ссылка на комментарий
Поделиться на других сайтах


сделал всё так как написано! НЕПОЛУЧИЛОСЬ! заменил продукт.тпл на тот что в теме все равно НЕПОЛУЧИЛОСЬ!

Пропишите в header.tpl правильный путь к скрипту, должно быть вот так:

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.tools.min.js"></script>
Сори, это я ступил... ;) Тему поправил.
  • +1 1
Ссылка на комментарий
Поделиться на других сайтах

поправил! всё равно также...

Такого быть не может. :D У Вас в header.tpl должна быть вот такая строка прописана:

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.tools.min.js"></script>
Вместо этой:

<script type="text/javascript" src="catalog/view/javascript/jquery/tab.js"></script>
И, если Вы всё сделали в точности - как написано в первом посте, то всё заработает.

P.S.

Только что на "голом" сайте поставил - так как написано. Всё работает. Проверьте у себя ещё раз...
Ссылка на комментарий
Поделиться на других сайтах

а что было написано в первом посте перед тегом <head> а то я случайно его удалил_) может проблема из за этого

Ссылка на комментарий
Поделиться на других сайтах


- А есть ссылка где можно поглазеть ? :blink:

Вот Вы у себя поставите и разместите тут ссылку... :rolleyes:
Ссылка на комментарий
Поделиться на других сайтах

а что было написано в первом посте перед тегом <head> а то я случайно его удалил_) может проблема из за этого

Как это удалили, не понял? :D Естественно, что после этого у Вас ничего и работать не будет...

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.tools.min.js"></script>
Ссылка на комментарий
Поделиться на других сайтах

Вот Вы у себя поставите и разместите тут ссылку... :rolleyes:

Будем ждать тех трёх человек, с сылками, кто уже грузанул архив :)
Ссылка на комментарий
Поделиться на других сайтах


Будем ждать тех трёх человек, с сылками, кто уже грузанул архив

Я смотрю, не особо оно кому и надо... 100 просмотров за сутки и только три человека скачало... ;)
Ссылка на комментарий
Поделиться на других сайтах

Этот патчь специально для ocStore или на OpenCart поставится?

:D :D :D Похоже, кто то ещё от 1-го Апреля не отошел... :D :D
Ссылка на комментарий
Поделиться на других сайтах

Я смотрю, не особо оно кому и надо...

Думаю, тут Вы правы. ИМХО, такой способ выдачи инфы более громоздким кажется. Да и менее удобный он, чем дефолтный. Ибо для того, чтобы увидеть всю возможную инфу по товару, надо прокрутить всё описание и только потом видно, что есть, оказывается, ещё и фотки и отзывы и т.п. А описания большие бывают. :) А читать их не все любят. А догадаться, что там внизу ещё что-то есть таки не каждому дано. :)

Вот поэтому из 100 просмотревших только 3 скачали. И то не факт, что поставят. :)

Это я не из вредности пишу, а высказываю предположение, почему никто не качает. :) А за труды Ваши, в любом случае, спасибо. Ибо есть куча других интересных полезностей, которые Вы выложили. ;)

ЗЫ. Кстати, стали терзать меня смутные сомнения... А описание товара само не открывается, при переходе на него? Оно открывается только, когда на него ткнёшь? Если это даже и так - то всё равно неудобно! :P

Ссылка на комментарий
Поделиться на других сайтах


Проэкспериментировал :rolleyes: .

На главной перестал крутиться слайдер, под товаром пропал фон (частично), а так всё просто замечательно работает. Вообщем не для моего шаблона.

Но выглядит 100 пудов привлекательней ;).

Ссылка на комментарий
Поделиться на других сайтах


  • 2 месяца спустя...

Может, кто подсказать, почему после установки этого хозяйства пропадает реклама от гугла и слайдер на главной как полотно Казимира Малевича?

Явно что-то со скриптами, но скрипты для меня это - темный, дремучий лес! Есть с этого дремучего царства выход, аль нет? Вроде и фишка нечёшная тока вот выхода не видать!

Буду премного благодарен за свет в конце тоннеля, ну или хотя бы за маячок . . .

Ссылка на комментарий
Поделиться на других сайтах


  • 4 месяца спустя...

Я смотрю, не особо оно кому и надо...

для SEO по ключевым словам я как раз искал такую возможность: показать на странице товара одновременно его описание и отзывы.

это может дать больше ключевых слов о товаре на странице.

есть просьба: что нужно изменить в моде, чтобы сразу были развернуты и описание и отзывы?

Ссылка на комментарий
Поделиться на других сайтах


Kirillius7777, они и так там одноврменно. Откройте код страницы и убедитесь.

согласен.спасибо.

но я рад что затронул этот вопрос.

у меня в коде нет отзывов. а этого не может быть - ведь на странице они есть...

наверно я не так код смотрю, но описание и рекомендуемые товары есть. а где отзывы в коде?

Ссылка на комментарий
Поделиться на других сайтах


Значит аяксом грузится динамически. Посмотрите в Опере или Firefox - правой кнопкой и Inspect Element. Там увидите.

Ссылка на комментарий
Поделиться на других сайтах


Значит аяксом грузится динамически. Посмотрите в Опере или Firefox - правой кнопкой и Inspect Element. Там увидите.

я только сейчас понял, что поисковик не видит отзывы, правда их у меня еще совсем мало, но нужно срочно

что-то придумать пока конкуренты не используют дорогое SEO и отзывы могут существенно поднять рейтинг.

Ссылка на комментарий
Поделиться на других сайтах


Сам факт наличия отзывов на страницах виден при поиске: google: site:a4u.com.ua отзывы

Поэтому те, кто ищут отзывы на товары, вполне могут найти.

Хотя да, надо бы подумать, зачем сделано именно так. Я бы тоже предпочёл наверное, чтобы они там были сразу.

Ссылка на комментарий
Поделиться на других сайтах


Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.