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

Как сделать таблицу из опций 2 колонки?

Poper
 Share

Recommended Posts

Poper Enthusiast

Poper

Опубліковано:
Опубліковано: (змінено)

Здравствуйте  ocStore 2.1.0.2.1

 

Мне нужно что бы опции выводились 2 колонки.   Конструкция >>>>    [ОПЦИЯ] [+300 р.]  То есть option-name это 1 колонка, option-price это 2 колонка

 

Нашёл css красивой колонки 

 

Файл index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Простая таблица на CSS</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script type="text/javascript">
	 $(function() {
			/* Выделение строк "через одну" */
			$("table tr:nth-child(odd)").addClass("odd-row");

			$("table td:first-child, table th:first-child").addClass("first");

			$("table td:last-child, table th:last-child").addClass("last");
	});
	</script>
	<link rel='stylesheet' href='style.css' type='text/css' />
</head>
<body>
<div id="content">
    <table cellspacing="0">
		<tr>
			<th>Lorem ipsum</th>
			<th>Lorem ipsum</th>
			<th>Lorem ipsum</th>
		</tr>
		<tr>
			<td>Etiam dolor</td>
			<td>100%</td>
			<td>Нет</td>
		</tr>
		<tr>
			<td>Etiam dolor</td>
			<td>100%</td>
			<td>Да</td>
		</tr>
		<tr>
			<td>Etiam dolor</td>
			<td>50%</td>
			<td>Да</td>
		</tr>
		<tr>
			<td>Etiam dolor</td>
			<td>0%</td>
			<td>Да</td>
		</tr>
		<tr>
			<td>Etiam dolor</td>
			<td>100%</td>
			<td>Да</td>
		</tr>
    </table>
</div>

</body>
</html>

Файл css

 

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

body {
	margin:0;
	padding:0;
	font:12px/15px "Helvetica Neue",Arial, Helvetica, sans-serif;
	color: #555;
	/*background:#f5f5f5 url(bg.jpg);*/
}

a {color:#666;}

#content {width:65%; max-width:690px; margin:6% auto 0;}

table {
	overflow:hidden;
	border:1px solid #d3d3d3;
	background:#fefefe;
	width:70%;
	margin:5% auto 0;
	-moz-border-radius:5px; /* FF1+ */
	-webkit-border-radius:5px; /* Saf3-4 */
	border-radius:5px;
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

th, td {padding:18px 28px 18px; text-align:center; }

th {padding-top:22px; text-shadow: 1px 1px 1px #fff; background:#e8eaeb;}

td {border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;}

tr.odd-row td {background:#f6f6f6;}

td.first, th.first {text-align:left}

td.last {border-right:none;}


td {
	background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);
	background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));
}

tr.odd-row td {
	background: -moz-linear-gradient(100% 25% 90deg, #f6f6f6, #f1f1f1);
	background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f1f1f1), to(#f6f6f6));
}

th {
	background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed);
	background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb));
}

tr:first-child th.first {
	-moz-border-radius-topleft:5px;
	-webkit-border-top-left-radius:5px; /* Saf3-4 */
}

tr:first-child th.last {
	-moz-border-radius-topright:5px;
	-webkit-border-top-right-radius:5px; /* Saf3-4 */
}

tr:last-child td.first {
	-moz-border-radius-bottomleft:5px;
	-webkit-border-bottom-left-radius:5px; /* Saf3-4 */
}

tr:last-child td.last {
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px; /* Saf3-4 */
}

 

 

Хотелось бы внедрить что бы в карточке товара в продукте  опции отображались в виде таблицы. 

 

Вот product.tpl строки option

<div class="form-group">
              <label class="control-label" for="input-option<?php echo $option['product_option_id']; ?>">
						<?php if ($option['required']) { ?>
							<i class="fa fa-exclamation-triangle required" data-toggle="tooltip" data-placement="left" title="<?php echo $required_text_option; ?>"></i>
						<?php } ?>
					<?php echo $option['name']; ?>
				</label>
              <div id="input-option<?php echo $option['product_option_id']; ?>">
                <?php foreach ($option['product_option_value'] as $option_value) { ?>
                <div class="radio-checbox-options">
                  <input type="checkbox" name="option[<?php echo $option['product_option_id']; ?>][]" value="<?php echo $option_value['product_option_value_id']; ?>" id="<?php echo $option['product_option_id']; ?>_<?php echo $option_value['product_option_value_id']; ?>" />
									<label for="<?php echo $option['product_option_id']; ?>_<?php echo $option_value['product_option_value_id']; ?>">
                    <span class="option-name"><?php echo $option_value['name']; ?></span>
                    <?php if ($option_value['price']) { ?>
                    <span class="option-price"><?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?></span>
                    <?php } ?>
                  </label>
                </div>
                <?php } ?>
              </div>
            </div>

Я так понимаю класс class="option-name" и class="option-price"> отвечает за выводы. Нужно подключить отдельный css получается типо 

 

< link rel="stylesheet" type="text/css" href="/catalog/view/theme/шаблон/template/product/styletable.css" / >

 

Ну как то не получается....помогите пожалуйста может вообще не в ту степь забежал? 

Змінено користувачем Poper
Надіслати
Поділитися на інших сайтах

Poper Enthusiast

Poper

Опубліковано:
  • Автор
