В комментариях к статье «OpenCart — как сделать всплывающие изображения в опциях товаров»
одним из частых вопросов был вопрос о расположении опций. Так что
сегодня мы рассмотрим именно этот момент — расположим опции в ряд —
горизонтально.
По умолчанию Opencart предоставляет опции вот в таком виде:
Мы же добьемся следующего — горизонтального расположения опций:
Код взят с OpenCart версии 1.5.3.1, но в
данном случае версия не столь важна, главное понять принцип и
использовать его при надобности.
Изображения опций находятся в таблице, так что ее мы и будем немного изменять. Открываем файл catalog\view\theme\default\template\product\product.tpl и находим div с классом «option» (приблизительно 119 строка).
а). Внутри находим таблицу и ее строке (tr) придадим собственный класс (строка 126). Теперь вместо
будет
<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;
}
|
Вот таким несложным способом мы изменили расположение опций: теперь
вместо того, чтобы выстраиваться столбцом, опции расположились рядами.
Если потребуется присвоить опциям более длинные названия, уменьшить или
увеличить отступы, то придется всего лишь немного подправить стили,
никаких манипуляций с файлами темы не потребуется.
Интернет магазин под заказ на любую тематику
Немає коментарів:
Дописати коментар