Опции товара - изменить внешний вид

[OldAine]

Изначально задача состояла только в том, чтобы перенести опции товара под вкладки с описанием и прочим:

кому интересно, этим я занимался вот тут: http://opencartforum...ть-внешний-вид/

Теперь задача другая, нужно привести их к нормальному виду:

• расположить горизонтально
• обрамить в рамочку (желательно)

Так выглядит до какой-либо обработки:

Когда я удаляю в product.tpl у <?php if ($option['type'] == 'image') { ?> теги <tr> или <td> чтобы расположить горизонтально получается просто ужасно, ничего не понятно, какая картинка к какой цене и т.д.:

И я никак не могу привести это к красивому виду, как тут:

Вот ссылка на страницу с красиво оформленными опциями: http://ursajt.lv/ind...1&product_id=67

Если я правильно понимаю, то все дело в том, что редактирования одного лишь product.tpl недостаточно?

Помогите пожалуйста разобраться, кто сведущь =)

[dxangelo]

одного лишь product.tpl недостаточно?

Файл стилей.... там все необходимое тебе...

[dxangelo]

А для удобства, я допустим пользуюсь браузером Опера... жмешь - Проинспектировать элемент и находишь с точностью до строки и конкретной опции, которую тебе нужно изменить...

В других браузерах, типа Лисы и Хрома тоже кажется есть...

[hurupachka]

https://opencartforum.com/topic/8992-как-поменять-size/page__fromsearch__1

Здесь обсуждалось

[OldAine]

Файл стилей.... там все необходимое тебе...

Да я тоже сразу подумал об этом (часто пользуюсь dragonfly), но вот чтобы я не менял в stylesheet.css на сайте изменений ноль... видимо надо в options.tpl ковырять

[OldAine]

Блин что-то я совсем запутался! Такого файла нет ни в моем ни в стандартном шаблоне, что за "options.tpl" ???

[ravilr]

редактировать только product.tpl и файл стилей.

Т.е переделываем все что касается опций на верстку блоками и создаем новые стили.

На вопросы "а поподробнее" не отвечаю!

[OldAine]

редактировать только product.tpl и файл стилей.

Т.е переделываем все что касается опций на верстку блоками и создаем новые стили.

почти все понял, спасибо, но скажите еще как указать опциям, что я прописал для них новые стили? это случаем не в product.tpl указывается?

[OldAine]

В общем я так и не понял как указать новые свойства стиля чему либо, ну да ладно зато я нашел ошибку из-за которой у меня не изменялся внешний вид опций в stylesheet.css, там была лишняя буква перед кавычками.... Так что у меня все получилось)

PS: Если кто-то знает ответ поделитесь пожалуйста, помогите моему саморазвитию)

[ravilr]

для какой версии надо ?

[OldAine]

для какой версии надо ?

1.5.13

[K700]

script не пробовал добавить их

Подобная тема на счет опций только size я опубликовал,https://opencartforum.com/topic/8992-%D0%BA%D0%B0%D0%BA-%D0%BF%D0%BE%D0%BC%D0%B5%D0%BD%D1%8F%D1%82%D1%8C-size/

Может конечно не совсем то, но идея как я понял нужно изменить внешний вид...loading....

[ravilr]

в product.tpl вместо куска кода

<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 class="option-image">
			  <?php foreach ($option['option_value'] as $option_value) { ?>
			  <div class ="option1">
			    <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>
	 <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>
			    <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']; ?>" />
   
			  </div>
	   <?php } ?>
		
		    </div>

в файле стилей добавляем это

.option1 {
float:left;
text-align:center;
}
.option-image {
overflow:auto;
}

[OldAine]

Спасибо что разжевали, как задается новый стиль, суть я уловил. Просто я еще ничего кроме Html и немного css не изучал, вот и туплю)

Я правда воспользовался другим методом с сайта: http://ursajt.lv/ind...1&product_id=67 при помощи dragonfly украл стили и посмотрел, как поменять product под себя, т.е. решил не задавать свои стили а просто поменял имеющиеся. Все получилось в точности как на этом сайте.

