Добрый день! Нашел на одном из сайтов инструкцию о том, как выставить опции горизонтально , вот источник откуда взята информация. Но в чем собственно проблема, после того как все было сделано согласно инструкции опции действительно стали отображаться горизонтально, НО вот в чем проблема, при выборе опции (нажатии на картинку опции) она не увеличивается. Пожалуйста подскажите как и где это можно вылечить?
Далее дословно пошаговая инструкция:
Изображения опций находятся в таблице, так что ее мы и будем немного изменять. Открываем файлcatalog\view\theme\default\template\product\product.tpl и находим div с классом «option» (приблизительно 119 строка).
а). Внутри находим таблицу и ее строке (tr) придадим собственный класс (строка 126). Теперь вместо
<tr>
будет
<tr class="tr_my_options">
б). Также придадим класс для label, который отвечает за вывод названия опции (строка 129).
Было
<td><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
стало
<td><label class="name_my_options" for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
Что дало нам появление этих двух новых классов? Теперь мы можем задать этим элементам свои стили и отпозиционировать их как посчитаем нужным.
Если не вникать в строки кода и не изменять их по отдельности, можете заменить код (строки 126-134)
<tr> <td style="width: 1px;"><input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" /></td> <td><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" /></label></td> <td><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?> <?php if ($option_value['price']) { ?> (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>) <?php } ?> </label></td> </tr>
На этот код:
<tr class="tr_my_options"> <td style="width: 1px;"><input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" /></td> <td><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" /></label></td> <td><label class="name_my_options" for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?> <?php if ($option_value['price']) { ?> (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>) <?php } ?> </label></td> </tr>
в). Итак, сохраняем внесенные изменения и переходим кcatalog\view\theme\default\stylesheet\stylesheet.css. Добавим стиль нашим новым классам. Не буду подробно останавливаться на каждом пункте — для кого css знаком, код будет простым и понятным, кто же с ним не знаком, то и смысла нет вдаваться в подробности.
Код, добавленный мною, который привел к горизонтальному расположению опций, как на втором скриншоте, имеет следующий вид:
.tr_my_options {position: relative;float: left;width: 100px;margin-right: 10px;margin-bottom: 35px;}.name_my_options {position: absolute;top: 60px;left: 3px;right: 10px;text-align: center;}