From MODx Wiki

Instructions

• Download and install eForm if you haven't
• Download and Install FDM
• Create two TV (or more): price and category and allow them for the template you use.
• Create a chunk product this chunk alow to modify all product in one time. It figure how your product is displayed. I use 2 TV category and price and a MaxiGallery call for the product's images.

The product chunk

<table class="encadre" summary="Info about [*longtitle*]"><caption>Product info</caption><tr>
  <thead><th>[*pagetitle*]</th><tr></thead>
<tbody>
 <tr><th>N°[*id*]</th></tr>
 <tr><td><strong>Short description:</strong>[*longtitle*]</td></tr>
 <tr><td><strong>Category:</strong>[*category*]</td></tr>
 <tr><td><strong>Description:</strong>[*description*]</td></tr>
 <tr><td><strong>Price:</strong>[*price*]</td></tr>
</tbody>
<tfoot><tr><td class="centre">[!FDM? &eform_tpl=`fdmEformProduct`!]</td></tr> </tfoot>
</table>
[!MaxiGallery?  &display=`embedded` &embedtype=`lightboxv2` &pics_per_row=`3`&pic_use_dropshadow=`1` !]
<div class="center" style="clear:both;">
<a href="[~[*parent*]~]" title="List all products">List of all products.</a></div>

• Create a chunk fdmEformProduct this chunk is an eForm template and is used to edit your product and allow fields validations.

The fdmEformProduct chunk

[+validationmessage+]
<form method="post" action="[~[*id*]~]"  id="fdmForm">
<fieldset>
	<legend>Procduct fields</legend>
	<input type="hidden" name="formid" value="fdmForm" />
	<p><label for="pagetitle">Name</label><input name="pagetitle" id ="pagetitle" value="[+pagetitle+]" type="text" eform="Product's name:string:1" /></p>
	<p><label for="longtitle">Short description</label><input name="longtitle" id ="longtitle" value="[+longtitle+]" type="text"  /></p>
	<p><label for="tvcategory">Category</label><input name="tvcategory" id ="tvcategory" value="[+tvcategory+]" type="text"  /></p>
	<p><label for="tvprice">Price</label><input name="tvprice" id ="tvprice" value="[+tvprice+]" type="text"  /></p> 
	<p><label for="description">Description</label><br /><textarea name="description" id="description" rows="5" cols="50"  eform="Du texte:html:1">[+description+]</textarea></p>
</fieldset>
<p>
<input name="fdmsubmit" value="Enregistrer" type="submit" />  
</p>
</form>

• Create a model document for your product, name it ModelProducts. Set all the field to the default value you want, this is the model which is used to create every new products page. Fill the content with (remove backslash):

\{\{product\}\}

Set it to not cached and remember its id.

• Create a chunk tpl_list_product to display the list of your products with Ditto.

The tpl_list_product chunk

<tbody>
 <tr> <th>N°[+id+] </th><th><a href="[(site_url)][~[+id+]~]" title="Show [+pagetitle+]">[+pagetitle+]</a>
[[FDM? &id=`[+id+]` &eform_tpl=`fdmEformProduct`]]</th></tr>
 <tr><td rowspan="3">[[MaxiGallery? &gal_query_ids=`[+id+]` &limit=`1`]]</td>
 <td>[+longtitle+]</td></tr>
 <tr><td>Category:[+tvcategory+]</td></tr>
<tr><td>Price: [+tvprice+]</td></tr>
</tbody>

• Create a folder document for your product, name it Products fill it with:

<p>Add a product : [!FDM? &model=`'''your_product_model_page_id_you_have_created_just_before'''` &parent=`[*id*]` &disableedit=`1` &disabledelete=`1` &disableunpublish=`1` &disablepublish=`1` &eform_tpl=`fdmEformProduct`!]</p>
 
 
<table class="encadre" summary="List of products">
<caption>Ours products</caption>
<thead><tr> <th colspan="2">Find [+aa_total+] products.</th><tr></thead>
 
[!Ditto?  &parents=`[*id*]` &id=`aa` &extenders=`summary` &tpl=`tpl_list_product` &paginate=`1`  &summarize=`2`  &truncLen=`180` &truncText=` Lire >>`!]
 
<tfoot><tr><td colspan="2" >Page [+aa_currentPage+] / [+aa_totalPages+]</td></tr></tfoot>
</table>
<div id="nombrearticle">
<div class="centre">[+aa_previous+] [+aa_pages+] [+aa_next+]</div>
<br />
<p>Products <strong>[+aa_start+]</strong> to <strong>[+aa_stop+]</strong> on <strong>[+aa_total+]</strong>

And Go to your Product page.