Jump to content

Помогите пожалуйста с products.tpl


Recommended Posts

Создал страничку с товарами, но, адаптивности ради расположил по 3 товара в каждый div (пример на рисунке) и так я имею 4 div и в каждом по 3 товара.

Столкнулся с проблемой такого рода, что ничего не получается блин!

Товары выводятся только в одном диве, а как сделать по-другому - я не понимаю(((

Всего предусмотрено для одной категории 12 товаров.

Друзья, помогите пожалуйста, сижу уже целый день(((

Вот мой код этого дизайна

 

         <div id="slider">
            <div class="w100">
               <ul class="pList">
                  <li id="1">
                     <div style="background-image:url(design/{$settings->theme}/images/products/corporate/dornandjbl.jpg)"></div>
                     <a href="/corporate/ivan_dord_and_jbl.html">
                     <span class="pLink">
                     <small></small>
                     <strong>Ivan Dorn & JBL</strong>
                     <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                     </span>
                     </a>
                  </li>
                  <li id="2">
                     <div style="background-image:url(design/{$settings->theme}/images/folders_img/lovestory.jpg)"></div>
                     <a href="">
                     <span class="pLink">
                     <small></small>
                     <strong>Название</strong>
                     <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                     </span>
                     </a>
                  </li>
                  <li id="3">
                     <div style="background-image:url(design/{$settings->theme}/images/folders_img/lovestory.jpg)"></div>
                     <a href="">
                     <span class="pLink">
                     <small></small>
                     <strong>Название</strong>
                     <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                     </span>
                     </a>
                  </li>
               </ul><ul class='pList'>
                  <li id="4">
                     <div style="background-image:url(design/{$settings->theme}/images/folders_img/lovestory.jpg)"></div>
                     <a href="">
                     <span class="pLink">
                     <small></small>
                     <strong>Название</strong>
                     <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                     </span>
                     </a>
                  </li>
                  <li id="5">
                     <div style="background-image:url(design/{$settings->theme}/images/folders_img/lovestory.jpg)"></div>
                     <a href="">
                     <span class="pLink">
                     <small></small>
                     <strong>Название</strong>
                     <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                     </span>
                     </a>
                  </li>
                  <li id="6">
                     <div style="background-image:url(design/{$settings->theme}/images/folders_img/lovestory.jpg)"></div>
                     <a href="">
                     <span class="pLink">
                     <small></small>
                     <strong>Название</strong>
                     <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                     </span>
                     </a>
                  </li>
               </ul><ul class='pList'>
                  <li id="7">
                     <div style="background-image:url(design/{$settings->theme}/images/folders_img/lovestory.jpg)"></div>
                     <a href="">
                     <span class="pLink">
                     <small></small>
                     <strong>Название</strong>
                     <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                     </span>
                     </a>
                  </li>
                  <li id="8">
                     <div style="background-image:url(design/{$settings->theme}/images/folders_img/lovestory.jpg)"></div>
                     <a href="">
                     <span class="pLink">
                     <small></small>
                     <strong>Название</strong>
                     <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                     </span>
                     </a>
                  </li>
                  <li id="9">
                     <div style="background-image:url(design/{$settings->theme}/images/folders_img/lovestory.jpg)"></div>
                     <a href="">
                     <span class="pLink">
                     <small></small>
                     <strong>Название</strong>
                     <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                     </span>
                     </a>
                  </li>
               </ul><ul class='pList'>
                  <li id="10">
                     <div style="background-image:url(design/{$settings->theme}/images/folders_img/lovestory.jpg)"></div>
                     <a href="">
                     <span class="pLink">
                     <small></small>
                     <strong>Название</strong>
                     <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                     </span>
                     </a>
                  </li>
                  <li id="11">
                     <div style="background-image:url(design/{$settings->theme}/images/folders_img/lovestory.jpg)"></div>
                     <a href="">
                     <span class="pLink">
                     <small></small>
                     <strong>Название</strong>
                     <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                     </span>
                     </a>
                  </li>
                  <li id="12">
                     <div style="background-image:url(design/{$settings->theme}/images/folders_img/lovestory.jpg)"></div>
                     <a href="">
                     <span class="pLink">
                     <small></small>
                     <strong>Название</strong>
                     <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                     </span>
                     </a>
                  </li>
               </ul>
            </div>
         </div>

 

post-18294-0-34632700-1505050239_thumb.png

Link to post
Share on other sites

Вы кардинально не верно подошли к задаче
foreach, в котором у вас идет выборка товаров - это цикл. Если задано 12 товаров, то он выполнит 12 циклов и выведет 12 товаров, но все они должны попадать в один див, который выведется 12 раз. А вот располагать эти дивы на странице нужно уже стилями.
Вы же выводите 12 дивов.

Бред.

И при чем тут вообще слайдер к товарам?

Edited by koteyka
Link to post
Share on other sites

  <div id="slider">

<div class="f3">
<div>
контент
</div>

<div>
контент
</div>


<div>
контент
</div>


<div>
контент
</div>
 </div>

<div class="f3"> .... </div>
<div class="f3"> .... </div>

</div>

<style> .f3 { width: 33,3%; float:left; } </style>

 

Вы кардинально не верно подошли к задаче

foreach, в котором у вас идет выборка товаров - это цикл. Если задано 12 товаров, то он выполнит 12 циклов и выведет 12 товаров, но все они должны попадать в один див, который выведется 12 раз. А вот располагать эти дивы на странице нужно уже стилями.

Вы же выводите 12 дивов.

Бред.

И при чем тут вообще слайдер к товарам?

 

я не уверен что он использует цикл , там скорее всего чистый html

Link to post
Share on other sites

 

Создал страничку с товарами, но, адаптивности ради расположил по 3 товара в каждый div (пример на рисунке) и так я имею 4 div и в каждом по 3 товара.

 

Столкнулся с проблемой такого рода, что ничего не получается блин!

 

Товары выводятся только в одном диве, а как сделать по-другому - я не понимаю(((

 

Всего предусмотрено для одной категории 12 товаров.

 

Друзья, помогите пожалуйста, сижу уже целый день(((

 

Вот мой код этого дизайна

 

 

         <div id="slider">
            <div class="w100">
               <ul class="pList">
                  <li id="1">
                     <div style="background-image:url(design/{$settings->theme}/images/products/corporate/dornandjbl.jpg)"></div>
                     <a href="/corporate/ivan_dord_and_jbl.html">
                     <span class="pLink">
                     <small></small>
                     <strong>Ivan Dorn & JBL</strong>
                     <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                     </span>
                     </a>
                  </li>
                  <li id="2">
                     <div style="background-image:url(design/{$settings->theme}/images/folders_img/lovestory.jpg)"></div>
                     <a href="">
                     <span class="pLink">
                     <small></small>
                     <strong>Название</strong>
                     <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                     </span>
                     </a>
                  </li>
                  <li id="3">
                     <div style="background-image:url(design/{$settings->theme}/images/folders_img/lovestory.jpg)"></div>
                     <a href="">
                     <span class="pLink">
                     <small></small>
                     <strong>Название</strong>
                     <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                     </span>
                     </a>
                  </li>
               </ul><ul class='pList'>
                  <li id="4">
                     <div style="background-image:url(design/{$settings->theme}/images/folders_img/lovestory.jpg)"></div>
                     <a href="">
                     <span class="pLink">
                     <small></small>
                     <strong>Название</strong>
                     <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                     </span>
                     </a>
                  </li>
                  <li id="5">
                     <div style="background-image:url(design/{$settings->theme}/images/folders_img/lovestory.jpg)"></div>
                     <a href="">
                     <span class="pLink">
                     <small></small>
                     <strong>Название</strong>
                     <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                     </span>
                     </a>
                  </li>
                  <li id="6">
                     <div style="background-image:url(design/{$settings->theme}/images/folders_img/lovestory.jpg)"></div>
                     <a href="">
                     <span class="pLink">
                     <small></small>
                     <strong>Название</strong>
                     <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                     </span>
                     </a>
                  </li>
               </ul><ul class='pList'>
                  <li id="7">
                     <div style="background-image:url(design/{$settings->theme}/images/folders_img/lovestory.jpg)"></div>
                     <a href="">
                     <span class="pLink">
                     <small></small>
                     <strong>Название</strong>
                     <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                     </span>
                     </a>
                  </li>
                  <li id="8">
                     <div style="background-image:url(design/{$settings->theme}/images/folders_img/lovestory.jpg)"></div>
                     <a href="">
                     <span class="pLink">
                     <small></small>
                     <strong>Название</strong>
                     <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                     </span>
                     </a>
                  </li>
                  <li id="9">
                     <div style="background-image:url(design/{$settings->theme}/images/folders_img/lovestory.jpg)"></div>
                     <a href="">
                     <span class="pLink">
                     <small></small>
                     <strong>Название</strong>
                     <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                     </span>
                     </a>
                  </li>
               </ul><ul class='pList'>
                  <li id="10">
                     <div style="background-image:url(design/{$settings->theme}/images/folders_img/lovestory.jpg)"></div>
                     <a href="">
                     <span class="pLink">
                     <small></small>
                     <strong>Название</strong>
                     <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                     </span>
                     </a>
                  </li>
                  <li id="11">
                     <div style="background-image:url(design/{$settings->theme}/images/folders_img/lovestory.jpg)"></div>
                     <a href="">
                     <span class="pLink">
                     <small></small>
                     <strong>Название</strong>
                     <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                     </span>
                     </a>
                  </li>
                  <li id="12">
                     <div style="background-image:url(design/{$settings->theme}/images/folders_img/lovestory.jpg)"></div>
                     <a href="">
                     <span class="pLink">
                     <small></small>
                     <strong>Название</strong>
                     <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                     </span>
                     </a>
                  </li>
               </ul>
            </div>
         </div>

Выложите код не html файла , а tpl , а лучше пришлите мне файл на почту gruzin@bk.ru

Edited by Gruzin
Link to post
Share on other sites

А как он товары туда тогда заносит из $products?

 

вручную тк в выложеном куске есть  <div style="background-image:url(design/{$settings->theme}/images/products/corporate/dornandjbl.jpg)"></div>

 

если это был html  был бы путь с названием папки, а так это код из tpl

Link to post
Share on other sites

вручную тк в выложеном куске есть  <div style="background-image:url(design/{$settings->theme}/images/products/corporate/dornandjbl.jpg)"></div>

 

если это был html  был бы путь с названием папки, а так это код из tpl

Я видел его файл, там нет цикла, продукты выводятся статически.

Link to post
Share on other sites

С помощью Gruzin у меня получилась такая штука. (скрин во вложении)

Помогите пожалуйста вывести 3 товара в один div, что бы они получилось 4 div-а и в каждом по 3 товара.

Всего будет 12 товаров в категории

Вот мой products.tpl

{* Список товаров *}

{* Канонический адрес страницы *}
{if $category && $brand}
{$canonical="/catalog/{$category->url}/{$brand->url}" scope=parent}
{elseif $category}
{$canonical="/catalog/{$category->url}" scope=parent}
{elseif $brand}
{$canonical="/brands/{$brand->url}" scope=parent}
{elseif $keyword}
{$canonical="/products?keyword={$keyword|escape}" scope=parent}
{else}
{$canonical="/products" scope=parent}
{/if}


	  <article id="site">
         <div class="bx-breadcrumb" style="margin: 0;">
            <div style="clear:both"></div>
         </div>
         <div id="slider">
            <div class="w100">
				{if $products}
                {foreach $products as $product}
				<ul class='pList'>
                    <li id="{$product->id}">
                        {if $product->image}<div style="background-image:url({$product->image->filename|resize:510:600})"></div>{/if}
                        <a href="products/{$product->url}">
                            <span class="pLink">
                            <small></small>
                            <strong>{$product->name|escape}</strong>
                            <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                            </span>
                        </a>
                    </li>
				</ul>
			   {/foreach}
               {/if}
            </div>
         </div>
         <div id="sNav">
            <h2>Корпоративные</h2>
			<div class="snavSpan">
				<img src="design/{$settings->theme}/images/sleft.png" alt="" width="9" height="15" class="prev" />
				<ul id="spages"></ul> <span>/</span> <span id="spagesAll"></span>
				<img src="design/{$settings->theme}/images/sright.png" alt="" width="9" height="15" class="next" />
			</div>
         </div>
      </article>

 

И вот мой код js 

 

function slidersize(sw,sh){

	$(".pList").width(sw);	
	$(".pList li").height(sh).width(sw);
	$("#slider li a").css({"line-height":sh+"px"});
	if (heightstep1<350){
		$(".pList").width(sw*3);
		$(".pList li").width(sw);
	};
};


Вот ссылка на сайт, если точнее на эту категорию http://gulart.ichudo.pro/catalog/mobilnye-telefony 
По стандартным ссылка на сайте открываются костыли.
 

post-18294-0-01804300-1505161092_thumb.png

Link to post
Share on other sites

 

Noxter, я сделал так

 {foreach $products as $product}
				
					{if $product@index%3==0}
					<ul class='pList'>
					  <li id="{$product->id}">
                        {if $product->image}<div style="background-image:url({$product->image->filename|resize:510:600})"></div>{/if}
                        <a href="products/{$product->url}">
                            <span class="pLink">
                            <small></small>
                            <strong>{$product->name|escape}</strong>
                            <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                            </span>
                        </a>
                    </li>
					{/if}
				  
                    <li id="{$product->id}">
                        {if $product->image}<div style="background-image:url({$product->image->filename|resize:510:600})"></div>{/if}
                        <a href="products/{$product->url}">
                            <span class="pLink">
                            <small></small>
                            <strong>{$product->name|escape}</strong>
                            <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                            </span>
                        </a>
                    </li>
				
					{if $product@iteration%3==0 || $product@last }
					   <li id="{$product->id}">
                        {if $product->image}<div style="background-image:url({$product->image->filename|resize:510:600})"></div>{/if}
                        <a href="products/{$product->url}">
                            <span class="pLink">
                            <small></small>
                            <strong>{$product->name|escape}</strong>
                            <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
                            </span>
                        </a>
                    </li>
					</ul>
					{/if}
					 
				{/foreach}

 

и по-сути, всё получилось, но товары начали задваиваться и выводится по 5 в div, можешь помочь пожалуйста? Вот ссылка http://gulart.ichudo.pro/catalog/mobilnye-telefony

Edited by Chudo
Link to post
Share on other sites

Решили проблему решением от Osben. 

 

{foreach $products as $product}
{if $product@first}
{* начало цикла, начинаем первый ряд *}
<ul class='pList'>
   {/if}
   <li id="{$product->id}">
      {if $product->image}
      <div style="background-image:url({$product->image->filename|resize:510:600})"></div>
      {/if}
      <a href="products/{$product->url}">
      <span class="pLink">
      <small></small>
      <strong>{$product->name|escape}</strong>
      <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
      </span>
      </a>
   </li>
   {if $product@iteration%3 == 0 || $product@last}
   {* закрываем ряд, при условии что item по счету кратный 4м или ето последний item*}
</ul>
{if !$product@last}
{* открываем новый ряд, при условии что наш item был не последния из всего списка *}
<ul class='pList'>
{/if}
{/if}
{/foreach}


Ещё раз огромное спасибо Gruzin-у и Noxter-у  :)  :)  :)

Edited by Chudo
Link to post
Share on other sites

Решили проблему решением от Osben. 

 

 

{foreach $products as $product}
{if $product@first}
{* начало цикла, начинаем первый ряд *}
<ul class='pList'>
   {/if}
   <li id="{$product->id}">
      {if $product->image}
      <div style="background-image:url({$product->image->filename|resize:510:600})"></div>
      {/if}
      <a href="products/{$product->url}">
      <span class="pLink">
      <small></small>
      <strong>{$product->name|escape}</strong>
      <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
      </span>
      </a>
   </li>
   {if $product@iteration%3 == 0 || $product@last}
   {* закрываем ряд, при условии что item по счету кратный 4м или ето последний item*}
</ul>
{if !$product@last}
{* открываем новый ряд, при условии что наш item был не последния из всего списка *}
<ul class='pList'>
{/if}
{/if}
{/foreach}

 

Ещё раз огромное спасибо Gruzin-у и Noxter-у  :)  :)  :)

Всегда пожалуйста. )))

Link to post
Share on other sites

Давно известно более легкое и элегантное решение от Чудилла без ужасного нагромождения If и с использованием преимуществ шаблона:

http://forum.simplacms.ru/topic/7523-%D0%B2%D1%8B%D0%B2%D0%BE%D0%B4-%D0%BD%D0%BE%D0%B2%D0%BE%D1%81%D1%82%D0%B5%D0%B9-%D0%B2-%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%B8/

 

В данном случае выглядит так:

{foreach array_chunk($products,4) as $prow}
<ul class='pList'>
{foreach $prow as $product}
   <li id="{$product->id}">
      {if $product->image}
      <div style="background-image:url({$product->image->filename|resize:510:600})"></div>
      {/if}
      <a href="products/{$product->url}">
      <span class="pLink">
      <small></small>
      <strong>{$product->name|escape}</strong>
      <span class="moreBtn">смотреть<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span></span>
      </span>
      </a>
   </li>
<ul class='pList'>
{/foreach}
</ul>
{/foreach}

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...