Jump to content

Как расположить товары не в строку, а в ряд?


Recommended Posts

Дело в том, что я купил тему, которая мне очень подходит, но в ней есть один не очень приятный момент. Товары в категориях размещаются 1 в ряд (рисунок 1), а надо, чтоб было по несколько в одной строке, как на рисунке 2. Модуль home featured, что изображен на втором рисунке ставит товары как надо, но в самом магазине товар идет один на строку. Во многих темах так. Я извиняюсь, если вдруг это элементарно включается где-то в настройках, но я, к сожалению, не нашел. Посему, подскажите, есть ли модуль, который может изменить расположение товаров в категориях с 1ого рисунка на 2ой, либо в каком файле, что и чем нужно заменить, если это вообще возможно? Заранее премного благодарен!

46325_USMYDlpRcA83IR2rnqhe_t

46326_yOv7iuIxHtl8mLvf87uS_t

Link to comment
Share on other sites

  • 2 months later...

Вопрос не в смарти, а просто в html+css.

 

У вас товары на странице выводятся с помощью подобного списка:

 

<ul id="product_list" class="....">

<li class="....">.......</li>

<li class="....">.......</li>

<li class="....">.......</li>

<li class="....">.......</li>

..........

</ul>

 

Загляните в файл global.css найдите что-то похожее на ul#product_list li и поменяйте стиль отображения на желаемый вами.

Link to comment
Share on other sites

  • 2 years later...

Подскажите как разместить текстовую часть под изображением категории? 

 

TPL:

{if isset($subcategories)}
  <h2>{l s='Categorys' mod='blockhomecategorys'}</h2>

  <div id="block_content">
  
    <ul class="inline_homecat">
      {foreach from=$subcategories item=subcategory}
	<li class="inline_homecat">
	   <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}" class="img">
	    {if $subcategory.id_image}
		<img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
	    {else}
		<img src="{$img_cat_dir}default-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
	    {/if}
	    </a>
	  <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" class="inline_text">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>
	  </li>
      {/foreach}
    </ul>
    <br class="clear"/>
  </div>
{/if}

CSS:

.inline_homecat  li .img {
	float:left;
	margin-right:50px
}
.inline_homecat  li  {
	float: left; 
	list-style-type:none;
}

001.jpg

Link to comment
Share on other sites

Ну так давайте доведем бесплатный модуль вывода категорий на главную до ума, в css я не силен поэтому методом проб и ошибок:

zUjA-N9Z3Uk.jpg

{if isset($subcategories)}
<div id="subcategories" class="clear">
<ul class="cat1">
{foreach from=$subcategories item=subcategory}
<li class="cat2" clearfix>
<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}">
{if $subcategory.id_image}
<img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
{else}
<img src="{$img_cat_dir}default-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
{/if}
</a>
<p/>
<a class="cat3" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>

</li>
{/foreach}
</ul>
<p/>
<br class="clear"/>
</div>
{/if}
.cat3 {
font-size:16px;
text-align:center;
}
.cat1 img {
float:center;
}
ul#subcategories { margin-top: 2em; list-style-type: none }
#subcategories li { 
float:left;
clear:both;
margin-right:50px;
background: #f2f2f2;
list-style-type:none;
clear: none;
text-align:center;
}
Link to comment
Share on other sites

 

Ну так давайте доведем бесплатный модуль вывода категорий на главную до ума, в css я не силен поэтому методом проб и ошибок:

zUjA-N9Z3Uk.jpg

{if isset($subcategories)}
<div id="subcategories" class="clear">
<ul class="cat1">
{foreach from=$subcategories item=subcategory}
<li class="cat2" clearfix>
<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}">
{if $subcategory.id_image}
<img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
{else}
<img src="{$img_cat_dir}default-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
{/if}
</a>
<p/>
<a class="cat3" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>

</li>
{/foreach}
</ul>
<p/>
<br class="clear"/>
</div>
{/if}
.cat3 {
font-size:16px;
text-align:center;
}
.cat1 img {
float:center;
}
ul#subcategories { margin-top: 2em; list-style-type: none }
#subcategories li { 
float:left;
clear:both;
margin-right:50px;
background: #f2f2f2;
list-style-type:none;
clear: none;
text-align:center;
}

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

Link to comment
Share on other sites

×
×
  • Create New...