Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


Recommended Posts

Делаем вкладки (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> а то я случайно его удалил_) может проблема из за этого

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

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.tools.min.js"></script>
Надіслати
Поділитися на інших сайтах

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

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

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

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

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

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

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

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


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

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

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

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


  • 2 months later...

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

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

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

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


  • 4 months later...

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

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

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

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

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


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

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

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

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

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

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


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

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

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

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


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

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

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

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


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

Ви повинні бути користувачем, щоб залишити коментар

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

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

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

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.