Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Recommended Posts

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

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

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

  • расположить горизонтально
  • обрамить в рамочку (желательно)
Так выглядит до какой-либо обработки:

Изображение

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

Изображение

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

Изображение

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

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

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

Link to comment
Share on other sites

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

post-3615-0-32329800-1337036100_thumb.jpg post-3615-0-96700100-1337036106_thumb.jpg

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

post-3615-0-32329800-1337036100_thumb.jpg

post-3615-0-96700100-1337036106_thumb.jpg

Link to comment
Share on other sites


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

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

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

Link to comment
Share on other sites

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....

Link to comment
Share on other sites


в 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;
}
  • +1 4
Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

  • 2 weeks later...

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

post-11288-0-34196000-1338094933_thumb.jpg

Вот так надо в 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>
Link to comment
Share on other sites


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

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

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

  • +1 1
Link to comment
Share on other sites

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

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

post-11288-0-34196000-1338094933_thumb.jpg

Кусок 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 } ?>
Link to comment
Share on other sites


migalkin

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

ravilr

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

Изображение

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

Link to comment
Share on other sites

ravilr

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

Link to comment
Share on other sites


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-у =)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.