Перейти к содержанию
Poper

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