Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

Динамические Вкладки

Автор emin808, 15 янв. 2013 15:27

вкладки товар

Авторизуйтесь для ответа в теме

Сообщений в теме: 264

#61 ogonek7777

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

Пользователи
2 109 сообщений

ГородМосква

Отправлено 05 Май 2013 - 17:32

Здравствуйте, очень понравились вкладки на сайте http://www.220-volt.ru/catalog-63255/
Помогите, пожалуйста, изменить мои вкладки на такие:

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

Наверх

#62 ogonek7777

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

Пользователи
2 109 сообщений

ГородМосква

Отправлено 06 Май 2013 - 12:20

ogonek7777 (05 Май 2013 - 17:32) писал:

вопрос актуален

Наверх

#64 ogonek7777

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

Пользователи
2 109 сообщений

ГородМосква

Отправлено 07 Май 2013 - 19:09

Сake (07 Май 2013 - 02:48) писал:

Найдите и удалите в файле стилей main.css

.ui-widget-content {
background: none !important;
}

далее найдите

#tabs li {
padding-left: 0 !important;
background: none !important;
}

и замените на

#tabs li {
padding-left: 0 !important;
}

далее в самый конец файла стилей добавьте

.ui-tabs-nav {
margin: 0 !important;
padding: 0;
background: none;
border: none !important;
}
.ui-tabs-nav .ui-state-default {
margin: 0 10px !important;
}
.ui-tabs-nav .ui-state-default.ui-tabs-selected {
background: #fff !important;
}
.ui-tabs-nav .ui-state-default a {
border: none !important;
padding-bottom: 15px !important;
}
.ui-tabs-panel {
background: #fff !important;
border: 1px solid #D3D3D3 !important;
}

Большое спасибо, теперь симпатичнее, чем было,но это не совсем тот вариант, как я привела. Нужно еще убрать общую рамку вокруг табов, а также закрытые вкладки оформить как кнопки (как на изображении)
Прикрепленные изображения

Наверх

#65 Сake

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

Модератоpы
5 979 сообщений

Отправлено 08 Май 2013 - 02:16

Добавьте в самый конец вашего файла стилей main.css

#tabs {
  border: none !important;
  background: none !important;
}
.ui-tabs .ui-tabs-nav li {
  border-bottom: 1px solid #D3D3D3 !important;
  border-radius: 0;
}
.ui-tabs-nav .ui-state-default.ui-tabs-selected {
  padding-bottom: 10px !important;
  border-bottom: none !important;
}
.ui-tabs-nav {
  padding-left: 0 !important;
}
.ui-tabs-nav li:first-child {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

Наверх

#66 ogonek7777

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

Пользователи
2 109 сообщений

ГородМосква

Отправлено 08 Май 2013 - 11:44

Сake (08 Май 2013 - 02:16) писал:

Добавьте в самый конец вашего файла стилей main.css

#tabs {
border: none !important;
background: none !important;
}
.ui-tabs .ui-tabs-nav li {
border-bottom: 1px solid #D3D3D3 !important;
border-radius: 0;
}
.ui-tabs-nav .ui-state-default.ui-tabs-selected {
padding-bottom: 10px !important;
border-bottom: none !important;
}
.ui-tabs-nav {
padding-left: 0 !important;
}
.ui-tabs-nav li:first-child {
margin-left: 0 !important;
padding-left: 0 !important;
}

Спасибо. Отлично. Только я пытаюсь установить такое же скругление, и оно не везде получилось:
- нет скругления низа кнопок.
- нет скругления текстового блока.

Наверх

#67 miyako

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

Модератоpы
5 372 сообщений

Отправлено 08 Май 2013 - 12:10

ogonek7777 (08 Май 2013 - 11:44) писал:

Можете указать страницу вашего сайта с такими кнопками?

Наверх

#68 ogonek7777

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

Пользователи
2 109 сообщений

ГородМосква

Отправлено 08 Май 2013 - 14:36

miyako (08 Май 2013 - 12:10) писал:

Можете указать страницу вашего сайта с такими кнопками?

пример

Наверх

#69 miyako

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

Модератоpы
5 372 сообщений

Отправлено 08 Май 2013 - 14:48

ogonek7777 (08 Май 2013 - 14:36) писал:

пример

Найдите код:

.ui-tabs .ui-tabs-panel {
display: block;
border-width: 0;
padding: 1em 1.4em;
background: none;
}

и замените на:

.ui-tabs .ui-tabs-panel {
display: block;
border-width: 0;
padding: 1em 1.4em;
background: none;
border-radius: 5px 5px 5px 5px;
}

Найдите код:

#primaryContent ul li {
padding-left: px;
margin: 0px 0 0px 0;
}

и замените на:

#primaryContent ul li {
padding-left: px;
margin: 0px 0 0px 0;
border-radius: 5px 5px 5px 5px;
}

Наверх

#70 ogonek7777

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

Пользователи
2 109 сообщений

ГородМосква

Отправлено 08 Май 2013 - 15:50

вот такой косяк получается

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

Наверх

#71 Сake

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

Модератоpы
5 979 сообщений

Отправлено 09 Май 2013 - 02:01

Закругления углов я убрал специально, посчитав что так будет отображаться лучше для вашего сайта. Если вам необходимо оставить закругление, то вам необходимо

#tabs {
border: none !important;
background: none !important;
}
.ui-tabs .ui-tabs-nav li {
border-bottom: 1px solid #D3D3D3 !important;
border-radius: 0;
}
.ui-tabs-nav .ui-state-default.ui-tabs-selected {
padding-bottom: 10px !important;
border-bottom: none !important;
}
.ui-tabs-nav {
padding-left: 0 !important;
}
.ui-tabs-nav li:first-child {
margin-left: 0 !important;
padding-left: 0 !important;
}

заменить на

#tabs {
border: none !important;
background: none !important;
}
.ui-tabs .ui-tabs-nav li {
border-bottom: 1px solid #D3D3D3 !important;
border-radius: 4px !important;
}
.ui-tabs-nav .ui-state-default.ui-tabs-selected {
padding-bottom: 10px !important;
border-bottom: none !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.ui-tabs-nav {
padding-left: 0 !important;
}
.ui-tabs-nav li:first-child {
margin-left: 0 !important;
padding-left: 0 !important;
}
#tabs-1:not(.ui-tabs-hide) {
border-top-left-radius: 0 !important;
}

Наверх

#72 ogonek7777

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

Пользователи
2 109 сообщений

ГородМосква

Отправлено 09 Май 2013 - 14:21

Сake (09 Май 2013 - 02:01) писал:

#tabs {
border: none !important;
background: none !important;
}
.ui-tabs .ui-tabs-nav li {
border-bottom: 1px solid #D3D3D3 !important;
border-radius: 0;
}
.ui-tabs-nav .ui-state-default.ui-tabs-selected {
padding-bottom: 10px !important;
border-bottom: none !important;
}
.ui-tabs-nav {
padding-left: 0 !important;
}
.ui-tabs-nav li:first-child {
margin-left: 0 !important;
padding-left: 0 !important;
}

заменить на

#tabs {
border: none !important;
background: none !important;
}
.ui-tabs .ui-tabs-nav li {
border-bottom: 1px solid #D3D3D3 !important;
border-radius: 4px !important;
}
.ui-tabs-nav .ui-state-default.ui-tabs-selected {
padding-bottom: 10px !important;
border-bottom: none !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.ui-tabs-nav {
padding-left: 0 !important;
}
.ui-tabs-nav li:first-child {
margin-left: 0 !important;
padding-left: 0 !important;
}
#tabs-1:not(.ui-tabs-hide) {
border-top-left-radius: 0 !important;
}

Огромное спасибо, так отлично, а как сделать чтоб нижняя кромка кнопок тоже подсвечивалась и чтоб сам блок тоже был с рамкой d3d3d3 ? Заранее спасибо! :wub:

Наверх

#73 ogonek7777

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

Пользователи
2 109 сообщений

ГородМосква

Отправлено 09 Май 2013 - 14:45

Еще вопрос из Каталога товаров.
Сменила кнопку с обычного заказа на быстрый заказ, теперь при нажатии выплывает сообщение, что форма заказа не найдена. Как исправить?
И как выровнять слово "Купить" внутри кнопки, сейчас кнопка сверху выше чем под словом.

Наверх

#74 Stasya

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

Модератоpы
4 007 сообщений

Отправлено 10 Май 2013 - 15:39

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


 <!-- Добавление в корзину -->
		<div class="span12">

Наверх

#75 ogonek7777

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

Пользователи
2 109 сообщений

ГородМосква

Отправлено 10 Май 2013 - 15:52

Stasya (10 Май 2013 - 15:39) писал:


<!-- Добавление в корзину -->
<div class="span12">

У меня в Товаре все уже работает, но при переносе в Товары кнопка не срабатывает.
Все еще жду ответ на предыдущий пост.
Спасибо

Наверх

#76 Stasya

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

Модератоpы
4 007 сообщений

Отправлено 10 Май 2013 - 17:54

Какой инструкцией Вы пользовались?

Наверх

