[SOLVED] Is it possible or howto define number of rows in Ditto?

147 Posts

e-stonia Reply #1, 16 years, 9 months ago

Hello,

I have ditto 2.1.0 @ Evolution 1.0.2 and I have products list so that there are 4 products per row. HTML looks like this:

<div class="products">
<div class="first_product"><img src="" /><br />Description</div>
<div class="product"><img src="" /><br />Description</div>
<div class="product"><img src="" /><br />Description</div>
<div class="product"><img src="" /><br />Description</div>
</div>
<div class="c"></div>
<div class="products">
<div class="first_product"><img src="" /><br />Description</div>
<div class="product"><img src="" /><br />Description</div>
<div class="product"><img src="" /><br />Description</div>
<div class="product"><img src="" /><br />Description</div>
</div>

I understand that I need probably to change the HTML and CSS so that it will look same with coding like this:

<ul class="products">
<li class="first_product"><img src="" /><br />Description</li>
<li class="product"><img src="" /><br />Description</li>
<li class="product"><img src="" /><br />Description</li>
<li class="product"><img src="" /><br />Description</li>
</ul>
<div class="c"></div>
<ul class="products">
<li class="first_product"><img src="" /><br />Description</li>
<li class="product"><img src="" /><br />Description</li>
<li class="product"><img src="" /><br />Description</li>
<li class="product"><img src="" /><br />Description</li>
</ul>

but I haven’t done it yet as I’m not sure if that helps and if it’s at all possible to do with Ditto.

With MaxiGallery it would be easy to define how mant pictures per row but didn’t find any instructions for Ditto.

Regards,

Kaspar

e-Stonia Web Agency - Freelance web design, ecommerce development and search engine marketing.

147 Posts

e-stonia Reply #2, 16 years, 9 months ago

Or is it somehow possible to do for example with PHx that ditto will work like this:

if "menu index 1" exists then display "<ul><li>item1</li>"
if "menu index 2" exists then display "<li>item2</li>" else "</ul>"
if "menu index 3" exists then display "<li>item3</li>" else "</ul>"
if "menu index 4" exists then display "<li>item4</li></ul>" else "</ul>"

if "menu index 5" exists then display "<ul><li>item5</li>"
if "menu index 2" exists then display "<li>item2</li>" else "</ul>"
if "menu index 3" exists then display "<li>item3</li>" else "</ul>"
if "menu index 4" exists then display "<li>item4</li></ul>" else "</ul>"

etc.

Or is the only way to hire someone and let to code snippet for that? I would be happy to pay someones time to do that.

e-Stonia Web Agency - Freelance web design, ecommerce development and search engine marketing.

2,314 Posts

anonymized-26931 Reply #3, 16 years, 9 months ago

you could do that with Ditto iteration -> http://modxcms.com/forums/index.php/topic,43348.msg258827.html#msg258827

147 Posts

e-stonia Reply #4, 16 years, 9 months ago

Thnak you! Moved discussion to that thread.

e-Stonia Web Agency - Freelance web design, ecommerce development and search engine marketing.

147 Posts

e-stonia Reply #5, 16 years, 9 months ago

Thanks guys! Worked it out now with your help without any need to change HTML. So, the solution for example to get 5 products listed so that there’s 3 products per row and first product in row with class="first":

<ul>
<li class="first">item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<ul>
<li class="first">item4</li>
<li>item5</li>
</ul>

First I added into template:

[[Ditto? &startID=`41` &orderBy=`ASC` &tpl=`category_ditto`]]
</ul>

Then I created chunk "category_ditto" with content:

[+ditto_iteration:isnot=`0`:and:math=`?%4`:eq=`0`:then=`</ul>`+]
[+ditto_iteration:math=`?%4`:eq=`0`:then=`<ul><li class="first">`:else=`<li>`+]
[+title+]</li>

e-Stonia Web Agency - Freelance web design, ecommerce development and search engine marketing.