Как сделать опции с разным дизайном на opencart?

Question

[smoklew]

В карточке товара стоят две опции с типом: "Переключатели" , которые выводятся с помощью кода:

<?php if ($options) { ?>
            <?php foreach ($options as $option) { ?>
              <?php if ($option['type'] == 'radio') { ?>
              <div id="product-model" class="data-product">
                <h2 class="heading-description-product">
                  <?php echo $option['name']; ?>
                </h2>
                <?php foreach ($option['product_option_value'] as $option_value) { ?>
                  <label>
                   <input type="radio"
                          id="choose" 
                          name="option[<?php echo $option['product_option_id']; ?>]" 
                          value="<?php echo $option_value['product_option_value_id']; ?>" />
                    <span class="data-description-product 
                                 choose-input">
                      <?php echo $option_value['name']; ?>
                    </span>
                  </label>
                <?php }?>
              </div>
              <?php }?>
            <?php }?>
          <?php }?>

Фото как получается:



Этот код действует для всех опций (для двух: Цвет, Размер) , соответственно они выводятся с одинаковым дизайном.

Как сделать, чтобы эти две опции были раздельны и различались по дизайну?

Answer 1

[Elwen]

Есть несколько решений, которые зависят от того, что именно вы хотите изменить в дизайне этих элементов и что прописано у вас в css сейчас. Поэтому, возможно, варианты ниже придется немного подправить под ваш конкретный сайт.
Предлагаю 2 варианта, которые основаны на значении $option['product_option_id']. По этому идентификатору идет определение к какой опции относится вариант. Система добавляет его в параметр name у input.

Вариант с php+css
Подходит для стилизации любого элемента в рамках одной опции.
Вы можете модифицировать php код, добавив каждому div с набором radio уникальный класс:

<div id="product-model" class="data-product options-<?php echo $option['product_option_id']; ?>">

Тогда вы сможете использовать сформированный уникальный класс каждого набора и прописать стили всем дочерним элементам.

Вариант с css
Подходит для изменения стилей только input и следующего за ним span.
Можно добавлять стили, обратившись к элементу по значению его атрибута. И т. к. у каждого набора radio одинаковое значение name, то можно прописать стили использовав его. Синтаксис будет следующим: input[name="значение"] . Соответственно вместо "значение" необходимо поставить то, что выводит в итоге php. Так вы сможете обратиться ко всем radio в рамках одного набора. Если вам надо изменить стиль для span с названием варианта, то допишите +span, что бы получилось input[name="значение"]+span.
Пример - https://jsfiddle.net/nbo5e30e/1/

Comments

[smoklew]

Спасибо! Попробую Ваш вариант)