Внешний вид опций

Marusya · 31 січня 2014

Здравствуйте, помогите разобраться.
Хочу сдеать вывод опций как в шаблоне TEEZ http://themeforest.net/item/teez-opencart-theme/full_screen_preview/842161
У меня стоит шаблон Bigshop, Opencart 1.5.4.1.2
Создала папку includes, добавила туда options.tpl














 <?php if ($options) { ?>
  <div class="options">
  	<h2><?php echo $text_option; ?></h2>
	<?php foreach ($options as $option) { ?>
    
    <?php if ($option['type'] == 'select') : //Select Field ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option select">
          <strong><?php echo $option['name']; ?> <?php if ($option['required']) { ?><span class="required">*</span>          <?php } ?></strong>
          
          <?php if($option['name'] == "Цвет" || $option['name'] == "Size") : //Check if "Цвет/Size" Option ?>
              <ul class="op <?php echo  strtolower($option['name']); ?>">
              <?php foreach ($option['option_value'] as $option_value): ?>
                    <li id="<?php echo $option_value['product_option_value_id']; ?>" class="<?php echo strtolower($option_value['name']); ?>">
						<?php if ($option['name'] == "Цвет" && $option_value['image']) : ?>
                            <img src="<?php echo $option_value['image']; ?>" alt="<?php echo strtolower($option_value['name']); ?>" />
                        <?php else: ?>
                        	<?php echo $option_value['name']; ?>
                        <?php endif; ?>
                    </li>
              <?php endforeach; ?>
              </ul>
       <?php endif; ?>
          
          <select name="option[<?php echo $option['product_option_id']; ?>]" class="<?php if($option['name']=="Цвет" ||$option['name']=="Size"){echo 'colorOp';} ?>">
            <option value=""><?php echo $text_select; ?></option>
            <?php foreach ($option['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 endif; ?>
            </option>
            <?php endforeach; ?>
          </select>
        </div>
    <?php endif; ?>
    
    <?php if ($option['type'] == 'radio') : //Radio Buttons ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
          <strong><?php echo $option['name']; ?> <?php if ($option['required']) { ?><span class="required">*</span><?php } ?></strong>
          <?php foreach ($option['option_value'] as $option_value) : ?>
              <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" />
              <label for="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 endif; ?>
              </label>
          <?php endforeach; ?>
        </div>
    <?php endif; ?>
    
    <?php if ($option['type'] == 'checkbox') { //Checkboxes ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
			  <strong><?php echo $option['name']; ?> <?php if ($option['required']) { ?><span class="required">*</span><?php } ?></strong>
              <div class="checkbox">
				  <?php foreach ($option['option_value'] as $option_value) : ?>
                      <div><input type="checkbox" name="option[<?php echo $option['product_option_id']; ?>][]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" />
                      <label for="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 endif; ?>
                      </label></div>
                  <?php endforeach; ?>
              
              </div>
               <div class="clear"></div>
        </div>
    <?php } ?>
    
    <?php if ($option['type'] == 'image') { ?>
    <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
      <?php if ($option['required']) { ?>
      <span class="required">*</span>
      <?php } ?>
      <b><?php echo $option['name']; ?>:</b><br />
        <table class="option-image">
          <?php foreach ($option['option_value'] as $option_value) { ?>
          <tr>
            <td style="width: 1px;"><input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" /></td>
            <td><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" /></label></td>
            <td><label for="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 } ?>
              </label></td>
          </tr>
          <?php } ?>
        </table>
    </div>
    <?php } ?>
    
    <?php if ($option['type'] == 'text') { ?>
    <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
      <strong><?php echo $option['name']; ?><?php if ($option['required']) { ?><span class="required">*</span><?php } ?></strong>
      <input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['option_value']; ?>" />
    </div>
    <?php } ?>
    
    <?php if ($option['type'] == 'textarea') { ?>
    <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
      <strong><?php echo $option['name']; ?> <?php if ($option['required']) { ?><span class="required">*</span><?php } ?></strong>
      <textarea name="option[<?php echo $option['product_option_id']; ?>]" cols="40" rows="5"><?php echo $option['option_value']; ?></textarea>
    </div>
    <?php } ?>
    
    <?php if ($option['type'] == 'file') { ?>
    <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
      <strong><?php echo $option['name']; ?><?php if ($option['required']) { ?><span class="required">*</span><?php } ?></strong>
      <a id="button-option-<?php echo $option['product_option_id']; ?>" class="button"><span><?php echo $button_upload; ?></span></a>
      <input type="hidden" name="option[<?php echo $option['product_option_id']; ?>]" value="" />
    </div>
    <?php } ?>
    
    <?php if ($option['type'] == 'date') { ?>
    <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
      
      <strong><?php echo $option['name']; ?><?php if ($option['required']) { ?><span class="required">*</span><?php } ?></strong>
      <input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['option_value']; ?>" class="date" />
    </div>
    <?php } ?>
    
    <?php if ($option['type'] == 'datetime') { ?>
    <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
      <strong><?php echo $option['name']; ?><?php if ($option['required']) { ?><span class="required">*</span><?php } ?></strong>
      <input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['option_value']; ?>" class="datetime" />
    </div>
    <?php } ?>
    
    <?php if ($option['type'] == 'time') { ?>
    <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
      <strong><?php echo $option['name']; ?><?php if ($option['required']) { ?><span class="required">*</span><?php } ?></strong>
      <input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['option_value']; ?>" class="time" />
    </div>
    <?php } ?>
    <?php } ?>
  </div>
<?php } ?>

, в файле product.tpl вместо кода опций вставила














<?php include("includes/options.tpl"); //Product Options ?>

, так же изменила стили в stylesheet.css














/* Product Options */
		.options,strong .text_qty{font-size:12px;color:#333;background:none;padding-bottom:0;margin-bottom:0}
		.options h2{font-size:14px;color:#333;padding-bottom:15px;font-family:Tahoma, Helvetica, sans-serif;}
			.option{padding:0 0 10px;clear:right;}
				.option strong,.text_qty{display: block;float:left;width:80px;}
					.select strong{line-height:33px;}
					.option strong span{font-weight:normal;}
				.option .checkbox{float:left;width:auto;}		
		.required{color:#F33}
		.options .error{position:relative;top:-10px;color:#F33}
			.op li{display:inline-block;cursor:pointer;}
			.options .color li{border:1px solid #eee}
				.options .color li.active{border:1px solid #999;}
		.options .size{padding-bottom:3px;}
			.options .size li{background:#fff url('../image/sizeBg.jpg') repeat-x top;width:40px;text-align:center;border:1px solid #d6d6d6;line-height:29px;display:inline-block;font-size:14px;color:#212121;text-transform:uppercase;font-weight:bold;-webkit-border-radius:3px;}
				.options .size li.active{border-color:#999;}

и в итоге получается

Помогите, пожалуйста!

Вхід

Внешний вид опций

Recommended Posts

Marusya

Надіслати

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

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

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

Вхід

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

Покупцям

Розробникам

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

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

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

ocStore

Шаблони

OpenCart.Pro

Important Information