Найти на сайте
  2. Форумы
  3. МАСТЕРСКАЯ
  4. Дизайн / Графика / Искусство
  5. Instant shop- категории товаров

Instant shop- категории товаров

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО
#1 20 ноября 2011 в 14:29
Мучаюсь третий день
Суть проблемы состоит в том не могу поменять оформлении каталога товаров в магазине.
Многие скажут что тут сложного просто поменял стили и все, вначале тоже так думал но все намного сложнее или просто заработался не могу понять проще объясню на картинке
примерно надо сделать так

по умолчанию выглядит так

код выглядит так 
  1. <div>
  2.     <ul id="inshop_tree">
  3.  
  4.         {foreach key=key item=item from=$items}
  5.  
  6.             {if $item.NSLevel < $last_level}
  7.                 {math equation="x - y" x=$last_level y=$item.NSLevel assign="tail"}
  8.                 {section name=foo start=0 loop=$tail step=1}
  9.                     </ul></li>
  10.                 {/section}
  11.             {/if}
  12.             {if $item.NSRight - $item.NSLeft == 1}
  13.                 <li>
  14.                     <a href="javascript:" class="cat_none"></a>
  15.                     <span class="folder">
  16.                         {if $item.id != $current_id}
  17.                             <a href="/shop/{$item.seolink}">{$item.title}</a>
  18.                         {else}
  19.                             {$item.title}
  20.                         {/if}
  21.                     </span>
  22.                 </li>
  23.             {else}
  24.                 <li style="padding:{php}echo $padding;{/php}" class="cat">
  25.                     <a href="javascript:" class="cat_plus" style="{if $cfg.expand_all}display:none{/if}" title="Развернуть"></a>
  26.                     <a href="javascript:" class="cat_minus" style="{if !$cfg.expand_all}display:none{/if}" title="Свернуть"></a>
  27.                     <span class="folder">
  28.                         {if $item.id != $current_id}
  29.                             <a href="/shop/{$item.seolink}">{$item.title}</a>
  30.                         {else}
  31.                             {$item.title}
  32.                         {/if}
  33.                     </span>
  34.                     <ul>
  35.             {/if}
  36.             {assign var="last_level" value=$item.NSLevel}
  37.  
  38.         {/foreach}
  39.  
  40.     </ul>
  41.  
  42. </div>
  43. <script type="text/javascript">    
  44.  
  45.         {if !$cfg.expand_all}
  46.             {literal}
  47.                 $('#inshop_tree li > ul').hide();
  48.             {/literal}
  49.         {/if}
  50.  
  51.         {literal}
  52.  
  53.         $('.cat_plus').click(function(){
  54.             $(this).hide();
  55.             $(this).parent('li').find('.cat_minus').eq(0).show();
  56.             $(this).parent('li').find('ul').eq(0).show();
  57.         });
  58.  
  59.         $('.cat_minus').click(function(){
  60.             $(this).hide();
  61.             $(this).parent('li').find('.cat_plus').eq(0).show();
  62.             $(this).parent('li').find('ul').hide();
  63.             $(this).parent('li').find('ul').find('.cat_minus').hide();
  64.             $(this).parent('li').find('ul').find('.cat_plus').show();
  65.         });
  66.  
  67.  
  68. //        $('#inshop_tree li').hover(
  69. //            function() {
  70. //                $(this).find('ul:first').slideDown();
  71. //                $(this).find('a:first').addClass("hover");
  72. //            },
  73. //            function() {
  74. //                $(this).find('ul:first').slideUp();
  75. //                $(this).find('a:first').removeClass("hover");
  76. //            }
  77. //        );
  78.  
  79.     {/literal}
  80. </script>
  81.  
