COVID2019 и это вот все. Друзья, вся эта история начинает плохо пахнет. Мойте руки, не ходите в люди. Отложите все плановые покупки и положите в носок заначку. Заприте ваших родителей, бабушек-дедушек на даче. Лучше перебдеть чем недобдеть. Берегите себя!

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


Recommended Posts

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

не скажите как сделать в 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;
}

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

 

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

12.png

Ссылка на комментарий
Поделиться на других сайтах

А какая разница какая версия? Вполне рабочий вариант, нужно залезть в верстку. Поправить 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;
}

 

Ссылка на комментарий
Поделиться на других сайтах

  • RHCk changed the title to Перенос опций в ряд

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

 

 

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

Изменено пользователем RHCk
Код и картинки убираем под спойлер!
Ссылка на комментарий
Поделиться на других сайтах

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Гость
Ответить в тему...

×   Вы вставили отформатированное содержимое.   Удалить форматирование

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу