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


Фото
- - - - -

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


  • Чтобы отвечать, сперва войдите на форум
15 ответов в теме

#1 Chudo

Chudo
  • Пользователь
  • 59 сообщений
  • Откуда:Саратов

Опубликовано 10.09.2017 - 16:31

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

 

Прикрепленные файлы:



#2 koteyka

koteyka

    Фрилансер

  • Пользователь
  • 1 334 сообщений
  • Программирование
  • Версия CMS:2.x
  • Откуда:Днепропетровск

Опубликовано 10.09.2017 - 17:30

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

Бред.

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


Изменено: koteyka, 10.09.2017 - 17:32


#3 shooroop

shooroop
  • Фрилансер
  • 445 сообщений
  • Дизайн, Верстка
  • Версия CMS:2.x

Опубликовано 10.09.2017 - 18:38

  <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



#4 koteyka

koteyka

    Фрилансер

  • Пользователь
  • 1 334 сообщений
  • Программирование
  • Версия CMS:2.x
  • Откуда:Днепропетровск

Опубликовано 10.09.2017 - 19:11

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

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



#5 Gruzin

Gruzin
  • Пользователь
  • 166 сообщений
  • Верстка, Пользователь
  • Версия CMS:2.x
  • Откуда:Минск

Опубликовано 10.09.2017 - 19:32

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


#6 shooroop

shooroop
  • Фрилансер
  • 445 сообщений
  • Дизайн, Верстка
  • Версия CMS:2.x

Опубликовано 10.09.2017 - 20:46

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

 

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

 

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



#7 Gruzin

Gruzin
  • Пользователь
  • 166 сообщений
  • Верстка, Пользователь
  • Версия CMS:2.x
  • Откуда:Минск

Опубликовано 10.09.2017 - 21:34

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

 

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

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



#8 shooroop

shooroop
  • Фрилансер
  • 445 сообщений
  • Дизайн, Верстка
  • Версия CMS:2.x

Опубликовано 10.09.2017 - 21:37

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

 

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



#9 Gruzin

Gruzin
  • Пользователь
  • 166 сообщений
  • Верстка, Пользователь
  • Версия CMS:2.x
  • Откуда:Минск

Опубликовано 10.09.2017 - 21:46

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

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



#10 Chudo

Chudo
  • Пользователь
  • 59 сообщений
  • Откуда:Саратов

Опубликовано 11.09.2017 - 23:26

С помощью 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...ilnye-telefony
По стандартным ссылка на сайте открываются костыли.
 

Прикрепленные файлы:

  • Прикрепленный файл  1.png   410К   3 раз скачано


#11 Noxter

Noxter

    Simpla Developer

  • Фрилансер
  • 5 680 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Киев

Опубликовано 11.09.2017 - 23:32

http://forum.simplac...товара-в-div-e/

#12 Chudo

Chudo
  • Пользователь
  • 59 сообщений
  • Откуда:Саратов

Опубликовано 11.09.2017 - 23:42

http://forum.simplac...товара-в-div-e/


Спасибо, буду пробовать)



#13 Chudo

Chudo
  • Пользователь
  • 59 сообщений
  • Откуда:Саратов

Опубликовано 12.09.2017 - 00:07

http://forum.simplac...товара-в-div-e/


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...bilnye-telefony


Изменено: Chudo, 12.09.2017 - 00:07


#14 Chudo

Chudo
  • Пользователь
  • 59 сообщений
  • Откуда:Саратов

Опубликовано 12.09.2017 - 00:33

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


#15 Gruzin

Gruzin
  • Пользователь
  • 166 сообщений
  • Верстка, Пользователь
  • Версия CMS:2.x
  • Откуда:Минск

Опубликовано 12.09.2017 - 07:35

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

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



#16 loxter

loxter
  • Пользователь
  • 100 сообщений
  • Дизайн
  • Откуда:paris

Опубликовано 12.09.2017 - 09:30

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

http://forum.simplac...остей-в-списки/

 

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

{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}






0 пользователей читают эту тему

0 пользователей, 0 гостей, 0 скрытых