Products Lineup

Monday 02 January 2006 3:42:12 pm

Hi,
the best way to solve your problem is learn some html+css.

but very simple soltion are:

1. using table

{def $items=fetch( ... )}
<table>
<tr>
{foreach $items as $item}
    <td>
    {node_view_gui view=line content_node=$item}
    </td>
    {delimiter modulo=2}
    </tr><tr>
    {/delimiter}
{/foreach}
</tr>
</table>

2. using div's

<style>
div.left { float: left; width: 200px; }
div.clear { clear: both; }
</style>

{def $items=fetch( ... )}
{foreach $items as $item}
    <div class="left">
    {node_view_gui view=line content_node=$item}
    </div>
    {delimiter modulo=2}
    <div class="clear"></div>
    {/delimiter}
{/foreach}

regards
Konrad

Tuesday 03 January 2006 3:46:08 am

Hi John,

I'm sorry we did not have capacity to respond your question on email yesterday (within 24 hours), but I don't think we deserve how you speak of us in these forums cause of that!
We are partner with eZ systems and all of us here in VZT contribute to the community on a regular basis.

I will not put all the code we used for the MediaBase view cause it is quite complex, but I'll try to show you how to do this quite easy.

<b>First of all</b> you'll need a fetch of some kind, then the following code will display the result:

<b>Whith CSS (preferred):</b>

<div id="thumbnailContainer">
{section var=file loop=$files}

			<div class="tnMediaFrame">
				<a href={$file.url_alias|ezurl} class="image">
					{attribute_view_gui attribute=$file.object.data_map.image}
				</a>
				<p class="tnMediaTittel">{$file.object.data_map.name.content|shorten(20)}</p>
			</div>

{/section}
</div>
 

In the CSS you'll have to float the tnMediaFrame left within the thumbnailContainer, and set a width to the tnMediaFrame so as many items you want at one line will fit.

Example: If the width of thumbnailContainer is 600px, then the width of tnMediaFrame need to be 200px to be able to float three items on each line.

Example with CSS: http://mediabase.no/index.php/demo_download/documents

<b>With Tables:</b>

<table class="shop">
	<tr>
	{section var=child loop=$list_items sequence=array(bglight,bgdark)}
		<td valign="top">
			{node_view_gui view=line content_node=$child}
		</td>
		{delimiter modulo=2}
		</tr>
		<tr>
		{/delimiter}
	{/section}
	</tr>
</table>
 

Example with tables: http://www.kennelascari.no/index.php/ascari/web_shop/hundebur

