Перейти к содержанию
abelitro

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

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

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

 

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

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

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

 

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

 

Изменено пользователем abelitro

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


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

называется стилизация input radio 

не можете сами, гуглите модуль, или заплатите и за  вас сделают

  • +1 1

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


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

для 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

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


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

del

 

Изменено пользователем abelitro

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


Ссылка на сообщение
Поделиться на другие сайты
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 и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.