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

Изменить вид Опций


abelitro
 Поделиться

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

Всем доброго времени.

 

подскажите пожалуйста как сменить или добавить новый дизайн элементов "опций"?

Сейчас на сайте у меня так: Скриншот 1

А хотелось бы сделать вот так: Скриншот 2

 

Заранее благодарствую! 

 

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


для radiobuton

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-mystyle active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn  btn-mystyle">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn  btn-mystyle">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

и  для checkbox 

 

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-mystyle active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-mystyle">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-mystyle">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

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

 

.btn-mystyle .active {
  background: transparent;
  border: 1px solid #333;
  color: #333;
  border-radius: 0px;
}

.btn-mystyle  {
  background: transparent;
  border: 1px solid transparent;
  color: #333;
  border-radius: 0px;
}

 

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

On 17.06.2017 at 7:43 PM, Yurta said:

для radiobuton


<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-mystyle active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn  btn-mystyle">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn  btn-mystyle">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

и  для checkbox 

 


<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-mystyle active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-mystyle">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-mystyle">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

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

 


.btn-mystyle .active {
  background: transparent;
  border: 1px solid #333;
  color: #333;
  border-radius: 0px;
}

.btn-mystyle  {
  background: transparent;
  border: 1px solid transparent;
  color: #333;
  border-radius: 0px;
}

 

 

 

А можно по-подробней, где надо править код?

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


ваш шаблон\product\product.tpl 

 

Этот участок отвечает за radio 

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

 

 

 

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

12 hours ago, Yurta said:

ваш шаблон\product\product.tpl 

 

Этот участок отвечает за radio 


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

 

 

 

 

Да, спасибо, где код, я знаю. Уже вносил маленькие изменения, к примеру чтоб элементы не вертикально располагались, а горизонтально...

А вот как кастомизировать этот участок кода

<?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 inline-block">
                        <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 } ?>

 

по этому примеру:

 

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-mystyle active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn  btn-mystyle">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn  btn-mystyle">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>


.btn-mystyle .active {
  background: transparent;
  border: 1px solid #333;
  color: #333;
  border-radius: 0px;
}

.btn-mystyle  {
  background: transparent;
  border: 1px solid transparent;
  color: #333;
  border-radius: 0px;
}

опыта не достаточно. 

Вас не затруднит помочь мне разобраться в этом вопросе на примере radiobuton?

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


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

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

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

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

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

Войти

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

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

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

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

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

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