а css выглядит так
  1. #inshop_tree{ padding:0px; list-style:none; margin:0px; }
  2. #inshop_tree ul{
  3.     margin-left:0px;
  4.     padding-left:16px;
  5. }
  6. #inshop_tree li { list-style:none; margin-left:0px; padding-left:0px; }
  7. #inshop_tree li span {
  8.     background:url(/templates/_default_/images/icons/folder.png) no-repeat;
  9.     padding-left:20px;
  10.     margin-left:0px;
  11.     font-weight:bold;
  12. }
  13.  
  14. #inshop_tree li span a{
  15.     font-weight:normal;
  16. }
  17.  
  18. #inshop_tree li a.cat_plus,
  19. #inshop_tree li a.cat_minus,
  20. #inshop_tree li a.cat_none{
  21.     display:block;
  22.     float:left;
  23.     width:16px;
  24.     height:16px;
  25.     margin-right:3px;
  26. }
  27.  
  28. #inshop_tree li a.cat_plus{ background:url(../images/shop_cat_plus.png) no-repeat left 2px; }
  29. #inshop_tree li a.cat_minus{ background:url(../images/shop_cat_minus.png) no-repeat left 2px; }
  30.  
как я понял нужно переписывать код или еще что помогите пожалуйста есл кто знает как сделать буду благодарен
0
#2 20 ноября 2011 в 23:28
ХМ не рекламы ради… есть такой сайт htmlbook точка ru на нем все популярненько расписано с примерами.
Поизучайте сделайте в html а потом и к инстанту примените
0
#3 21 ноября 2011 в 00:14
спасибо.
Только в html+css я могу это сделать, не могу в instant-e применить
0
#4 21 ноября 2011 в 10:03
Немного не понимаю что вас так смутило, какая разница цмс или нет )

Обьясню выход из ситуации как вижу его я(не панацея, может кто и по другому предложит)
делаем "для мужчин" раздел в корневом, в нем уже делаем подразделы "одежда" и т.п.

для основного раздела идет код 
  1. <li> 
  2. 14	                    <a href="javascript:" class="cat_none"></a> 
  3. 15	                    <span class="folder"> 
  4. 16	                        {if $item.id != $current_id} 
  5. 17	                            <a href="/shop/{$item.seolink}">{$item.title}</a> 
  6. 18	                        {else} 
  7. 19	                            {$item.title} 
  8. 20	                        {/if} 
  9. 21	                    </span> 
  10. 22	                </li>
для подразделов 
  1. <li style="padding:{php}echo $padding;{/php}" class="cat"> 
  2. 25	                    <a href="javascript:" class="cat_plus" style="{if $cfg.expand_all}display:none{/if}" title="Развернуть"></a> 
  3. 26	                    <a href="javascript:" class="cat_minus" style="{if !$cfg.expand_all}display:none{/if}" title="Свернуть"></a> 
  4. 27	                    <span class="folder"> 
  5. 28	                        {if $item.id != $current_id} 
  6. 29	                            <a href="/shop/{$item.seolink}">{$item.title}</a> 
  7. 30	                        {else} 
  8. 31	                            {$item.title} 
  9. 32	                        {/if} 
  10. 33	                    </span>
нужно еще обратить внимание где вставляются ul и если они не нужны, убрать
Создание сайтов, верстка, кодинг
0
#5 21 ноября 2011 в 16:57
да что то я действительно туплю спасибо тема закрыта
0
Нужна помощь, возможно за $
Резиновая блочная верстка

Похожие темы

Витрина товаров: поле Минимальный заказ

Разработка дополнений Создана 4 года назад 2 сообщения

Некорректная фильтрация в фильтре при нахождении в категории

Релизы 2.X Создана 1 год назад 3 сообщения

[ЗАКРЫТО] Проблемы с плагином Витрина товаров

Вопросы настройки InstantCMS Создана 4 месяца назад 6 сообщений

Интернет-магазин на первой ветке InstantCMS - на компоненте /shop

Ищу исполнителя Создана 1 год назад 1 сообщение

Нужна интеграция в InstanShop или Витину товаров

Ищу исполнителя Создана 3 года назад 7 сообщений

Обновят ли shop ?

Сайт и форум проекта Создана 4 года назад 2 сообщения

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.