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

tim21701 · 12 квітня 2011

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

Змінено 22 січня 2013 користувачем tim21701

tim21701 · 12 квітня 2011

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

Добавлено:

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

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

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

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

Safari 5.0.4 (7533.20.27)

Opera 11.01 (1190)

Internet Explorer 6 (2900.2180)

Google Chrome 10.0 (648.204)

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

Wars · 13 квітня 2011

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

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

tim21701 · 13 квітня 2011

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

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

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

Сори, это я ступил... ;) Тему поправил.

Wars · 13 квітня 2011

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

tim21701 · 13 квітня 2011

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

Такого быть не может. :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.

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

Wars · 13 квітня 2011

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

gdi31 · 13 квітня 2011

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

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

tim21701 · 13 квітня 2011

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

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

tim21701 · 13 квітня 2011

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

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

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

gdi31 · 13 квітня 2011

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

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

tim21701 · 13 квітня 2011

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

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

UncleAndy · 13 квітня 2011

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

tim21701 · 13 квітня 2011

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

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

UncleAndy · 13 квітня 2011

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

monax · 13 квітня 2011

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

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

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

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

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

tim21701 · 13 квітня 2011

Поправил первый пост.

gdi31 · 16 квітня 2011

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

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

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

gdi31 · 23 червня 2011

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

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

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

Kirillius7777 · 11 листопада 2011

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

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

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

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

rb2 · 11 листопада 2011

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

Kirillius7777 · 14 листопада 2011

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

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

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

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

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

rb2 · 14 листопада 2011

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

Kirillius7777 · 14 листопада 2011

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

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

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

rb2 · 14 листопада 2011

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

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

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

Вхід

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

Recommended Posts

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

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

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

Вхід

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

Покупцям

Розробникам

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

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

Important Information