Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

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


 Поделиться

Рекомендованные сообщения

Здравствуйте  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
  • +1 1
Ссылка на комментарий
Поделиться на других сайтах


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

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

 

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

 

Ссылка на комментарий
Поделиться на других сайтах

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

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

Ссылка на комментарий
Поделиться на других сайтах

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

 

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

Ссылка на комментарий
Поделиться на других сайтах


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

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

 

 

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

 

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

Ссылка на комментарий
Поделиться на других сайтах


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

 

 

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

 

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

Ссылка на комментарий
Поделиться на других сайтах


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

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

 

 

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

Ссылка на комментарий
Поделиться на других сайтах


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

Ссылка на комментарий
Поделиться на других сайтах


Кому нужно для 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
Ссылка на комментарий
Поделиться на других сайтах


Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.