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

[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://opencart-forum.ru/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://opencart-forum.ru/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-у =)