#77 Сake

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

Модератоpы
5 979 сообщений

Отправлено 14 Май 2013 - 04:29

ogonek7777 (09 Май 2013 - 14:21) писал:

Найдите в вашем файле стилей

.ui-tabs .ui-tabs-nav li {
  border-bottom: 1px solid #D3D3D3 !important;
  border-radius: 6px !important;
}

и замените на

.ui-tabs .ui-tabs-nav li {
  border-bottom: 1px solid #D3D3D3 !important;
  border-radius: 6px !important;
}
.ui-tabs .ui-tabs-nav li:hover {
  border-bottom: 1px solid #999 !important;
}

далее найдите

.ui-tabs-panel {
  background: #fff !important;
  border: 1px solid #D3D3D3 !important;
}

и замените на

.ui-tabs-panel {
  background: #fff !important;
  border: 1px solid #BBBBBB !important;
}

Наверх

#78 ogonek7777

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

Пользователи
2 109 сообщений

ГородМосква

Отправлено 14 Май 2013 - 15:08

Сake (14 Май 2013 - 04:29) писал:

Найдите в вашем файле стилей

Спасибо! Супер!

Наверх

#79 Flor@@

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

Пользователи
1 959 сообщений

Отправлено 24 Май 2013 - 11:53

помогите в динамических вкладках создать два типа сопутствующих товаров: "аналоги" и "сопутствующие". Как разделить сопутствующие таким образом - на две части??

Наверх

#80 Vaccina

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

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

Отправлено 25 Май 2013 - 04:21

Сопутствующие товары можно разделить только через условие количества выводящих товаров. Например есть блок сопутствующих товаров

<!-- Сопутствующие товары -->
  {% IFNOT related_goods_empty %}
  <h3>Сопутствующие товары</h3>
  <table>
	<tr>
	{% FOR related_goods %}
	  <td class="goodsListItem">
		<div class="goodsListItemBlock withBorder cornerAll">
		  <div class="goodsListItemImage"><a href="{related_goods.URL}"><img class="goods-image-small" src="{% IF related_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{related_goods.IMAGE_SMALL}{% ENDIF %}" alt="{related_goods.NAME}" /></a></div>
		  <h3 class="goodsListItemName"><a href="{related_goods.URL}">{related_goods.NAME}</a></h3>
		  <div class="goodsListItemPriceNew">
			<a href="{related_goods.URL_MIN_PRICE_NOW}">{related_goods.MIN_PRICE_NOW | money_format}</a>
		  </div>
		  <div class="goodsListItemPriceOld">
			{% IF related_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>related_goods.MIN_PRICE_NOW %}
			  <a href="{related_goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{related_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a>
			{% ELSEIF related_goods.MIN_PRICE_OLD>related_goods.MIN_PRICE_NOW %}
			  <a href="{related_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{related_goods.MIN_PRICE_OLD | money_format}</a>
			{% ENDIF %}
		  </div>
		</div>
	  </td>
	  {% IFNOT related_goods.last %}{related_goods.index | is_divided("4","</tr><tr>","")}{% ENDIF %}
	{% ENDFOR goods %}
	</tr>
  </table><br /><br />
  {% ENDIF %}
  <!-- END Сопутствующие товары -->

его можно заменить на