[migalkin]

Что бы не создавать похожую тему, помогите поменять внешний вид опций.

Вот так надо в 3 столбца надо сделать, а то они вниз отодвигают описание товара и кнопку купить.

Кусок CSS отвечающий за этот участок.

.product-info .options {
border-bottom: 1px solid #E7E7E7;
padding: 0px 5px 10px 5px;
margin-bottom: 10px;
  color: #000000;

И как сделать чекбоксы для выбора нескольких оттенков, если стоит тип изображение.

Или как сделать отображение картинки для типа: флажок.

В опций стоит тип: Изображение. Если ставлю тип флажок не показывается картинка.

<?php if ($option['type'] == 'checkbox') { ?>
		<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 />
		  <?php foreach ($option['option_value'] as $option_value) { ?>
		  <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 } ?>
		  </label>
		  <br />
		  <?php } ?>
		</div>
		<br />
		<?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>

[OldAine]

По первому вопросу, пока что не могу помочь, так как у самого та же проблема, если подопций больше 4х или у них слишком длинное описание, то они просто выходят за границу окна, вниз не смещаются(( если смогу поправить напишу потом как...

а вот по второму вопросу легче: http://opencartforum...бное-решение33/

Во втором посте я приложил код из product.tpl найдите его и просто замените, ну или сравните и внесите недостающие изменения)

[ravilr]

если подопций больше 4х

я для кого разжевывал........

[migalkin]

Ог спасибо посмотрю =)

[migalkin]

Нет вариант не подходит для меня с чекбоксами.

Надо что бы было так в три столбца когда в опций выбран тип: изображение

Кусок CSS отвечающий за этот участок.

.product-info .options {
border-bottom: 1px solid #E7E7E7;
padding: 0px 5px 10px 5px;
margin-bottom: 10px;
  color: #000000;

product.tpl

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

[ravilr]

тогда вообще не понятно что надо.

и какой еще вариант с чекбоксами... непонятно

[OldAine]

migalkin

- что то я вас не понял, вы же вроде хотели сделать с чекбоксами, у вас просто не получилось или уже стало ненадо?

ravilr

- я ваш вариант, просто как пример воспринял, а применять не стал :oops: , но когда применил получилось тоже не очень хорошо, ну по крайней мере перенос в конце блока работает) вот скрин:

Не подскажите куда копать в ксс или тпл?

[ravilr]

в цсс копать.

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

[migalkin]

OldAine

Передумал, мне чекбоксы не подходят.

[migalkin]

ravilr

мне надо что бы опций (тип:изображение) на странице продукта выводились в 3 столбца (или2если не влезет) и все. Больше ничего не менять, раньше хотел что бы были чекбоксы для выбора оттенка, теперь не надо( понял что для меня не подходит).

[OldAine]

OldAine

Передумал, мне чекбоксы не подходят.

Ну смотрите у меня кое-что получилось, вроде бы то, что вам надо:

Действия следующие:

1. Как писал уважаемый ravilr в product.tpl вместо куска кода:

<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 class="option-image">
						  <?php foreach ($option['option_value'] as $option_value) { ?>
						  <div class ="option1">
							<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>
		 <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>
							<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']; ?>" />
  
						  </div>
		   <?php } ?>
			  
					</div>

В stylesheet.css в любое место (я например в самое начало кинул) добавить:

.option1 {
float:left;
text-align: center;
padding: 5px;
width: 140px;
border: 1px solid #CCCCCC;
}
.option-image {
overflow:auto;
}

ну и поскольку у меня совсем другой шаблон, то вам надо будет поиграться с "width: 140px;" попробуйте поставить больше если вам нужно меньшее число опций и меньше если вам нужно чтобы опций стало на странице больше, например 4 в строке а не 3ри.... вроде все, отдельное спасибо ravilr-у =)