Как группе опций присвоить класс?

[AlexDev]

Есть опции цвета, есть опции размера, в виде радиокнопок, которые нужно стилизовать.

Как это сделать? не вижу тут возможности задания класса для опции

[jaffagold]

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

#product .checkbox label, #product .radio label {}

Этого недостаточно?

[AlexDev]

1 час назад, jaffagold сказал:

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

#product .checkbox label, #product .radio label {}

Этого недостаточно?

 

Нет конечно.

Вы написали стиль ко всем радиокнопкам.

А у меня вопрос как задать стиль радиокнопке определенного типа.

Например для кнопок с размерами одежды - свой стиль

Для кнопок выбора цвета - другой стиль

Для кнопок какой-нибудь там.. чего-то еще - третий стиль.

 

 

сейчас там все одно:

<div class="form-group required">

 

 

[jaffagold]

catalog\view\theme\default\template\product\/product.tpl

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

<?php if ($option['type'] == 'select') { ?>
            <div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
              <label class="control-label" for="input-option<?php echo $option['product_option_id']; ?>"><?php echo $option['name']; ?></label>
              <select name="option[<?php echo $option['product_option_id']; ?>]" id="input-option<?php echo $option['product_option_id']; ?>" class="form-control">
                <option value=""><?php echo $text_select; ?></option>
                <?php foreach ($option['product_option_value'] as $option_value) { ?>
                <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 } ?>
                </option>
                <?php } ?>
              </select>
            </div>
            <?php } ?>
            <?php if ($option['type'] == 'radio') { ?>
            <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="radio">
                  <label>
                    <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
                    <?php if ($option_value['image']) { ?>
                    <img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" /> 
                    <?php } ?>                    
                    <?php echo $option_value['name']; ?>
                    <?php if ($option_value['price']) { ?>
                    (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                    <?php } ?>
                  </label>
                </div>
                <?php } ?>
              </div>
            </div>
            <?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 if ($option_value['image']) { ?>
                    <img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" /> 
                    <?php } ?>
                    <?php echo $option_value['name']; ?>
                    <?php if ($option_value['price']) { ?>
                    (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                    <?php } ?>
                  </label>
                </div>
                <?php } ?>
              </div>
            </div>
            <?php } ?>

... и так далее

div class="form-group" повторяющийся блок. Там еще куча мест, куда можно привязаться стилями.

<div class="radio"> и тому подобное. Если надо что-то особое, то тогда придется вытягивать id опции, по нему писать условие и менять вывод именно для этой опции.

 Если этого мало, то можно дописать свои стили.

[AlexDev]

13 минуты назад, jaffagold сказал:

catalog\view\theme\default\template\product\/product.tpl

  Показать содержимое

<?php if ($option['type'] == 'select') { ?>
            <div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
              <label class="control-label" for="input-option<?php echo $option['product_option_id']; ?>"><?php echo $option['name']; ?></label>
              <select name="option[<?php echo $option['product_option_id']; ?>]" id="input-option<?php echo $option['product_option_id']; ?>" class="form-control">
                <option value=""><?php echo $text_select; ?></option>
                <?php foreach ($option['product_option_value'] as $option_value) { ?>
                <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 } ?>
                </option>
                <?php } ?>
              </select>
            </div>
            <?php } ?>
            <?php if ($option['type'] == 'radio') { ?>
            <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="radio">
                  <label>
                    <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
                    <?php if ($option_value['image']) { ?>
                    <img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" /> 
                    <?php } ?>                    
                    <?php echo $option_value['name']; ?>
                    <?php if ($option_value['price']) { ?>
                    (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                    <?php } ?>
                  </label>
                </div>
                <?php } ?>
              </div>
            </div>
            <?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 if ($option_value['image']) { ?>
                    <img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" /> 
                    <?php } ?>
                    <?php echo $option_value['name']; ?>
                    <?php if ($option_value['price']) { ?>
                    (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                    <?php } ?>
                  </label>
                </div>
                <?php } ?>
              </div>
            </div>
            <?php } ?>

... и так далее

div class="form-group" повторяющийся блок. Там еще куча мест, куда можно привязаться стилями.

<div class="radio"> и тому подобное. Если надо что-то особое, то тогда придется вытягивать id опции, по нему писать условие и менять вывод именно для этой опции.

 Если этого мало, то можно дописать свои стили.

Я посмотрел код - оказывается здесь нет уникального айди для каждой группы кнопок.

есть только айди для конкретного блока на странице

т.е. на 10 страниц, и айди одной и той же опции будет: 101, 102, 103, 104...

 

вот я и спросил, как дописать свои стили к опции.

 

только что увидел ответ с вложением.. сейчас посмотрю.

попробую сделать условие, типа если название опции - цвет, тогда класс такой-то, а если название такое - тогда такой-то...

да работает.
 

if ($option['name']=='Цвет') {$optiontype="...";}

<div class="form-group<?php echo ($option['required'] ? ' required' : ''); echo ' '.$optiontype; ?> ">

Я просто думал такая вещь должна быть заложена в самом движке, но оказалось нет.

[jaffagold]

А что требуется сделать из этого

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

 

Проэкспериментировал.

Сначала пытался по option_id, так вернее, но не передается из контроллера, как я понял. Чтобы его не трогать, сделал по Названию опции. 

Вот что получилось:

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

<?php if ($option['type'] == 'radio') { ?>
                <?php if ($option['name'] == 'Цвет') { ?>
            <div class="color-option form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
                <?php } else { ?>
            <div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
                <?php } ?>
              <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="radio">
                  <label>
                    <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />

Но правильнее, мне кажется, по option_id. Т.к. название опции вдруг поменяется (уточнится).

Методом научного тыка получилось вот так:

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

<div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?> option_id_<?php echo $option['option_id']; ?>">

Получаем такой симпатичный класс

div class="form-group required option_id_14">

Для каждой опции свой. чтд