Перейти к содержанию
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

 

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

 

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

Поделиться сообщением


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

Можно добавить в ".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 убираю - все то же самое. Елки-палки.

Поделиться сообщением


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

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

У меня так 

post-668415-0-85154200-1377768670_thumb.png

  • +1 1

Поделиться сообщением


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

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

 

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

Поделиться сообщением


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

Все я понял 

поменяйте 

padding: 5px 75px 15px 0px;

на

padding: 5px 65px 15px 0px;

  • +1 2

Поделиться сообщением


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

Дык 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

Поделиться сообщением


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

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

Поделиться сообщением


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

Для публикации сообщений создайте учётную запись или авторизуйтесь

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

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

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

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