Product Manager Summary Template with 3 Columns/Image

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
Post Reply
wmisk
Forum Members
Forum Members
Posts: 39
Joined: Tue Aug 02, 2011 5:00 am

Product Manager Summary Template with 3 Columns/Image

Post 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}
elkman
Power Poster
Power Poster
Posts: 262
Joined: Thu Jan 11, 2007 9:16 pm
Location: Colorado

Re: Product Manager Summary Template with 3 Columns/Image

Post 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
wmisk
Forum Members
Forum Members
Posts: 39
Joined: Tue Aug 02, 2011 5:00 am

Re: Product Manager Summary Template with 3 Columns/Image

Post 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
elkman
Power Poster
Power Poster
Posts: 262
Joined: Thu Jan 11, 2007 9:16 pm
Location: Colorado

Re: Product Manager Summary Template with 3 Columns/Image

Post by elkman »

That's great. Thanks for the view. Going to try this over the weekend.

Elkman
calguy1000
Support Guru
Support Guru
Posts: 8169
Joined: Tue Oct 19, 2004 6:44 pm
Location: Fernie British Columbia, Canada

Re: Product Manager Summary Template with 3 Columns/Image

Post 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>
Follow me on twitter
Please post system information from "Extensions >> System Information" (there is a bbcode option) on all posts asking for assistance.
--------------------
If you can't bother explaining your problem well, you shouldn't expect much in the way of assistance.
wmisk
Forum Members
Forum Members
Posts: 39
Joined: Tue Aug 02, 2011 5:00 am

Re: Product Manager Summary Template with 3 Columns/Image

Post 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!
Post Reply

Return to “Tips and Tricks”