Помогите разместить опции в два столбца в карточке товара

[bitrate]

Хочу в карточке товара сделать для опций "Список" и "Текст" вывод в два столбца.

 

После прочтения темы: https://opencartforum.com/topic/16097-optcii-v-dva-stolbtca/?do=findComment&comment=111389 все равно опции размещаются в 1 столбик.

 

Что прописывал в css:

.product-info .option-select {
    margin-left: 0px;
    display: inline-table;
    padding: 5px 50px 5px 19px;
}
.product-info .option-type {
    display: inline-table !important;
    padding: 5px 10px 5px 10px;
}

Заменил часть кода в product.tpl из сообщения выше. И все равно, не меняется, хоть стреляйся.

 

Примеры, как хотелось бы в итоге получить:

http://opticamag.ru/contact-lenses/coloured-tinted/tutti-premium-color/

http://www.okplatya.ru/kukla-jekskljuzivnye-sovremennoe-dlinnoe-svadebnoe-plate-so-dlinnom-shlejfom-kruzhevo4000.html

 

Ссылка на пациента:

http://www.modnitsa.org/platya/kokteylnye-platya-vip/koktejlnoe-platje-premium-morin.html

 

Заранее благодарен откликнувшимся.

 

зы: сейчас файлы привел в первозданный вид, потому что коряво списки слезли вправо.

[Jedi]

Можно добавить в ".product-info .option-select"
float:left;

Но надо в шаблоне тег <br/> убрать.

p.s.

Вот так попробуйте

.product-info .option-select { 
display: inline-table;
float: left;
margin-left: 0px;
padding: 5px 75px 15px 0px;
}

[bitrate]

Сделал. Сейчас черти что получилось:

http://www.modnitsa.org/platya/kokteylnye-platya-vip/koktejlnoe-platje-premium-morin.html

 

Вставил Ваш код. Убрал br возле закрывающего тега div в 2 местах. Теперь Списки слева, но столбиком одним все равно

 

Убрал display: inline-table; - все встало в два столбца. Чет я не догоняю...  :ugeek:

 

Теперь надо победить поле "Текст". Убрал в шаблоне тег br после diva "text", прописал код в сss

.product-info .option-text { 

float: left;
margin-left: 0px;
padding: 5px 75px 15px 0px;
}

Поля опций просто сжались по вертикали. 

[Jedi]

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

class=option<?php if ($option['type'] == 'text') { ?>-text<?php } ?>

После чего создать стиль

.product-info .option-text { 
display: inline-table;
float: left;
margin-left: 0px;
padding: 5px 75px 15px 0px;
}

[bitrate]

Куда прописать?

[Jedi]

Найдите в product.tpl

        
<?php if ($option['type'] == 'text') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
          <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?>
          <b><?php echo $option['name']; ?>:</b><br />
          <input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['option_value']; ?>" />
        </div>
        <br />
        <?php } ?>

и замените на

        
<?php if ($option['type'] == 'text') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option-text">
          <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?>
          <b><?php echo $option['name']; ?>:</b><br />
          <input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['option_value']; ?>" />
        </div>
        <?php } ?>

Можете еще стиль добавить такой

.product-info .option-text input{

width:108px;

}

[bitrate]

Сделал. Они в один столбик все равно.

Стиль:

.product-info .option-text { 
display: inline-table;
float: left;
margin-left: 0px;
padding: 5px 75px 15px 0px;
}

br убираю - все то же самое. Елки-палки.

[Jedi]

Какой у вас браузер нажмите ctrl+f5

У меня так 

[bitrate]

Не до такой же степени все запущено :) Нажимаю. Смотрю, что поменять можно.

 

Хром. Обычный хром.

[Jedi]

Все я понял 

поменяйте 

padding: 5px 75px 15px 0px;

на

padding: 5px 65px 15px 0px;

[bitrate]

Дык 55 же еще круче. Адово плюсую и благодарю :)

 

А понаглеть можно?)

Хочу между опциями втулить div. Я могу просто вставить <div id="новый блок">Тут крутотень и текст<div> а потом запилить в css 

1) .новый блок {

}

2) #новый блок {

}

Как правильно сделать?

[Jedi]

Дык 55 же еще круче. Адово плюсую и благодарю :)

 

А понаглеть можно?)

Хочу между опциями втулить div. Я могу просто вставить <div id="новый блок">Тут крутотень и текст<div> а потом запилить в css 

1) .новый блок {

}

2) #новый блок {

}

Как правильно сделать?

 

если id="noviy-blok" то #noviy-blok{}

если class="noviy-blok" то .noviy-blok{}

[kds2001]

Вот бы теперь собрали в один пост весь алгоритм - как сделать два столбца в Опциях :)
Цены бы не было )) Готов отблагодарить.

[Jedi]

Вот бы теперь собрали в один пост весь алгоритм - как сделать два столбца в Опциях :)

Цены бы не было )) Готов отблагодарить.

 

в catalog/view/theme/ваш_шаблон/template/product/product.tpl надо найти код вывода опций и заменить class для каждого из типов опций на (class="option-text", class="option-select" и т.д.). Убрать <br />.

 

 

<?php if ($option['type'] == '(тип опции)') { ?>

<div id="option-<?php echo $option['product_option_id']; ?>" class="option-(тип опции)">

<?php if ($option['required']) { ?>

<span class="required">*</span>

<?php } ?>

<b><?php echo $option['name']; ?>:</b><br />

<input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['option_value']; ?>" />

</div>

<br />

<?php } ?>

 

и создать стили для классов в catalog/view/theme/ваш_шаблон/stylesheet/stylesheet.css. Типа таких:

.option-text { 
float: left;
margin-left: 0px;
padding: 5px (отступ справа в зависимости от ширины сайта)px 10px 0px;
}

P.S.

Можно сделать проще, создать стиль:

.product-info .option{
float: left;
margin-left: 0px;
padding: 5px (отступ справа в зависимости от ширины сайта)px 10px 0px;
}

Но в таком случае могут быть проблемы с textarea

[bitrate]

Сразу добавлю, попробовав на практике:

1) лучше использовать .option-text - так не "плывут" другие опции.

2) нужно смотреть за длиной значения опции, т.к. слишком длинные названия сбивают все снова в 1 столбик.

[l1key]

это все для какой версии ОС актуально ?