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

Poper · 2 серпня 2016

Здравствуйте 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" / >

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

Змінено 2 серпня 2016 користувачем Poper

Poper · 3 серпня 2016

Вопрос достаточно частый....ответа не нашёл

Tom · 3 серпня 2016

С таким то статусом на форуме ловить совершенно нечего....

Poper · 3 серпня 2016

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

Змінено 3 серпня 2016 користувачем Poper

Eldaeron · 3 серпня 2016

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

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

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

Tom · 3 серпня 2016

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

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

Poper · 3 серпня 2016

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

Окей извини...не об этом речь

Poper · 3 серпня 2016

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

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

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

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

Poper · 4 серпня 2016

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

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

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

Poper · 4 серпня 2016

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

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

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

Poper · 5 серпня 2016

Короче получилось решение такое...находим строчку с атрибутами. И вытаскиваем от туда таблицу и заворачиваем опции.

Poper · 5 серпня 2016

Кому нужно для 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 */
}

Змінено 5 серпня 2016 користувачем Poper

Вхід

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

Recommended Posts

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

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

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

Вхід

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

Покупцям

Розробникам

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

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

Important Information