Опубліковано: (змінено)

Да это пипец...ты мне статус понизил  :-)  :-)   Хотя особо я не чего плохого не сказал , упомянул слова Варе* и сразу все довольные налетели минусы ставить.

Змінено користувачем Poper
  • +1 1
Надіслати
Поділитися на інших сайтах

Eldaeron Mentor

Eldaeron

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

У вас в файле стилей прописаны стили до тегов таблиц <table><tr><td>, так же в файле index.html выводиться таблица.

Но в файле product.tpl используеться другие теги - <input><span>, чтоб заработали стили с styles.css нужно вместо td .клас tr .клас стилизировать input (ввод) и прописать стили для <span> и <div>

 

Это тоже самое что на BMW ставить движок от Жигули и говорить что мне ничего неподходит.

 

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

Tom Grand Master

Tom

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

Да это пипец...ты мне статус понизил  :-)  :-)   Хотя особо я не чего плохого не сказал , упомянул слова Варе* и сразу все довольные налетели минусы ставить.

Могу огорчить.У меня правило.Я не ставлю минусы.Так что пальцем в небо претензия.

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

Poper Enthusiast

Poper

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

У вас в файле стилей прописаны стили до тегов таблиц <table><tr><td>, так же в файле index.html выводиться таблица.

Но в файле product.tpl используеться другие теги - <input><span>, чтоб заработали стили с styles.css нужно вместо td .клас tr .клас стилизировать input (ввод) и прописать стили для <span> и <div>

 

 

Да понимаю что по другому....получилось вывести таблицу стилей

 

Только почему то не как 2 колонки выводится а каждое значение как таблица

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

Poper Enthusiast

Poper

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

Могу огорчить.У меня правило.Я не ставлю минусы.Так что пальцем в небо претензия.

 

 

Я вообще не понимаю зачем на форуме поддержки Opencart обычным пользователям делать Репутацию...тем более данный вопрос который я задал не только я один задавал. 

 

И многим помогло бы решение хоть какой нибудь. 

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

Poper Enthusiast

Poper

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

У вас в файле стилей прописаны стили до тегов таблиц <table><tr><td>, так же в файле index.html выводиться таблица.

Но в файле product.tpl используеться другие теги - <input><span>, чтоб заработали стили с styles.css нужно вместо td .клас tr .клас стилизировать input (ввод) и прописать стили для <span> и <div>

 

 

Не получилось....ломается таблица... Нужно по сути обернуть опции в таблицу...

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

Poper Enthusiast

Poper

Опубліковано:
  • Автор
Опубліковано: (змінено)

Кому нужно для 2.x ветки решение данной проблемы product.tpl  примерно 300 строка.

<div class="radio-checbox-options">
				<link rel="stylesheet" type="text/css" href="/catalog/view/theme/newstore/template/product/styletabl.css"  >
                  <input type="checkbox" name="option[<?php echo $option['product_option_id']; ?>][]" value="<?php echo $option_value['product_option_value_id']; ?>" id="<?php echo $option['product_option_id']; ?>_<?php echo $option_value['product_option_value_id']; ?>" />
			<table class="table table-bordered" itemprop="propertiesList" itemscope itemtype="http://schema.org/ItemList">
					<thead>
                                           <tr>
				  <td colspan="2"><strong>Тут вставляем дополнительное поле если надо</strong></td>
					  </tr>
                                             </thead>
                                          <tbody>
					<tbody>
				<tr itemprop="itemListElement" itemscope itemtype="http://schema.org/NameValueStructure">
                   <td itemprop="name"><?php echo $option_value['name']; ?></td>
	       <?php if ($option_value['price']) { ?>
                    <td itemprop="value"><?php echo $option_value['price']; ?></td>
					 </tr>
					  </tbody>
					<?php } ?>
				  </table>
                               </div>
                          <?php } ?>
                        </div>
                     </div>
            <?php } ?>

stylesheet.css  добавить вниз

/*Начала стилей таблиц*/

th, td {padding:18px 28px 18px; text-align:center; }

th {padding-top:22px; text-shadow: 1px 1px 1px #fff; background:#e8eaeb;}

td {border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;}

tr.odd-row td {background:#f6f6f6;}

td.first, th.first {text-align:left}

td.last {border-right:none;}


td {
	background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);
	background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));
}

tr.odd-row td {
	background: -moz-linear-gradient(100% 25% 90deg, #f6f6f6, #f1f1f1);
	background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f1f1f1), to(#f6f6f6));
}

th {
	background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed);
	background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb));
}

tr:first-child th.first {
	-moz-border-radius-topleft:5px;
	-webkit-border-top-left-radius:5px; /* Saf3-4 */
}

tr:first-child th.last {
	-moz-border-radius-topright:5px;
	-webkit-border-top-right-radius:5px; /* Saf3-4 */
}

tr:last-child td.first {
	-moz-border-radius-bottomleft:5px;
	-webkit-border-bottom-left-radius:5px; /* Saf3-4 */
}

tr:last-child td.last {
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px; /* Saf3-4 */
}
Змінено користувачем Poper
Надіслати
Поділитися на інших сайтах

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

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

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

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

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

Вхід

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

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

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

    • Ні користувачів, які переглядиють цю сторінку

Покупцям

Розробникам

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

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

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

Important Information

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

  Я даю згоду