Перейти к содержанию
tim21701

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

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

Делаем вкладки (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:

Поделиться сообщением


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

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

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

Поделиться сообщением


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

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

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

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.tools.min.js"></script>

Поделиться сообщением


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

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

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

Поделиться сообщением


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

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

Я смотрю, не особо оно кому и надо... 100 просмотров за сутки и только три человека скачало... ;)

Поделиться сообщением


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

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

Поделиться сообщением


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

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

:D :D :D Похоже, кто то ещё от 1-го Апреля не отошел... :D :D

Поделиться сообщением


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

Попробовал поставить - остановился на правке html. Слишкам многа букаф, сорри.

Поделиться сообщением


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

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

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Поправил первый пост.

Поделиться сообщением


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

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

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

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

Поделиться сообщением


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

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

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

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

Поделиться сообщением


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

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

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

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

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

Поделиться сообщением


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

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

Поделиться сообщением


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

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

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

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

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

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

Поделиться сообщением


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

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

Поделиться сообщением


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

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

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

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

Поделиться сообщением


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

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

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

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

Поделиться сообщением


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

Для публикации сообщений создайте учётную запись или авторизуйтесь

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

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

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

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