Page 1 of 1

Product Manager Summary Template with 3 Columns/Image

Posted: Fri Oct 19, 2012 3:57 am
by wmisk
I have a client with an e-commerce site and he wanted to show 3 columns of products for a category display-each product with an image- that would then click through to the details page. I used this topic: http://forum.cmsmadesimple.org/viewtopi ... =7&t=63495 to add an image to each product (as a default image, not within the details editor), then googled smarty syntax and came up with this template:

Code: Select all

{assign var='number' value=1}
{foreach from=$items item=entry}
{if isset($entry->categories)}
{foreach from=$entry->categories item='category'}
{if $number == 1}
<h3>{$category->name}</h3>
{/if}
{assign var='number' value=2}
{/foreach}
{/if}
{/foreach}

{foreach from=$items item=entry key=key}
   {*
     the summary template has access to custom fields via the $entry->fields hash
     and to categories via the $entry->categories array of objects.  Also
     attribute information is available via $entry->attributes.
     you should use the get_template_vars and the print_r modifier to see
     what is available
    *}
 
{capture name="column"}{math equation="x % 3" x=$key}{/capture}
{if $smarty.capture.column == "0"}
<table border="0" cellpadding="0" cellspacing="0" width="100%">
	<tr>
		<td width="33%" align="center" valign="middle">
		  {foreach from=$entry->fields key='name' item='field'}
       {if $field->type == 'image' && isset($field->thumbnail)}
        <a href="{$entry->detail_url}"><img src="{$entry->file_location}/{$field->thumbnail}" alt="{$field->value}" border="0"/></a>
       {/if}
  {/foreach}

    <br />

<a href="{$entry->detail_url}">{$entry->product_name}</a>

</br />

Price: {$currency_symbol}{$entry->price|number_format:2}

  {* include the cart   *}
  {if isset($cart_module_tag)}
 
  {eval var=$cart_module_tag}
 
  {/if}

		</td>
{elseif  $smarty.capture.column == "1"}
		<td width="33%" align="center" valign="middle">
		  {foreach from=$entry->fields key='name' item='field'}
       {if $field->type == 'image' && isset($field->thumbnail)}
        <a href="{$entry->detail_url}"><img src="{$entry->file_location}/{$field->thumbnail}" alt="{$field->value}" border="0"/></a>
       {/if}
  {/foreach}

    <br />

<a href="{$entry->detail_url}">{$entry->product_name}</a>

</br />

Price: {$currency_symbol}{$entry->price|number_format:2}
   
   {* include the cart   *}
  {if isset($cart_module_tag)}
 
  {eval var=$cart_module_tag}
 

  {/if}

		</td>
{elseif $smarty.capture.column == "2"}
		<td width="33%" align="center" valign="middle">
		  {foreach from=$entry->fields key='name' item='field'}
       {if $field->type == 'image' && isset($field->thumbnail)}
        <a href="{$entry->detail_url}"><img src="{$entry->file_location}/{$field->thumbnail}" alt="{$field->value}" border="0"/></a>
       {/if}
  {/foreach}


    <br />

<a href="{$entry->detail_url}">{$entry->product_name}</a>

</br />

Price: {$currency_symbol}{$entry->price|number_format:2}
 
  {* include the cart   *}
  {if isset($cart_module_tag)}
 
  {eval var=$cart_module_tag}
 

  {/if}

		</td>
	</tr>
<tr colspan="3" height="20"></tr>
</table>
{/if}

{/foreach}

{if $smarty.capture.column != 2}
<!-- Close the table! -->
</tr></table>
{/if}

Re: Product Manager Summary Template with 3 Columns/Image

Posted: Sat Oct 20, 2012 4:02 pm
by elkman
This appears to be a great idea. Is there any way to view this or could you add a screenshot of how this appears?

Thanks,
Elkman

Re: Product Manager Summary Template with 3 Columns/Image

Posted: Sat Oct 20, 2012 4:25 pm
by wmisk
Sure, it's on this test page right now:

http://wmwebdesigns.com/preparedness_zo ... products-1

Once the site is ready it will be moved, to a permanent URL, so I'm also including a screenshot if the above link doesn't work.
Screenshot
Screenshot

Re: Product Manager Summary Template with 3 Columns/Image

Posted: Sat Oct 20, 2012 5:17 pm
by elkman
That's great. Thanks for the view. Going to try this over the weekend.

Elkman

Re: Product Manager Summary Template with 3 Columns/Image

Posted: Sat Oct 20, 2012 6:05 pm
by calguy1000
This is actually very simple with regular html, and css. The default uploads module has a template that does this.
Inline styling done just for example purposes.

Code: Select all

<div>
  {foreach from=$items item='entry'}
  <div style="float: left; width: 32%;">
      {* the rest of the template stuff here *}
  </div>
  {/foreach}
  <div style="clear: both;">
</div>

Re: Product Manager Summary Template with 3 Columns/Image

Posted: Sat Oct 20, 2012 9:46 pm
by wmisk
I haven't used the uploads module before-does it have to be installed in order for that template to work? That is a much simpler, less code-heavy way of accomplishing it and I'd like to use it. Thanks so much CalGuy!