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


Как Сделать Слева От Категорий Картиинку

Автор fury21, 06 нояб. 2011 14:10

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

#1 fury21

fury21

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

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

Отправлено 06 Ноябрь 2011 - 14:10

как можно сделать, что бы у всех категорий 2ого уровня в каталоге слева была своя, уникальная картинка, как на фото например

Изображение

#2 Vaccina

Vaccina

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

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

Отправлено 07 Ноябрь 2011 - 17:56

это можно сделать с помощью сл.условия:

{% IF catalog.LEVEL=2%}{% IF catalog.NAME=НАЗВАНИЕ_КАТЕГОРИЙ%}<img src="ссылка_на_изображение"/>{% ENDIF %}{% ENDIF %}

такое условие будет иметь каждая категория в зависимости от названия, т.е. есть блок в шаблоне html:

<ul>
					{%IFNOT catalog_empty %}
					  {% FOR catalog %}
						{% IFNOT catalog.HIDE %}
						  <li class="cat-item">
							<a href="{catalog.URL}" 
							  {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
							  {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
							>{catalog.NAME}</a>
						  </li>
						{% ENDIF %}
					  {% ENDFOR %}
					{% ENDIF %}
					</ul>

меняем на:

<ul>
					{%IFNOT catalog_empty %}
					  {% FOR catalog %}
						{% IFNOT catalog.HIDE %}
						  <li class="cat-item">  {% IF catalog.LEVEL=2%}{% IF catalog.NAME=НАЗВАНИЕ_КАТЕГОРИЙ%}<img src="ссылка_на_изображение"/>{% ENDIF %}{% ENDIF %} 
							<a href="{catalog.URL}" 
							  {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
							  {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
							>{catalog.NAME}</a>
						  </li>
						{% ENDIF %}
					  {% ENDFOR %}
					{% ENDIF %}
					</ul>

#3 fury21

fury21

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

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

Отправлено 07 Ноябрь 2011 - 19:35

Просмотр сообщенияVaccina (07 Ноябрь 2011 - 17:56) писал:

это можно сделать с помощью сл.условия:

{% IF catalog.LEVEL=2%}{% IF catalog.NAME=НАЗВАНИЕ_КАТЕГОРИЙ%}<img src="ссылка_на_изображение"/>{% ENDIF %}{% ENDIF %}

такое условие будет иметь каждая категория в зависимости от названия, т.е. есть блок в шаблоне html:

<ul>
					{%IFNOT catalog_empty %}
					  {% FOR catalog %}
						{% IFNOT catalog.HIDE %}
						  <li class="cat-item">
							<a href="{catalog.URL}" 
							  {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
							  {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
							>{catalog.NAME}</a>
						  </li>
						{% ENDIF %}
					  {% ENDFOR %}
					{% ENDIF %}
					</ul>

меняем на:

<ul>
					{%IFNOT catalog_empty %}
					  {% FOR catalog %}
						{% IFNOT catalog.HIDE %}
						  <li class="cat-item">  {% IF catalog.LEVEL=2%}{% IF catalog.NAME=НАЗВАНИЕ_КАТЕГОРИЙ%}<img src="ссылка_на_изображение"/>{% ENDIF %}{% ENDIF %} 
							<a href="{catalog.URL}" 
							  {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
							  {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
							>{catalog.NAME}</a>
						  </li>
						{% ENDIF %}
					  {% ENDFOR %}
					{% ENDIF %}
					</ul>

1) А у меня почему то вместо "{% FOR catalog %}" написано "{% FOR catalog_full %}" это нормально?
2) Как сделать что бы картинка была на уровне слов а не чуть выше?

#4 Vaccina

Vaccina

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

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

Отправлено 08 Ноябрь 2011 - 18:23

Цитата

1) А у меня почему то вместо "{% FOR catalog %}" написано "{% FOR catalog_full %}" это нормально?

Да это нормально, только условие будет вида 

{% IF catalog_full.LEVEL=2%}{% IF catalog_full.NAME=НАЗВАНИЕ_КАТЕГОРИЙ%}<img src="ссылка_на_изображение"/>{% ENDIF %}{% ENDIF %}

Можно попробовать в файл стилей добавить класс

Цитата

2) Как сделать что бы картинка была на уровне слов а не чуть выше?


.cat-item img {
 margin-bottom: -3px;
}

#5 Flor@@@

Flor@@@

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

  • Пользователи
  • PipPipPipPip
  • 822 сообщений
  • Городмосква

Отправлено 29 Январь 2012 - 20:47

а что вписывать в:   <li class="cat-item">  {% IF catalog.LEVEL=2%}{% IF catalog.NAME=НАЗВАНИЕ_КАТЕГОРИЙ%}<img src="ссылка_на_изображение"/>{% ENDIF %}{% ENDIF %}
                            <a href="{catalog.URL}"


вместо слов "название категорий"??

Каждую категория прописывать?


#6 Vaccina

Vaccina

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

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

Отправлено 30 Январь 2012 - 22:10

Да придется прописывать каждую категорию. Например 

<li class="cat-item"> 
{% IF catalog.LEVEL=2%}
{% IF catalog.NAME=Категория1%}<img src="ссылка_на_изображение"/>{% ENDIF %}
{% IF catalog.NAME=Категория2%}<img src="ссылка_на_изображение2"/>{% ENDIF %}
{% ENDIF %}
<a href="{catalog.URL}"

#7 Flor@@@

Flor@@@

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

  • Пользователи
  • PipPipPipPip
  • 822 сообщений
  • Городмосква

Отправлено 02 Февраль 2012 - 12:37

то есть мой каталог:

<li class="categories"><h2><a href="{CATALOG_URL}" class="indexPage">Каталог</a></h2>
      <ul>
      {%IFNOT catalog_empty %}
        {% FOR catalog %}
          {% IFNOT catalog.HIDE %}
            <li class="cat-item{% IF catalog.LEVEL=0%} root{% ENDIF %}{% IF catalog.LEVEL>=1 %} sub{% ENDIF %}{% IF catalog.CURRENT %} selected{% ENDIF %}">
              <a href="{catalog.URL}"
                {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
                {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
              >{catalog.NAME}</a>
            </li>
          {% ENDIF %}
        {% ENDFOR %}
      {% ENDIF %}
      </ul>




станет вот таким:

<li class="categories"><h2><a href="{CATALOG_URL}" class="indexPage">Каталог</a></h2>
      <ul>
      {%IFNOT catalog_empty %}
        {% FOR catalog %}
          {% IFNOT catalog.HIDE %}
            <li class="cat-item">
{% IF catalog.LEVEL=2%}
{% IF catalog.NAME=Фабрика Лонакс%}<img src="http://otdyh-i-son.r...релка2.jpg"/>{% ENDIF %}
{% IF catalog.NAME=Фабрика Александрия%}<img src="http://otdyh-i-son.r...релка2.jpg"/>{% ENDIF %}
{% ENDIF %}
<a href="{catalog.URL}"
                {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
                {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
              >{catalog.NAME}</a>
            </li>
          {% ENDIF %}
        {% ENDFOR %}
      {% ENDIF %}</ul>

???


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

#8 Vaccina

Vaccina

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

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

Отправлено 02 Февраль 2012 - 23:46

Заметила ошибку с закрывающимся тегом li

Ваш код будет иметь следующий вид 

<li class="categories"><h2><a href="{CATALOG_URL}" class="indexPage">Каталог</a></h2>
<ul>
{%IFNOT catalog_empty %}
{% FOR catalog %}
{% IFNOT catalog.HIDE %}
<li class="cat-item{% IF catalog.LEVEL=0%} root{% ENDIF %}{% IF catalog.LEVEL>=1 %} sub{% ENDIF %}{% IF catalog.CURRENT %} selected{% ENDIF %}">
{% IF catalog.NAME=Фабрика Лонакс%}<img src="http://otdyh-i-son.ru/web/upload/assets/images/21/20306/стрелка2.jpg"/>{% ENDIF %}
{% IF catalog.NAME=Фабрика Александрия%}<img src="http://otdyh-i-son.ru/web/upload/assets/images/21/20306/стрелка2.jpg"/>{% ENDIF %}
<a href="{catalog.URL}"
{% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
{% IF catalog.CURRENT %}class="selected"{% ENDIF %}
>{catalog.NAME}</a>
</li>
{% ENDIF %}
{% ENDFOR %}
{% ENDIF %}
</ul>

#9 Flor@@@

Flor@@@

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

  • Пользователи
  • PipPipPipPip
  • 822 сообщений
  • Городмосква

Отправлено 03 Февраль 2012 - 14:56

да. получилось, большое спасибо. Только напротив фабрики Лонакс картинка не пояляется.

Но как как теперь сделать высоту каждой категории меньше? Так как теперь высота категорий имеющих подкатегории стала слишком большой.

И как сделатьтак,  что бы картинка была справа от названия категории, а не слева? и как сделать побольше расстояние медды стрелочкой и названием категории?

#10 Vaccina

Vaccina

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

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

Отправлено 03 Февраль 2012 - 19:50

Цитата

Только напротив фабрики Лонакс картинка не пояляется.
потому что Вы сделали ошибку при наборе названия, сравните как данную категорию Вы записали у себя в коде и как она на самом деле отображается на сайте в каталоге.(Фабрика Лонакс - Фабрика Lonax)

Цитата

Но как как теперь сделать высоту каждой категории меньше? Так как теперь высота категорий имеющих подкатегории стала слишком большой.
И как сделатьтак,  что бы картинка была справа от названия категории, а не слева? и как сделать побольше расстояние медды стрелочкой и названием категории?

Редактор тем - main.css - 
.leftmenu li li {
	display: inline;
}
измените на:
.leftmenu li li {
	display: inline;
	position: relative;
}

далее:
.cat-item img {
	margin-bottom: -30px;
}
измените на:
.cat-item img {
	left: 180px;
	position: absolute;
	top: 20px;
}

#11 Flor@@@

Flor@@@

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

  • Пользователи
  • PipPipPipPip
  • 822 сообщений
  • Городмосква

Отправлено 04 Февраль 2012 - 09:02

спасибо огромное.

Еще бы эти стрелочки вверх как-то поднять бы чтобы были на уровне текста, я попыталась вставить margin но у меня не получилось.



#12 Vaccina

Vaccina

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

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

Отправлено 04 Февраль 2012 - 23:52 

.cat-item img {
	left: 180px;
	margin-bottom: 30px;
	position: absolute;
	top: 20px;
}

измените значение top

#13 Flor@@@

Flor@@@

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

  • Пользователи
  • PipPipPipPip
  • 822 сообщений
  • Городмосква

Отправлено 07 Февраль 2012 - 21:53

Спасибо большое.

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

#14 Vaccina

Vaccina

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

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

Отправлено 08 Февраль 2012 - 22:18

Можно попробовать использовать следующий код

{% IF catalog.LEVEL>0%}
{% IF catalog.NAME=Фабрика Лонакс%}<img src="Для подкатегорий"/>{% ENDIF %}
{%ELSE%}
{% IF catalog.NAME=Фабрика Лонакс%}<img src="Для категорий"/>{% ENDIF %}
{% ENDIF %}

#15 Igarez

Igarez

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

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

Отправлено 09 Декабрь 2012 - 14:58

Сделал как написано. Как сделать чтобы картинка не сьежала дальше border-bottom?
Справа, в каталог товаров

Еще. Как изменить цвет строки поиск? И цвет текста "0 рублей" в шапке сайта?

Спасибо

#16 support 2.0

support 2.0

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

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

Отправлено 10 Декабрь 2012 - 10:27

Просмотр сообщенияIgarez (09 Декабрь 2012 - 14:58) писал:

Сделал как написано. Как сделать чтобы картинка не сьежала дальше border-bottom?
Справа, в каталог товаров
Сайт: mbeats-store.ru

Еще. Как изменить цвет строки поиск? И цвет текста "0 рублей" в шапке сайта?

Спасибо

куда именно она не должна съезжать: влево, вправо, вверх, вниз?
Чтобы изменить фон у строки поиска, сделайте следующее
файл main.css -> найдите блок (391 строка)
#search {
height: 35px;
float: right;
padding-top: 45px;
padding-right: 15px;
width: 245px;
}

и замените на
#search {
height: 26px;
float: right;
margin-top: 48px;
margin-right: 50px;
width: 204px;
background: white;
-moz-border-radius: 3px 17px 17px 3px;
border-radius: 3px 17px 17px 3px;
-webkit-border-radius: 3px 17px 17px 3px;
}

Далее найдите блок (397 строка)
#search .search_box {
background: none;
border: none;
font: 11px Verdana, Geneva, sans-serif;
width: 200px;
padding: 0px;
padding-left: 14px;
padding-top: 8px;
}

и замените на
#search .search_box {
background: none;
border: none;
font: 11px Verdana, Geneva, sans-serif;
width: 190px;
padding: 0px;
padding-left: 5px;
padding-top: 5px;
}

Чтобы изменить цвет суммы, нужно в файле main.css найти строку (419)
#cartInfo {
font-size: 13px;
white-space: nowrap;
}

и заменить ее на
#cartInfo {
font-size: 13px;
white-space: nowrap;
color: white;  <!-- цвет суммы заказа в шапке --> 
}

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

  • ScreenShot 23.jpg

#17 Igarez

Igarez

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

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

Отправлено 11 Декабрь 2012 - 00:44

Чтоб, вниз не выезжали картинки в блоке каталог товаров.
И еще, как поднять блок каталог товаров выше?
Большое спасибо.

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

  • Безимени-5.jpg

#18 Koderhan

Koderhan

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

  • Модератоpы
  • 6 227 сообщений

Отправлено 11 Декабрь 2012 - 10:22

Просмотр сообщенияIgarez (11 Декабрь 2012 - 00:44) писал:

Чтоб, вниз не выезжали картинки в блоке каталог товаров.
И еще, как поднять блок каталог товаров выше?
Большое спасибо.
В файл main.csstemplate.
Добавить код:
.cat-item a img {
width: 3em;
height: 2em;
margin-bottom: -8px;
}

#19 Igarez

Igarez

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

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

Отправлено 11 Декабрь 2012 - 19:18

Спасибо.

#20 Igarez

Igarez

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

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

Отправлено 16 Декабрь 2012 - 23:04

Подскажите пожалуйста как сделать кнопки в одну строку? (Показано на скриншоте)
Вот код:
<a class="readmore" onclick="$('#goodsListFormId{goods.MIN_PRICE_NOW_ID}').submit(); return false;" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&amp;form%5Bgoods_from%5D={goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" title="Положить &laquo;{goods.NAME}&raquo; в корзину">В корзину</a><a class="readmore" href="{goods.URL}" title="Перейти на страницу &laquo;{goods.NAME}&raquo;">Подробнее</a>

Спасибо

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

  • Безивмени-1.jpg

Обратно в Каталог товаров


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

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

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