Выставление опции товара в ряд — горизонтально

[cooper321]

Добрый день! Нашел на одном из сайтов инструкцию о том, как выставить опции горизонтально , вот источник откуда взята информация. Но в чем собственно проблема, после того как все было сделано согласно инструкции опции действительно стали отображаться горизонтально, НО вот в чем проблема, при выборе опции (нажатии на картинку опции) она не увеличивается. Пожалуйста подскажите как и где это можно вылечить?

Далее дословно пошаговая инструкция:

Изображения опций находятся в таблице, так что ее мы и будем немного изменять. Открываем файл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;}

[Tom]

http://www.opencart.com/index.php?route=extension/extension/info&extension_id=6804

[6ep]

А как с помощью этого добавления

Изменить размеры, выделенные во вложении? 

stylsheet.css - > .product-info .options - > ?