Chudo Опубликовано 10 сентября, 2017 Жалоба Поделиться Опубликовано 10 сентября, 2017 Создал страничку с товарами, но, адаптивности ради расположил по 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> Цитата Ссылка на сообщение Поделиться на другие сайты
koteyka Опубликовано 10 сентября, 2017 Жалоба Поделиться Опубликовано 10 сентября, 2017 (изменено) Вы кардинально не верно подошли к задачеforeach, в котором у вас идет выборка товаров - это цикл. Если задано 12 товаров, то он выполнит 12 циклов и выведет 12 товаров, но все они должны попадать в один див, который выведется 12 раз. А вот располагать эти дивы на странице нужно уже стилями.Вы же выводите 12 дивов.Бред.И при чем тут вообще слайдер к товарам? Изменено 10 сентября, 2017 пользователем koteyka Цитата Ссылка на сообщение Поделиться на другие сайты
shooroop Опубликовано 10 сентября, 2017 Жалоба Поделиться Опубликовано 10 сентября, 2017 <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 Цитата Ссылка на сообщение Поделиться на другие сайты
koteyka Опубликовано 10 сентября, 2017 Жалоба Поделиться Опубликовано 10 сентября, 2017 я не уверен что он использует цикл , там скорее всего чистый htmlА как он товары туда тогда заносит из $products? Цитата Ссылка на сообщение Поделиться на другие сайты
Gruzin Опубликовано 10 сентября, 2017 Жалоба Поделиться Опубликовано 10 сентября, 2017 (изменено) Создал страничку с товарами, но, адаптивности ради расположил по 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 Изменено 10 сентября, 2017 пользователем Gruzin Цитата Ссылка на сообщение Поделиться на другие сайты
shooroop Опубликовано 10 сентября, 2017 Жалоба Поделиться Опубликовано 10 сентября, 2017 А как он товары туда тогда заносит из $products? вручную тк в выложеном куске есть <div style="background-image:url(design/{$settings->theme}/images/products/corporate/dornandjbl.jpg)"></div> если это был html был бы путь с названием папки, а так это код из tpl Цитата Ссылка на сообщение Поделиться на другие сайты
Gruzin Опубликовано 10 сентября, 2017 Жалоба Поделиться Опубликовано 10 сентября, 2017 вручную тк в выложеном куске есть <div style="background-image:url(design/{$settings->theme}/images/products/corporate/dornandjbl.jpg)"></div> если это был html был бы путь с названием папки, а так это код из tplЯ видел его файл, там нет цикла, продукты выводятся статически. Цитата Ссылка на сообщение Поделиться на другие сайты
shooroop Опубликовано 10 сентября, 2017 Жалоба Поделиться Опубликовано 10 сентября, 2017 Я видел его файл, там нет цикла, продукты выводятся статически. кэп, я это еще по первому посту понял ) Цитата Ссылка на сообщение Поделиться на другие сайты
Gruzin Опубликовано 10 сентября, 2017 Жалоба Поделиться Опубликовано 10 сентября, 2017 кэп, я это еще по первому посту понял )Просто тут прозвучали сомнения так я решил внести ясность. Цитата Ссылка на сообщение Поделиться на другие сайты
Chudo Опубликовано 11 сентября, 2017 Автор Жалоба Поделиться Опубликовано 11 сентября, 2017 С помощью 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 По стандартным ссылка на сайте открываются костыли. Цитата Ссылка на сообщение Поделиться на другие сайты
Noxter Опубликовано 11 сентября, 2017 Жалоба Поделиться Опубликовано 11 сентября, 2017 http://forum.simplacms.ru/topic/8740-каждые-3-товара-в-div-e/ Цитата Ссылка на сообщение Поделиться на другие сайты
Chudo Опубликовано 11 сентября, 2017 Автор Жалоба Поделиться Опубликовано 11 сентября, 2017 http://forum.simplacms.ru/topic/8740-каждые-3-товара-в-div-e/ Спасибо, буду пробовать) Цитата Ссылка на сообщение Поделиться на другие сайты
Chudo Опубликовано 11 сентября, 2017 Автор Жалоба Поделиться Опубликовано 11 сентября, 2017 (изменено) http://forum.simplacms.ru/topic/8740-каждые-3-товара-в-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.pro/catalog/mobilnye-telefony Изменено 11 сентября, 2017 пользователем Chudo Цитата Ссылка на сообщение Поделиться на другие сайты
Chudo Опубликовано 11 сентября, 2017 Автор Жалоба Поделиться Опубликовано 11 сентября, 2017 (изменено) Решили проблему решением от 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-у Изменено 11 сентября, 2017 пользователем Chudo Цитата Ссылка на сообщение Поделиться на другие сайты
Gruzin Опубликовано 12 сентября, 2017 Жалоба Поделиться Опубликовано 12 сентября, 2017 Решили проблему решением от 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-у Всегда пожалуйста. ))) Цитата Ссылка на сообщение Поделиться на другие сайты
loxter Опубликовано 12 сентября, 2017 Жалоба Поделиться Опубликовано 12 сентября, 2017 Давно известно более легкое и элегантное решение от Чудилла без ужасного нагромождения 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} Цитата Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.