We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 24739
    • 7 Posts
    Dear friends,

    I’m making product catalog, and trying to show Ditto results in 2 columns.
    But now i can make only one column when i do like this:

    My TV:
    <div id="productCatalog">
    <table width="100%" border="0" cellpadding="2" cellspacing="2">
    <tr>
    [[MaxiGallery? &gal_query_ids=`[+id+]` &galleryPictureTpl=`productCatalogImage` &max_thumb_size=`100` &limit=`1`]]
    <td width="100%" valign="top"><b><a href="[~[+id+]~]">[+pagetitle+]</a></b><br>[+product_description+]</td>
    </tr>
    </table>
    </div>


    My Request:
    [!Ditto? &depth=`1` &summarize=`10` &paginate=`1` &tpl=`productCatalogTpl`!] 


    I get this image: http://modxcms.com/forums/index.php?action=dlattach;topic=16113.0;attach=5380

    And whant to get this:
    http://modxcms.com/forums/index.php?action=dlattach;topic=16113.0;attach=5382

    How to make it with Ditto + TV huh
      • 10449
      • 956 Posts
      I’d use inline DIVs inside a big container DIV, instead of a table.
      In one of your templates, you’d have something like:

      <div class="inlinebox">...content here...</div>

      in your CSS:
      .inlinebox {display: inline;}
        • 19257
        • 141 Posts
        I’ve been trying to get ditto to display products in 3 columns using a table. I have no idea how to do that! I even tried for two columns by doing this:
        <div class="inlinebox">...content here...</div>
        
        in your CSS:
        .inlinebox {display: inline;}


        But its still doesnt come out in 2 columns.

        Do I have to edit the Ditto snippet itself or can I just somehow make it display 3 columns with a chunk?

        It’s been days of trying to come up with this.. I’m pretty stumped. huh

        Any help would be appreciated. Thanks!
          • 4310
          • 2,310 Posts
          Please see here.
            • 4749
            • 623 Posts
            bunk58 recommends a very good idea, one that I agree with. There is a slightly different way that should work too.  Just use your &tpl as a div and float everything left. It will fill up the space automatically. If you can, define a width and height, that way it will have the feel of the table without all the messy code. For example:

            &tpl would be this:
            <div class="product_box">[*productInfo*]</div>


            Make sure you have a container div:
            <div id="product_container">DITTO CALL HERE</div>


            And you’ll need the css to make it work:
            #product_container {
                  background: #fff;
                  width: 600px;
            }
            
            .product_box {
                  float: left;
                  height: 100px;
                  width: 200px;
            }
            


            This way when three products get returned by the ditto call it’ll fill up a row and it’ll keep filling up that way until there are no more products. You’ll obviously have to mess with the CSS, but it should work.
              The MODx has you...
              Utah Web Design
              • 364
              • 32 Posts
              Thanks, that helped so much in doing the same thing.