Jump to content
Sign in to follow this  
bitrate

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

Recommended Posts

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

 

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

 

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

 

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

Share this post


Link to post
Share on other sites

Можно добавить в ".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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Стиль:

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

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

Share this post


Link to post
Share on other sites

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

У меня так 

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

  • +1 1

Share this post


Link to post
Share on other sites

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

 

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

Share this post


Link to post
Share on other sites

Все я понял 

поменяйте 

padding: 5px 75px 15px 0px;

на

padding: 5px 65px 15px 0px;

  • +1 2

Share this post


Link to post
Share on other sites

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

 

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

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

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

}

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

}

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

Share this post


Link to post
Share on other sites

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

 

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

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

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

}

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

}

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

 

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

 

в 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

Share this post


Link to post
Share on other sites

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

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

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

  • +1 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

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

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  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.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.