Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

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


 Поделиться

Рекомендованные сообщения

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

 

После прочтения темы: 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

 

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

 

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

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


Можно добавить в ".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;
}
  • +1 1
Ссылка на комментарий
Поделиться на других сайтах


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

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

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

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


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

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;
}
  • +1 1
Ссылка на комментарий
Поделиться на других сайтах


Найдите в 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;

}

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


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

Стиль:

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

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

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


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

 

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

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

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

}

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

}

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

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


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

 

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

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

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

}

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

}

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

 

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

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

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


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

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


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

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

 

в 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
  • +1 2
Ссылка на комментарий
Поделиться на других сайтах


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

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

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

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


  • 2 года спустя...

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

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

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

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.