<!-- Сопутствующие товары -->
  {% IFNOT related_goods_empty %}
  <h3>Сопутствующие товары</h3>
  <table>
	<tr>
	{% FOR related_goods %}{% IF related_goods.index < 10 %}
	  <td class="goodsListItem">
		<div class="goodsListItemBlock withBorder cornerAll">
		  <div class="goodsListItemImage"><a href="{related_goods.URL}"><img class="goods-image-small" src="{% IF related_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{related_goods.IMAGE_SMALL}{% ENDIF %}" alt="{related_goods.NAME}" /></a></div>
		  <h3 class="goodsListItemName"><a href="{related_goods.URL}">{related_goods.NAME}</a></h3>
		  <div class="goodsListItemPriceNew">
			<a href="{related_goods.URL_MIN_PRICE_NOW}">{related_goods.MIN_PRICE_NOW | money_format}</a>
		  </div>
		  <div class="goodsListItemPriceOld">
			{% IF related_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>related_goods.MIN_PRICE_NOW %}
			  <a href="{related_goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{related_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a>
			{% ELSEIF related_goods.MIN_PRICE_OLD>related_goods.MIN_PRICE_NOW %}
			  <a href="{related_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{related_goods.MIN_PRICE_OLD | money_format}</a>
			{% ENDIF %}
		  </div>
		</div>
	  </td>
	  {% IFNOT related_goods.last %}{related_goods.index | is_divided("4","</tr><tr>","")}{% ENDIF %}
	{% ENDIF %}{% ENDFOR goods %}
	</tr>
  </table><br /><br />
  {% ENDIF %}
  <!-- END Сопутствующие товары -->
 
  <!-- Аналогичные товары -->
  {% IFNOT related_goods_empty %}
  <h3>Аналогичные товары</h3>
  <table>
	<tr>
	{% FOR related_goods %}{% IF related_goods.index >= 10 %}
	  <td class="goodsListItem">
		<div class="goodsListItemBlock withBorder cornerAll">
		  <div class="goodsListItemImage"><a href="{related_goods.URL}"><img class="goods-image-small" src="{% IF related_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{related_goods.IMAGE_SMALL}{% ENDIF %}" alt="{related_goods.NAME}" /></a></div>
		  <h3 class="goodsListItemName"><a href="{related_goods.URL}">{related_goods.NAME}</a></h3>
		  <div class="goodsListItemPriceNew">
			<a href="{related_goods.URL_MIN_PRICE_NOW}">{related_goods.MIN_PRICE_NOW | money_format}</a>
		  </div>
		  <div class="goodsListItemPriceOld">
			{% IF related_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>related_goods.MIN_PRICE_NOW %}
			  <a href="{related_goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{related_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a>
			{% ELSEIF related_goods.MIN_PRICE_OLD>related_goods.MIN_PRICE_NOW %}
			  <a href="{related_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{related_goods.MIN_PRICE_OLD | money_format}</a>
			{% ENDIF %}
		  </div>
		</div>
	  </td>
	  {% IFNOT related_goods.last %}{related_goods.index | is_divided("4","</tr><tr>","")}{% ENDIF %}
	{% ENDIF %}{% ENDFOR goods %}
	</tr>
  </table><br /><br />
  {% ENDIF %}
  <!-- END Сопутствующие товары -->

тогда сопутствующими товарами будут сопустствующие товары не больше 10, все товары после 10 включительно будут отображаться как аналогичные товары.

Наверх

Обратно в Страница товара

Темы с аналогичным тегами вкладки, товар

Вопросы работы сервиса StoreLand → Предложения по улучшению сервиса → Перенести Указание Цены Из Модификаций И Сделать Обязательное Поле Пустым Автор Гость_Максим Бакланов_* , 18 февр. 2020 цена, товар, модификации	1 Ответ 2 480 Просмотров	Никита Фёдоров 19 авг. 2020
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Город → Сделать Поле Пустым По Умолчанию Автор Гость_Максим Бакланов_* , 18 февр. 2020 товар, страница товара и 1 еще...	2 Ответов 1 925 Просмотров	Максим Бакланов 09 марта 2020
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Карамель → Каталог товаров → Не Вмещается Полностью Наименование Товара В Мобильной Версии Автор Гость_Alexsandra_* , 28 окт. 2019 наименование, моб, товар и 1 еще...	2 Ответов 1 748 Просмотров	Alexsandra 29 окт. 2019
Повышение продаж, продвижение → Общие вопросы → Убрать Условия Доставки Из Некоторых Товаров Автор Гость_Olivka_* , 16 сент. 2018 товар, ночь, карточка товара и 1 еще...	2 Ответов 839 Просмотров	Olivka 17 сент. 2018
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Туризм → Каталог товаров → Убрать В Списках Товаров Аттрибуты Магазина Автор Гость_Sharlex_* , 24 дек. 2017 карточка товара, товар	5 Ответов 2 815 Просмотров	Sharlex 25 дек. 2017

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

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

Динамические Вкладки

#61 ogonek7777

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

#62 ogonek7777

#63 Сake

#64 ogonek7777

#65 Сake

#66 ogonek7777

#67 miyako

#68 ogonek7777

#69 miyako

#70 ogonek7777

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

#71 Сake

#72 ogonek7777

#73 ogonek7777

#74 Stasya

#75 ogonek7777

#76 Stasya

#77 Сake

#78 ogonek7777

#79 Flor@@

#80 Vaccina

Темы с аналогичным тегами вкладки, товар

Перенести Указание Цены Из Модификаций И Сделать Обязательное Поле Пустым

Сделать Поле Пустым По Умолчанию

Не Вмещается Полностью Наименование Товара В Мобильной Версии

Убрать Условия Доставки Из Некоторых Товаров

Убрать В Списках Товаров Аттрибуты Магазина

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

Google поиск

Динамические Вкладки

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

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

Темы с аналогичным тегами вкладки, товар

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

Войти

Google поиск