Forums / Setup & design / Products Lineup

Products Lineup

Author Message

john polo

Monday 02 January 2006 1:06:07 pm

Hello all,

this is my third topic about this issue. I was told that i needed to open a topic again.

Here is the question;

I want to line my products so that i would put two products in the same row but i cannot do it. I have been working on it for weeks but no help. I finally found a site that uses this system

http://mediabase.no/index.php/demo_download/documents

I emailed the site designer (vzt.no) but he hasnt answered a bit while he gets help on here himself. Its a shame, we all need help in here and we all been there once otherwise there is no point of having this forum.

Thank you all in advance

Konrad Mazurkiewicz

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

john polo

Monday 02 January 2006 5:43:25 pm

First of all, i thank you for your response,

original line/product.tpl goes as follows

{$node.name|wash()}

{section show=$node.object.data_map.image.content} {attribute_view_gui alignment=right image_class=small attribute=$node.object.data_map.image.content.data_map.image} 

{/section} {attribute_view_gui attribute=$node.object.data_map.short_description} 

{attribute_view_gui attribute=$node.object.data_map.price} 

{"More information"|i18n("design/base")} 

I tired DIV before and didnt work for me..i guess im doing something wrong..i just dont know where to insert what in it..

Siw Helen Thorslund

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 )

john polo

Tuesday 03 January 2006 10:07:37 am

I am sorry i didnt wanna be rude or anything. Since we help each other here, i jut needed help once in all months and i got nothing..i was frustrated thats all..

About the code;

this is for product.tpl ?

Siw Helen Thorslund

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 )

john polo

Wednesday 04 January 2006 3:17:36 am

Sorry about being dumb, i did what u suggested me then again it shows it in one row..

where will i put the following 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>

Siw Helen Thorslund

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 )

john polo

Wednesday 04 January 2006 11:00:20 am

Hello Sir,

Sorry for sounding dumb but i put the folder.tpl in full even in line folder by changing the node id number it didnt do any good..its the same... i wonder if i do something wrong..

Also i want to know where i put the code below ?


<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>

Siw Helen Thorslund

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 )

john polo

Thursday 05 January 2006 3:33:47 am

Sir are u sure this goes to full/folder.tpl cuz it reads everything from CSS but no change on the line up

Siw Helen Thorslund

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 )

john polo

Thursday 05 January 2006 4:29:09 am

I got it !..... Thank you so much sir for your time !!!

Siw Helen Thorslund

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 )