Перенос опций в ряд

[Vikas]

Добрый вечер,

не скажите как сделать в OPENCART.PRO 2.Х ('VERSION', '2.3.0.2.1')

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

 

Скрытый текст

 

Изображения опций находятся в таблице, так что ее мы и будем немного изменять. Открываем файл catalog\view\theme\default\template\product\product.tpl и находим div с классом «option» (приблизительно 119 строка).

а). Внутри находим таблицу и ее строке (tr) придадим собственный класс (строка 126). Теперь вместо

 

1

<tr>

 будет

 

1	<tr class="tr_my_options">

б). Также придадим класс для label, который отвечает за вывод названия опции (строка 129).

 

Было

 

1	<td><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>

стало

 

1	<td><label class="name_my_options" for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>

Что дало нам появление этих двух новых классов? Теперь мы можем задать этим элементам свои стили и отпозиционировать их как посчитаем нужным.

Если не вникать в строки кода и не изменять их по отдельности, можете заменить код (строки 126-134)

 

1 2 3 4 5 6 7 8 9

<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>

На этот код:

 

1 2 3 4 5 6 7 8 9

<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 знаком, код будет простым и понятным, кто же с ним не знаком, то и смысла нет вдаваться в подробности.

Код, добавленный мною, который привел к горизонтальному расположению опций, как на втором скриншоте, имеет следующий вид:

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14

.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; }

Вот таким несложным способом мы изменили расположение опций: теперь вместо того, чтобы выстраиваться столбцом, опции расположились рядами. Если потребуется присвоить опциям более длинные названия, уменьшить или увеличить отступы, то придется всего лишь немного подправить стили, никаких манипуляций с файлами темы не потребуется.

 

Скрытый текст

[satyr]

А какая разница какая версия? Вполне рабочий вариант, нужно залезть в верстку. Поправить product.tpl и стили.
У меня примерно так выглядит

<div id="input-option555">
	<div class="radio">
		<label>
		<input type="radio" name="option[555]" value="11111">XL</label>
	</div>
	<div class="radio">
		<label>
		<input type="radio" name="option[555]" value="33333">XXL</label>
	</div>
	<div class="radio">
		<label>
		<input type="radio" name="option[555]" value="33333">XXXL</label>
	</div>
</div>

#product .form-group.icon .radio {
    display: inline-block;
    margin: 0;
}

 

[Vikas]

@satyr получается что я должен поправить product.tpl этот код 

Скрытый текст

<?php } ?>
            <?php if ($option['type'] == 'checkbox') { ?>
            <div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
              <label class="control-label"><?php echo $option['name']; ?></label>
              <div id="input-option<?php echo $option['product_option_id']; ?>">
                <?php foreach ($option['product_option_value'] as $option_value) { ?>
                <div class="checkbox">
                  <label>
                    <input type="checkbox" name="option[<?php echo $option['product_option_id']; ?>][]" 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 } ?>

 

на

Скрытый текст

<?php } ?>
            <?php if ($option['type'] == 'checkbox') { ?>
            <div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
              <label class="control-label"><?php echo $option['name']; ?></label>
              <div id="input-option<?php echo $option['product_option_id']; ?>">
                <?php foreach ($option['product_option_value'] as $option_value) { ?>
                <div class="checkbox">
                  <label>
                    <input type="checkbox" name="mynewoption[<?php echo $option['product_option_id']; ?>][]" 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 } ?>

 

а в стиле добавить

Скрытый текст

.name_mynewoption {
position: absolute;
float: left;
width: 100px;
top: 60px;
left: 3px;
right: 10px;
text-align: center;
}

 

 

Правильно понимаю или допустил ошибку?

Изменено January 31, 2017 пользователем RHCk
Код и картинки убираем под спойлер!

[satyr]

Цитата

Правильно понимаю или допустил ошибку?

А зачем переименовывать опцию? Просто меняйте стили. Пробуйте по живому в браузере. Когда начнет получаться, перенесете наработки в шаблон.
Смотрите в пример, который вы привели. Там более наглядно. Но там чуток колхозно, через таблицу, лучше обойтись без таблиц.

[Vikas]

@satyr все этот раз получилось с первого раз, благодарю тк по Вашему совету не добавил не какой новый стиль просто в bootstrap.min.css, 

поменял display: block; на display: inline-block;

.checkbox {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;

 

и вот результат (поменяю немножко цвета и все будет гуд).

 

http://prntscr.com/e2vde1

 

Еще раз благодарен Вас за помощь

[jaffagold]

Скрытый текст

 

#product .checkbox label, #product .radio label {

border: 1 px solid grey;

border-radius: 3 px;

padding: 4 px;

}

 

сделайте еще стили для label, что-то типа:

 тогда появится рамочка вокруг пары чекбокс-значение.

[Vikas]

Ок благодарю