Вывод характеристик в каталоге товаров.

[Oday11]

Подскажите пожалуйста где я туплю.

Сделал вывод характеристик товаров в каталоге для каждого товаров.

Пример :

 https://oday.com.ua/tumbu/tumbu-iz-dsp/

Если нажать на первом товаре "Посмотреть Характеристики" то все работает как мне нужно, открывается и закрывается, вообщем все норм.А Вот если нажать тоже самое на втором или любом другом кроме первого, то просто выкидывает на главную страницу сайт.

Подскажите решение пожалуйста.

Кусок кода который вставил в category.tpl :

 

<a id="toggler" href="#">Посмотреть Характеристики</a>
<div id="box" style="display: none;">
    <?php if($product['attribute_groups']) { ?>
    <table>
        <?php foreach($product['attribute_groups'] as $attribute_group) { ?>
        <thead><!--названия групп-->
        <tr>
            <td colspan="2"><?php echo $attribute_group['name']; ?></td>
        </tr>
        </thead><!---->
        <tbody>
        <?php foreach($attribute_group['attribute'] as $attribute) { ?>
        <tr>
            <td><?php echo $attribute['name']; ?></td>
            <td><?php echo $attribute['text']; ?></td>
        </tr>
        <?php } ?>
        </tbody>
        <?php } ?>
    </table>
    <?php } ?>

</div>
<script>
    window.onload= function() {
        document.getElementById('toggler').onclick = function() {
            openbox('box', this);
            return false;
        };
    };
    function openbox(id, toggler) {
        var div = document.getElementById(id);
        if(div.style.display == 'block') {
            div.style.display = 'none';
            toggler.innerHTML = 'Посмотреть Характеристики';
        }
        else {
            div.style.display = 'block';
            toggler.innerHTML = 'Закрыть';
        }
    }

</script>

[PaulKravchenko]

13 минут назад, Oday11 сказал:

getElementById

у вас элементы имеют один и тот же ID, поэтому "кто первый встал - того и тапки"

можете уникализировать id ссылки, например так: <a id="toggler_<?php echo $product['product_id']; ?>" href="#">

а в скрипте также document.getElementById('toggler_<?php echo $product['product_id']; ?>').onclick = function() {

Змінено 8 жовтня 2019 користувачем PaulKravchenko

[Oday11]

5 минут назад, PaulKravchenko сказал:

у вас элементы имеют один и тот же ID, поэтому "кто первый встал - того и тапки"

Как исправить можете подсказать? в Скрипте дубовый наглухо...

Поздно обновил, Спасибо, буду пробывать.

Змінено 8 жовтня 2019 користувачем Oday11

[PaulKravchenko]

Только что, Oday11 сказал:

Как исправить можете подсказать?

Дописал в предыдущем посте, сорри, подумал после только)

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

[Oday11]

4 минуты назад, PaulKravchenko сказал:

Дописал в предыдущем посте, сорри, подумал после только)

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

И на первом товаре перестало работать)

[PaulKravchenko]

@Oday11 извините, тупанул))

 

Предлагаю вам более элегантное решение, без дополнительной требухи, только бутстрап

<a data-toggle="collapse" href="#attributes<?php echo $product['product_id']; ?>" aria-expanded="false" aria-controls="attributes<?php echo $product['product_id']; ?>">Посмотреть Характеристики</a>
<div class="collapse multi-collapse" id="attributes<?php echo $product['product_id']; ?>">
    <?php if($product['attribute_groups']) { ?>
    <table>
        <?php foreach($product['attribute_groups'] as $attribute_group) { ?>
        <thead><!--названия групп-->
        <tr>
            <td colspan="2"><?php echo $attribute_group['name']; ?></td>
        </tr>
        </thead><!---->
        <tbody>
        <?php foreach($attribute_group['attribute'] as $attribute) { ?>
        <tr>
            <td><?php echo $attribute['name']; ?></td>
            <td><?php echo $attribute['text']; ?></td>
        </tr>
        <?php } ?>
        </tbody>
        <?php } ?>
    </table>
    <?php } ?>
</div>

И скрипт не нужен. Ну разве что текст ссылки не меняется при раскрытии/сворачивании

[Oday11]

1 час назад, PaulKravchenko сказал:

@Oday11 извините, тупанул))

 

Предлагаю вам более элегантное решение, без дополнительной требухи, только бутстрап

<a data-toggle="collapse" href="#attributes<?php echo $product['product_id']; ?>" aria-expanded="false" aria-controls="attributes<?php echo $product['product_id']; ?>">Посмотреть Характеристики</a>
<div class="collapse multi-collapse" id="attributes<?php echo $product['product_id']; ?>">
    <?php if($product['attribute_groups']) { ?>
    <table>
        <?php foreach($product['attribute_groups'] as $attribute_group) { ?>
        <thead><!--названия групп-->
        <tr>
            <td colspan="2"><?php echo $attribute_group['name']; ?></td>
        </tr>
        </thead><!---->
        <tbody>
        <?php foreach($attribute_group['attribute'] as $attribute) { ?>
        <tr>
            <td><?php echo $attribute['name']; ?></td>
            <td><?php echo $attribute['text']; ?></td>
        </tr>
        <?php } ?>
        </tbody>
        <?php } ?>
    </table>
    <?php } ?>
</div>

И скрипт не нужен. Ну разве что текст ссылки не меняется при раскрытии/сворачивании

На локалке протестировал, все супер!Благодарю!