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

[Решено] Спойлера в карточке товара

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

Здравствуйте

Использую Opencart 1,5,6

Хотела вывести нужную инфу в спойлер в карточку товара (при  клике на ссылку опции наличие)

Не могу сдлать скрипт, который бы отображал спойлер для каждого товара на странице категории

к ссылке опции наличие и к спойлеру я добавила уникальный ид с номером товара

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


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

добавила

 <div id="id_<?php echo $product_id?>" class="spoiler">Content1</div> 
    <a href="id_<?php echo $product_id ?>" class="spoilerButton">Show/Hide1</a>
 <script type="text/javascript">
   jQuery(document).ready(function(){
        jQuery(".spoilerButton").click(function (e) { 
            e.preventDefault()
            var foo=jQuery(this).attr('href')
           jQuery('#'+foo).slideToggle(1000); 
        });
    });
</script>

но к href добавляется в начале слеш, поэтому не работает

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


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

:twisted:

<div id="spoiler_<?php echo $product_id; ?>" class="spoiler">Content1</div>
<a data-target-spoiler="spoiler_<?php echo $product_id; ?>" class="spoilerButton">Show/Hide1</a>
...
<script type="text/javascript">
$('.spoilerButton').click(function() {
var spoilerId = $(this).attr('data-target-spoiler');
$('#'+spoilerId).slideToggle(1000);
});
</script>

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


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

Все круто, но вот только странный эффект

Если бы захотел никогда б такого не получилось, а тут вот)

https://www.youtube.com/watch?v=g00fIzkNT9I

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


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

В итоге у меня получилось так

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

 <span><a id="displayText" class="nal" onclick="toggle_visibility('spoiler_<?php echo $product_id; ?>');">Опции/наличие </a> ▼</span>
<div style="display: none" id="spoiler_<?php echo $product_id; ?>">This is foo</div>

Спасибо

afwollis за участвие)

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


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

а при чем тут категории? :?

вот для них:

отправим к сравнению, чтоб наглядно было, поменяем product_id на правильную переменную, js обернем в "$(document).ready" и "slideToggle()" сделаем "slow"

      <div class="compare"><a onclick="addToCompare('<?php echo $product['product_id']; ?>');"><?php echo $button_compare; ?></a>
<div id="spoiler_<?php echo $product['product_id']; ?>" class="spoiler">Content1</div>
<a data-target-spoiler="spoiler_<?php echo $product['product_id']; ?>" class="spoilerButton">Show/Hide1</a>
      </div>
...
<script type="text/javascript">
$(document).ready(function() {
	$('.spoilerButton').click(function() {
		var spoilerId = $(this).attr('data-target-spoiler');
		$('#'+spoilerId).slideToggle('slow');
	});
});
</script>

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


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

Не могу сдлать скрипт, который бы отображал спойлер для каждого товара на странице категории писала же)

Изменено пользователем afwollis

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


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

ааааааа... недочитал несколько слов, получается... :rolleyes:

вот это

...toggle_visibility('spoiler_<?php echo $product_id; ?>')...
должно отдавать ошибку.

а с последним моим кодом всё ок :-)

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


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

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

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

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

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

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

Войти

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

Войти

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

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

×