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

abelitro · 17 червня 2017

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

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

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

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

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

Змінено 17 червня 2017 користувачем abelitro

Miha7685776 · 17 червня 2017

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

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

Yurta · 17 червня 2017

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

Змінено 17 червня 2017 користувачем Yurta

abelitro · 19 червня 2017

del

Змінено 19 червня 2017 користувачем abelitro

abelitro · 19 червня 2017

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

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

Yurta · 19 червня 2017

ваш шаблон\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 } ?>

abelitro · 20 червня 2017

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?

Вхід

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

Recommended Posts

abelitro

Надіслати

Поділитися на інших сайтах

Miha7685776

Надіслати

Поділитися на інших сайтах

Yurta

Надіслати

Поділитися на інших сайтах

abelitro

Надіслати

Поділитися на інших сайтах

abelitro

Надіслати

Поділитися на інших сайтах

Yurta

Надіслати

Поділитися на інших сайтах

abelitro

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Ваші замовлення

ocStore

Шаблони

OpenCart.Pro

Important Information