www.VZT.no ( http://www.VZT.no )
VZT References ( http://http://vzt.no/index.php/vzt_eng/referanser )
VZT Extensions ( http://vzt.no/index.php/vzt_eng/extensions )
www.MediaBase.no ( http://www.MediaBase.no )

Wednesday 04 January 2006 1:53:48 am

You can use this code to display the loop of the line view from a fetch.

Example:

http://kennelascari.no/index.php/ascari/web_shop/hundebur

Here is "Hundebur" a default folder where "show children" is marked.

Then all the products are showed with the line view of the product.tpl, with this code:

<table class="shop">
	<tr>
	{section var=child loop=$list_items sequence=array(bglight,bgdark)}
		<td valign="top">
			{node_view_gui view=line content_node=$child}
		</td>
		{delimiter modulo=2}
		</tr>
		<tr>
		{/delimiter}
	{/section}
	</tr>
</table>

Within product.tpl the code looks like this:

{* Product - Line view *}

<div class="content-view-line">
    <div class="class-product-line">

        <h2>
			{section show=$node.object.data_map.image.content}
				<div class="content-image">
					<a href={$node.url_alias|ezurl}>{attribute_view_gui alignment=right image_class=small attribute=$node.object.data_map.image.content.data_map.image}</a>
				</div>
			{/section}			
			<a href={$node.url_alias|ezurl}>{$node.name|wash()}</a>
		</h2>

        <div class="attribute-short">
           {attribute_view_gui attribute=$node.object.data_map.short_description}
        </div>

        <div class="attribute-price">
         <p>
           {attribute_view_gui attribute=$node.object.data_map.price}
         </p>
        </div>

        <div class="attribute-link">
           <p>
            <a href={$node.url_alias|ezurl}>{"More information"|i18n("design/base")}</a>
           </p>
        </div>
   </div>
</div>

And this is styled through CSS.

www.VZT.no ( http://www.VZT.no )
VZT References ( http://http://vzt.no/index.php/vzt_eng/referanser )
VZT Extensions ( http://vzt.no/index.php/vzt_eng/extensions )
www.MediaBase.no ( http://www.MediaBase.no )

Wednesday 04 January 2006 4:05:09 am

If you, like we did for Ascari used a folder and a fetch for the children of this, then put this in folder.tpl (full).

I used this code:

{* Folder - Full view *}
<div class="content-view-full">
    <div class="class-folder">

        <h1>{$node.object.data_map.name.content|wash()}</h1>

        {section show=$node.object.data_map.short_description.content.is_empty|not}
            <div class="attribute-short">
                {attribute_view_gui attribute=$node.object.data_map.short_description}
            </div>
        {/section}

        {section show=$node.object.data_map.description.content.is_empty|not}
            <div class="attribute-long">
                {attribute_view_gui attribute=$node.object.data_map.description}
            </div>
        {/section}

        {section show=is_unset( $versionview_mode )}
        {section show=$node.object.data_map.show_children.content}
            {let page_limit=10
                 list_items=array()
                 list_count=0}

            {section show=or( $view_parameters.day, $view_parameters.month, $view_parameters.year )}
                {let time_filter=array( and,
                                        array( 'published', '>=',
                                               maketime( 0, 0, 0,
                                                         $view_parameters.month, cond( $view_parameters.day, $view_parameters.day, 1 ), $view_parameters.year ) ),
                                        array( 'published', '<=',
                                               maketime( 23, 59, 59,
                                                         cond( $view_parameters.day, $view_parameters.month, $view_parameters.month|inc ), cond( $view_parameters.day, $view_parameters.day, 0 ), $view_parameters.year ) ) )}
                {set list_items=fetch_alias( children, hash( parent_node_id, $node.node_id,
                                                             offset, $view_parameters.offset,
                                                             attribute_filter, $time_filter,
                                                             sort_by, $node.sort_array,
                                                             limit, $page_limit ) )
                     list_count=fetch_alias( children_count, hash( parent_node_id, $node.node_id ) )}
                {/let}
            {section-else}
                {set list_items=fetch_alias( children, hash( parent_node_id, $node.node_id,
                                                             offset, $view_parameters.offset,
                                                             sort_by, $node.sort_array,
                                                             limit, $page_limit ) )}
                {set list_count=fetch_alias( children_count, hash( parent_node_id, $node.node_id ) )}
            {/section}


			{switch match=$node.parent_node_id}
			
				{case match='910'}

				<table class="shop">
				   <tr>
				   {section var=child loop=$list_items sequence=array(bglight,bgdark)}
					   <td valign="top">
						  {node_view_gui view=line content_node=$child}
					   </td>
					   {delimiter modulo=2}
					   </tr>
					   <tr>
					   {/delimiter}
				   {/section}
				   </tr>
				</table>

				{/case}
				
				{case} 
				<div class="content-view-children">
					{section var=child loop=$list_items sequence=array(bglight,bgdark)}
						{node_view_gui view=line content_node=$child}					
					{/section}
				</div>
				{/case}
			
			{/switch}


            {include name=navigator
                     uri='design:navigator/google.tpl'
                     page_uri=$node.url_alias
                     item_count=$list_count
                     view_parameters=$view_parameters
                     item_limit=$page_limit}
            {/let}

        {/section}
        {/section}

    </div>
</div>

Where 910 is the id of the parent folder of the shop (based on the structure this customer want for the shop).

www.VZT.no ( http://www.VZT.no )
VZT References ( http://http://vzt.no/index.php/vzt_eng/referanser )
VZT Extensions ( http://vzt.no/index.php/vzt_eng/extensions )
www.MediaBase.no ( http://www.MediaBase.no )

Thursday 05 January 2006 1:57:38 am

If you look at the code above you'll see that code right after {case match='910'}.

This code is for the folder.tpl and display of the children of that folder (example: line view of products.tpl).

www.VZT.no ( http://www.VZT.no )
VZT References ( http://http://vzt.no/index.php/vzt_eng/referanser )
VZT Extensions ( http://vzt.no/index.php/vzt_eng/extensions )
www.MediaBase.no ( http://www.MediaBase.no )

Thursday 05 January 2006 4:12:40 am

Yes, I posted the exact code from the full/folder.tpl.

I can look at your specific code if you want?

You can send me an e-mail again og contact me through Skype.
(You have my details for Skype on the signature of the e-mail you recieved from me.)

www.VZT.no ( http://www.VZT.no )
VZT References ( http://http://vzt.no/index.php/vzt_eng/referanser )
VZT Extensions ( http://vzt.no/index.php/vzt_eng/extensions )
www.MediaBase.no ( http://www.MediaBase.no )

Thursday 05 January 2006 4:40:16 am

No problem!

(Not Sir but Miss... :) )

www.VZT.no ( http://www.VZT.no )
VZT References ( http://http://vzt.no/index.php/vzt_eng/referanser )
VZT Extensions ( http://vzt.no/index.php/vzt_eng/extensions )
www.MediaBase.no ( http://www.MediaBase.no )