Перейти к содержанию
Официальный форум поддержки Simpla

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


Рекомендуемые сообщения

Создал страничку с товарами, но, адаптивности ради расположил по 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

Ссылка на сообщение
Поделиться на другие сайты

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

Бред.

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

Изменено пользователем koteyka
Ссылка на сообщение
Поделиться на другие сайты

  <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

Ссылка на сообщение
Поделиться на другие сайты

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

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

Ссылка на сообщение
Поделиться на другие сайты

 

Создал страничку с товарами, но, адаптивности ради расположил по 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

Изменено пользователем Gruzin
Ссылка на сообщение
Поделиться на другие сайты

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

 

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

 

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

Ссылка на сообщение
Поделиться на другие сайты

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

 

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

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

Ссылка на сообщение
Поделиться на другие сайты

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

 

кэп, я это еще по первому посту понял )

Ссылка на сообщение
Поделиться на другие сайты

кэп, я это еще по первому посту понял )

Просто тут прозвучали сомнения так я решил внести ясность.

Ссылка на сообщение
Поделиться на другие сайты

С помощью 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

Ссылка на сообщение
Поделиться на другие сайты

 

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

Изменено пользователем Chudo
Ссылка на сообщение
Поделиться на другие сайты

Решили проблему решением от 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-у  :)  :)  :)

Изменено пользователем Chudo
Ссылка на сообщение
Поделиться на другие сайты

Решили проблему решением от 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-у  :)  :)  :)

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

Ссылка на сообщение
Поделиться на другие сайты

Давно известно более легкое и элегантное решение от Чудилла без ужасного нагромождения 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}

Ссылка на сообщение
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
×
×
  • Создать...