Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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

OldAine
 Share

Recommended Posts

OldAine Veteran

OldAine

Опубліковано:
Опубліковано:

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

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

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

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

Изображение

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

Изображение

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

Изображение

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

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

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

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

dxangelo Contributor

dxangelo

Опубліковано:
Опубліковано:

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

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

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

OldAine Veteran

OldAine

Опубліковано:
  • Автор
Опубліковано:

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

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

ravilr Veteran

ravilr

Опубліковано:
Опубліковано:

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

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

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

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

OldAine Veteran

OldAine

Опубліковано:
  • Автор
Опубліковано:

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

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

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

OldAine Veteran

OldAine

Опубліковано:
  • Автор
Опубліковано:

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

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

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

K700 Enthusiast

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 Veteran

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;
}
  • +1 4
Надіслати
Поділитися на інших сайтах
1

OldAine Veteran

OldAine

Опубліковано:
  • Автор
Опубліковано:

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

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

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

  • 2 weeks later...
migalkin Enthusiast

migalkin

Опубліковано:
Опубліковано:

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

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>
Надіслати
Поділитися на інших сайтах

OldAine Veteran

OldAine

Опубліковано:
  • Автор
Опубліковано:

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

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

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

  • +1 1
Надіслати
Поділитися на інших сайтах
1

migalkin Enthusiast

migalkin

Опубліковано:
Опубліковано:

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

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

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 } ?>
Надіслати
Поділитися на інших сайтах

OldAine Veteran

OldAine

Опубліковано:
  • Автор
Опубліковано:

migalkin

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

ravilr

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

Изображение

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

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

migalkin Enthusiast

migalkin

Опубліковано:
Опубліковано:

ravilr

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

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

OldAine Veteran

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

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

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

Ви повинні бути користувачем, щоб залишити коментар

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

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
 Share
Перейти до списку тем

Покупцям

Розробникам

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

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

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.

  Я даю згоду