Перейти к содержимому


Линия Из Точек Между Характеристиками

Автор Антон 5554, 12 июля 2019 15:26

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 6

#1 Антон 5554

Антон 5554

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 106 сообщений

Отправлено 12 Июль 2019 - 15:26

Здравствуйте, помогите реализовать следующее:

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


скрины сайта примера, моей карточки товара и сами точки во вложении. спасибо


Сайт пример:  https://tropohod.ru/...in_gpsmap_66st/
Точки если не прикрепились вот ссылка на них: https://tropohod.ru/...images/dott.png


Спасибо!

Прикрепленные изображения

  • Скриншот 12-07-2019 151901.jpg
  • Скриншот 12-07-2019 152013.jpg
  • dott.png
  • Без имени111-1.jpg

#2 Vugi

Vugi

    Пользователь

  • Пользователи
  • PipPip
  • 15 сообщений

Отправлено 12 Июль 2019 - 16:50

Здравствуйте, перейдите в редактор шаблонов > main.css и вставьте в конец

.table-features-min {width: 100%;border-collapse: collapse;margin-bottom: 20px;margin-left: -10px}
.table-features-min td {padding: 8px 10px 0;overflow: hidden;}
.table-features-min .cell1 {position: relative;}
.table-features-min .cell1:after {content: '';position: absolute;right: -5px;bottom: 4px;left: 10px;border-bottom: 1px dotted #b1bfc8}
.table-features-min .features-name {position: relative;z-index: 1;padding-right: 5px;background-color: #fff}

#3 Антон 5554

Антон 5554

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 106 сообщений

Отправлено 15 Июль 2019 - 12:51

Просмотр сообщенияVugar (12 Июль 2019 - 16:50) писал:

Здравствуйте, перейдите в редактор шаблонов > main.css и вставьте в конец

.table-features-min {width: 100%;border-collapse: collapse;margin-bottom: 20px;margin-left: -10px}
.table-features-min td {padding: 8px 10px 0;overflow: hidden;}
.table-features-min .cell1 {position: relative;}
.table-features-min .cell1:after {content: '';position: absolute;right: -5px;bottom: 4px;left: 10px;border-bottom: 1px dotted #b1bfc8}
.table-features-min .features-name {position: relative;z-index: 1;padding-right: 5px;background-color: #fff}

Здравствуйте, не плохо получилось, но вы скрыли мой список характеристики и вывели те? что во вкладке "характеристики", можно сделать по списку?, там нужны определенные были
И у меня не получается прижать свойства по правой стенке, скрин во вложении.
Спасибо

Прикрепленные изображения

  • Скриншот 15-07-2019 125022.jpg

#4 stasia

stasia

    Активный участник

  • Модераторы
  • 575 сообщений

Отправлено 16 Июль 2019 - 11:37

Просмотр сообщенияАнтон 5554 (15 Июль 2019 - 12:51) писал:

Здравствуйте, не плохо получилось, но вы скрыли мой список характеристики и вывели те? что во вкладке "характеристики", можно сделать по списку?, там нужны определенные были
И у меня не получается прижать свойства по правой стенке, скрин во вложении.
Спасибо

Здравствуйте. Зайдите в раздел Сайт---Редактор шаблонов---Товар и найдите код: 

		<!-- {% IFNOT goods_features_empty %}-->
		<!--  <div>-->
		<!--		{% FOR goods_features%}-->
		<!--		{% IF goods_features.NAME = Производитель || goods_features.NAME = Гарантия || goods_features.NAME = Время работы || goods_features.NAME = Установленные карты || goods_features.NAME = Барометрический альтиметр || goods_features.NAME = Компас || goods_features.NAME = Сенсорный экран || goods_features.NAME = Стекло SAPPHIRE || goods_features.NAME = Время работы || goods_features.NAME = Garmin Pay || goods_features.NAME = Музыкальный плеер || goods_features.NAME = Материал || goods_features.NAME = Ширина || goods_features.NAME = Серия || goods_features.NAME = Частота трансдьюсера || goods_features.NAME = Мощность || goods_features.NAME = Серия || goods_features.NAME = Длина клинка || goods_features.NAME = Закалка || goods_features.NAME = Сталь || goods_features.NAME = Вес || goods_features.NAME = Тип замка || goods_features.NAME = Кол-во инструментов %}-->
		<!--		  <div>{goods_features.NAME} : <strong>{goods_features.VALUE}</strong></div>-->
		<!--		  {% ENDIF %}-->
		<!--		{% ENDFOR %}-->
		<!--  </div>-->
		<!--{% ENDIF %}-->
		
		 {% IFNOT goods_features_empty %}
		<table class="table-features-min">
		  <tbody>
			{% FOR goods_features %}
			
			  <tr>
				<td class="cell1"><span class="features-name">{goods_features.NAME}</span></td>
				<td class="cell2">{goods_features.VALUE}</td>
			  </tr>
			  
			  {% IF goods_features.index >= 6 %}
			  <tr>
				<td><a href="#tab_2">Все характеристики</a></td>
			  </tr>
			  {break}
			  {% ENDIF %}
			{% ENDFOR %}
		  </tbody>
		</table>   
		{% ENDIF %}

Замените его на:

		 {% IFNOT goods_features_empty %}
		<table class="table-features-min">
		  <tbody>
			{% FOR goods_features %}
				{% IF goods_features.NAME = Производитель || goods_features.NAME = Гарантия || goods_features.NAME = Время работы || goods_features.NAME = Установленные карты || goods_features.NAME = Барометрический альтиметр || goods_features.NAME = Компас || goods_features.NAME = Сенсорный экран || goods_features.NAME = Стекло SAPPHIRE || goods_features.NAME = Время работы || goods_features.NAME = Garmin Pay || goods_features.NAME = Музыкальный плеер || goods_features.NAME = Материал || goods_features.NAME = Ширина || goods_features.NAME = Серия || goods_features.NAME = Частота трансдьюсера || goods_features.NAME = Мощность || goods_features.NAME = Серия || goods_features.NAME = Длина клинка || goods_features.NAME = Закалка || goods_features.NAME = Сталь || goods_features.NAME = Вес || goods_features.NAME = Тип замка || goods_features.NAME = Кол-во инструментов %}
				  <tr>
				<td class="cell1"><span class="features-name">{goods_features.NAME}</span></td>
				<td class="cell2">{goods_features.VALUE}</td>
				</tr>
				  {% ENDIF %}
				{% ENDFOR %}
		  </tbody>
		</table>   
		{% ENDIF %}

#5 Антон 5554

Антон 5554

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 106 сообщений

Отправлено 16 Июль 2019 - 11:46

Просмотр сообщенияstasia (16 Июль 2019 - 11:37) писал:

Здравствуйте. Зайдите в раздел Сайт---Редактор шаблонов---Товар и найдите код:

<!-- {% IFNOT goods_features_empty %}-->
<!-- <div>-->
<!-- {% FOR goods_features%}-->
<!-- {% IF goods_features.NAME = Производитель || goods_features.NAME = Гарантия || goods_features.NAME = Время работы || goods_features.NAME = Установленные карты || goods_features.NAME = Барометрический альтиметр || goods_features.NAME = Компас || goods_features.NAME = Сенсорный экран || goods_features.NAME = Стекло SAPPHIRE || goods_features.NAME = Время работы || goods_features.NAME = Garmin Pay || goods_features.NAME = Музыкальный плеер || goods_features.NAME = Материал || goods_features.NAME = Ширина || goods_features.NAME = Серия || goods_features.NAME = Частота трансдьюсера || goods_features.NAME = Мощность || goods_features.NAME = Серия || goods_features.NAME = Длина клинка || goods_features.NAME = Закалка || goods_features.NAME = Сталь || goods_features.NAME = Вес || goods_features.NAME = Тип замка || goods_features.NAME = Кол-во инструментов %}-->
<!-- <div>{goods_features.NAME} : <strong>{goods_features.VALUE}</strong></div>-->
<!-- {% ENDIF %}-->
<!-- {% ENDFOR %}-->
<!-- </div>-->
<!--{% ENDIF %}-->

{% IFNOT goods_features_empty %}
<table class="table-features-min">
<tbody>
{% FOR goods_features %}

<tr>
<td class="cell1"><span class="features-name">{goods_features.NAME}</span></td>
<td class="cell2">{goods_features.VALUE}</td>
</tr>

{% IF goods_features.index >= 6 %}
<tr>
<td><a href="#tab_2">Все характеристики</a></td>
</tr>
{break}
{% ENDIF %}
{% ENDFOR %}
</tbody>
</table>
{% ENDIF %}

Замените его на:

{% IFNOT goods_features_empty %}
<table class="table-features-min">
<tbody>
{% FOR goods_features %}
{% IF goods_features.NAME = Производитель || goods_features.NAME = Гарантия || goods_features.NAME = Время работы || goods_features.NAME = Установленные карты || goods_features.NAME = Барометрический альтиметр || goods_features.NAME = Компас || goods_features.NAME = Сенсорный экран || goods_features.NAME = Стекло SAPPHIRE || goods_features.NAME = Время работы || goods_features.NAME = Garmin Pay || goods_features.NAME = Музыкальный плеер || goods_features.NAME = Материал || goods_features.NAME = Ширина || goods_features.NAME = Серия || goods_features.NAME = Частота трансдьюсера || goods_features.NAME = Мощность || goods_features.NAME = Серия || goods_features.NAME = Длина клинка || goods_features.NAME = Закалка || goods_features.NAME = Сталь || goods_features.NAME = Вес || goods_features.NAME = Тип замка || goods_features.NAME = Кол-во инструментов %}
<tr>
<td class="cell1"><span class="features-name">{goods_features.NAME}</span></td>
<td class="cell2">{goods_features.VALUE}</td>
</tr>
{% ENDIF %}
{% ENDFOR %}
</tbody>
</table>
{% ENDIF %}

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

Прикрепленные изображения

  • Скриншот 15-07-2019 125022.jpg

#6 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 20 Июль 2019 - 05:40

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - Товар - найдите:
								<td class="cell1"><span class="features-name">{goods_features.NAME}</span></td>
								<td class="cell2">{goods_features.VALUE}</td>
                              
замените на:
								<td class="cell1"><span class="features-name">{goods_features.NAME}</span></td>
								<td class="cell2"><span class="features-name">{goods_features.VALUE}</span></td>

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
.table-features-min .cell1 {position: relative;}
.table-features-min .cell1:after {content: '';position: absolute;right: -5px;bottom: 4px;left: 10px;border-bottom: 1px dotted #b1bfc8}

замените на:
.table-features-min .cell1 {position: relative;}
.table-features-min .cell1:after {content: '';position: absolute;right: -5px;bottom: 4px;left: 10px;border-bottom: 1px dotted #b1bfc8}
.table-features-min .cell2 {position: relative;text-align: right;padding: 8px 0 0;}
.table-features-min .cell2:after {content: '';position: absolute;right: -5px;bottom: 4px;left: 0;border-bottom: 1px dotted #b1bfc8}

#7 Антон 5554

Антон 5554

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 106 сообщений

Отправлено 25 Июль 2019 - 20:41

Просмотр сообщенияVaccina (20 Июль 2019 - 05:40) писал:

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - Товар - найдите:
							 <td class="cell1"><span class="features-name">{goods_features.NAME}</span></td>
							 <td class="cell2">{goods_features.VALUE}</td>
  
замените на:
							 <td class="cell1"><span class="features-name">{goods_features.NAME}</span></td>
							 <td class="cell2"><span class="features-name">{goods_features.VALUE}</span></td>

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
.table-features-min .cell1 {position: relative;}
.table-features-min .cell1:after {content: '';position: absolute;right: -5px;bottom: 4px;left: 10px;border-bottom: 1px dotted #b1bfc8}

замените на:
.table-features-min .cell1 {position: relative;}
.table-features-min .cell1:after {content: '';position: absolute;right: -5px;bottom: 4px;left: 10px;border-bottom: 1px dotted #b1bfc8}
.table-features-min .cell2 {position: relative;text-align: right;padding: 8px 0 0;}
.table-features-min .cell2:after {content: '';position: absolute;right: -5px;bottom: 4px;left: 0;border-bottom: 1px dotted #b1bfc8}

СПАСИБО!
Обратно в Страница товара


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Лазурь
  5. → Страница товара
  6. Privacy Policy