(Non shopping cart site) displaying products

[pwusr]

Hi,

I have to do a website where I have to display 4-5 categories of products with a title, description, picture and price. (No cart or payment involved).

There should be (admin) provision to add/edit these products in the backend.

For each category there will be some articles (like a blog) and option to add them (in the backend)

Please let me know how easy it would be to do this with Processwire.

Thanks a lot in advance for your kind help.

[teppo]

Hello there and welcome to the forum!

This sounds mostly trivial. You can do most of that with simple ProcessWire templates - one for categories, another for products and third for articles. Depending on your needs (how you want them to show up and how many of them there will really be) products could be actual templates or just repeater items on category template.

I wouldn't suggest using repeaters if you're going to need separate pages for each item or there are going to be a lot of them, but for something like ~10 items on each category where only place their info is shown is that category page they would be an easy solution.

Articles could be slightly more complicated, again depending on your needs: you said they should work like a blog, which would suggest that they require comments also. For that purpose there's a built-in comments module though, so that shouldn't be too difficult either.

About those admin features you've mentioned, I'd suggest that this content should be added and edited as regular ProcessWire pages. You could always add custom admin panel, but that doesn't really make much sense in most cases. Not to mention that it's a lot of work, the result of which rarely exceeds that what ProcessWire already has to offer

[pwusr]

Thank you very much @teppo for your quick and comprehensive reply.

Hope you mean that I wouldn't be required to write any custom modules for the above tasks.

Now comes the difficult part - I have been creating websites with html/css and some javascript for some time now. Will I be able to learn processwire fairly quickly, to do the tasks above (I have only basic knowledge in PHP).

I am enthusiastic about pw after reading lots of nice comments everywhere.

Please also tell me

(a)how easy would be theming

(b)for laymen who would ultimately be adding/editing products and articles.

Sorry for the long post.

Again thanks a million for your help.

[apeisa]

This will be super easy. Just follow the basic tutorial with planets, read docs on this site and ask whenever you get stuck. I would link the tutorial, but I am in mobile.

[Pete]

It should be a matter of a few hours once you've had a look at the tutorials by the sounds of it. The good thing about ProcessWire is that once you get things set up each template will be super easy for editors to add pages to.

[pwusr]

Thanks a lot @apeisa & @Pete. Happy that I took the right step coming to Processwire.

[pwusr]

Can anyone please point me to the Quick Start Tutorial.. (that page appears empty)

Thank you.

[Pete]

This would be the tutorial apeisa was talking about: http://processwire.c...ct-walkthrough/

Problem is that although we sometimes refer to it as the "planets tutorial" the topic title doesn't mention that EDIT: It does now

It's worth reading through that one to see how things work as it introduces every page type I think you will need for your own project.

The template files themselves in the /site/templates/ folder also hold a lot of examples, and the overview video, whilst a little out of date, is worth watching to see how several of the main concepts work.

[pwusr]

Thanks a lot, @Pete!

I had checked this page and it was empty : http://processwire.com/tutorials/quick-start/

[Pete]

Thanks - I've flagged that up with ryan.

[Joss]

There is also a slightly more complicated tutorial on the wiki - complicated in that it goes a little father.

http://wiki.processwire.com/index.php/Basic_Website_Tutorial

Worth doing the "planets" one first, then maybe have a go at this.

One of the great things about ProcessWire is you can decide your own way of constructing your site once you get the basics of how the system works. There is not one set way of doing things. That can seem confusing at first, but once you get your head round it, it means that you can design the system YOU want, rather than have to change your ideas to fit with the system

Good luck!

[pwusr]

Oh..wow! Thank you very much @Joss!

[pwusr]

I've been using a variation of the 960 grid for my sites. Please let me know how easy it is to use it with PW?

Also I've been looking at the PW tutorials - now going through the Mediawiki tutorial.

I have downloaded the MarkupSimpleNavigation module. I've been trying to replace the Navigation part given in the tutorial

<div id="menubar">

	<div id="navbar">				

<?php

$homepage = $pages->get("/");

$children = $homepage->children;

$children->prepend($homepage);

?>

<ul id="nav" class="drop">

<?php

foreach($children as $child) {

 if($child->numChildren > 0 && $child<>$homepage){		

 	$class = $child === $page->rootParent ? " active" : '';

     echo "<li><a href='#'>{$child->title}<b class='caret'></b></a>";	         	

     	echo "<ul>";	         	

     	foreach($child->children as $grandchild){

     		if($grandchild->numChildren > 0 && $grandchild<>$homepage){

 				$class = $grandchild === $page ? " class='active'" : '';	         	

	         	echo "<li><a href='#'>{$grandchild->title}</a>";		

				echo "<ul>";										

		        foreach($grandchild->children as $greatgrandchild){

		        $class = $greatgrandchild === $page ? " class='active'" : '';

		        echo "<li><a href='{$greatgrandchild->url}'>{$greatgrandchild->title}</a></li>";

				}																

				echo "</ul>";										

				echo "</li>";		

     		}else {

     			$class = $grandchild === $page->rootParent ? " class='active'" : '';

 				echo "<li><a href='{$grandchild->url}'>{$grandchild->title}</a></li>";

     		}

		}			         	

     	echo "</ul>";

     echo "</li>";		

 }else{

 $class = $child === $page->rootParent ? " class='active'" : '';

 echo "<li$class><a href='{$child->url}'>{$child->title}</a></li>";

 }

}

?>

</ul>		

</div><!-- /navbar -->

</div><!-- /menubar -->

with the rendering code of the module. Although it's working I can't get the styling to work.

Please tell me what I am missing here.

Thanks a lot in advance.

[Luis]

Take a Look in the Head section. Are you referring proper to the CSS? Please provide us some Code from your head

[pwusr]

Thanks Luis. I am sorry for not being more specific. Yes, I have referred to the CSS properly and the rest of the styling for the page works fine.

Here is the CSS (same as the tut):

#menubar { background-color: #545454; height: 45px; width: 100%; }
#navbar { height: 45px; width: 1000px; margin-right: auto; margin-left: auto; background: #333; }
ul#nav { margin: 8px 0 0 20px; }
ul.drop a { display:block;  color: #fff;  font-family: Verdana;  font-size: 14px;  text-decoration: none; }
ul.drop, ul.drop li, ul.drop ul { list-style: none;  margin: 0;  padding: 0;   color: #fff; }
ul.drop { position: relative;  z-index: 597;  float: left;  }
ul.drop li { float: left;  line-height: 1.3em;  vertical-align:  middle; zoom: 1;  padding: 5px 10px;  }
ul.drop li.hover, ul.drop li:hover { position: relative;  z-index: 599;  cursor: default;  background: #1e7c9a;  }
ul.drop ul { visibility: hidden;  position: absolute;  top: 100%;  left: 0;  z-index: 598;  width: 195px;  background: #555;  border: 1px solid #fff;  }
ul.drop ul li { float: none;  }
ul.drop ul ul { top: -2px;  left: 100%;  }
ul.drop li:hover > ul { visibility: visible  }

& here is the nav part from the header (again from the tutorial)

<div id="menubar">
    	<div id="navbar">				
    <?php
    $homepage = $pages->get("/");
    $children = $homepage->children;
    $children->prepend($homepage);
    ?>
    <ul id="nav" class="drop">
    <?php
    foreach($children as $child) {
     if($child->numChildren > 0 && $child<>$homepage){		
     	$class = $child === $page->rootParent ? " active" : '';
         echo "<li><a href='#'>{$child->title}<b class='caret'></b></a>";	         	
         	echo "<ul>";	         	
         	foreach($child->children as $grandchild){
         		if($grandchild->numChildren > 0 && $grandchild<>$homepage){
     				$class = $grandchild === $page ? " class='active'" : '';	         	
    	         	echo "<li><a href='#'>{$grandchild->title}</a>";		
    				echo "<ul>";										
    		        foreach($grandchild->children as $greatgrandchild){
    		        $class = $greatgrandchild === $page ? " class='active'" : '';
    		        echo "<li><a href='{$greatgrandchild->url}'>{$greatgrandchild->title}</a></li>";
    				}															
    				echo "</ul>";										
    				echo "</li>";		
         		}else {
         			$class = $grandchild === $page->rootParent ? " class='active'" : '';
     				echo "<li><a href='{$grandchild->url}'>{$grandchild->title}</a></li>";
         		}
    		}			         	
         	echo "</ul>";
         echo "</li>";		
     }else{
     $class = $child === $page->rootParent ? " class='active'" : '';
     echo "<li$class><a href='{$child->url}'>{$child->title}</a></li>";
     }
    }
    ?>
    </ul>		
    </div><!-- /navbar -->
    </div><!-- /menubar -->

Please tell me how to get the css styling shown at the top for the output of the MarkupSimpleNavigation module.

$treeMenu = $modules->get("MarkupSimpleNavigation"); 
echo $treeMenu->render();

Sorry for the long post (& missing the obvious )

Thanks a lot for your help.

[Luis]

Please show me the Content of the -head- section

[pwusr]

Thanks Luis.. Here is the complete head.inc code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="DESCRIPTION GOES HERE">
    <meta name="keywords" content="KEYWORDS GO HERE">
    <title>TITLE GOES HERE</title>
    <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/tut_layout.css" />
    </head>
     
    <body>
    <div id="menubar">
    	<div id="navbar">				
    <?php
    $homepage = $pages->get("/");
    $children = $homepage->children;
    $children->prepend($homepage);
    ?>
    <ul id="nav" class="drop">
    <?php
    foreach($children as $child) {
     if($child->numChildren > 0 && $child<>$homepage){		
     	$class = $child === $page->rootParent ? " active" : '';
         echo "<li><a href='#'>{$child->title}<b class='caret'></b></a>";	         	
         	echo "<ul>";	         	
         	foreach($child->children as $grandchild){
         		if($grandchild->numChildren > 0 && $grandchild<>$homepage){
     				$class = $grandchild === $page ? " class='active'" : '';	         	
    	         	echo "<li><a href='#'>{$grandchild->title}</a>";		
    				echo "<ul>";										
    		        foreach($grandchild->children as $greatgrandchild){
    		        $class = $greatgrandchild === $page ? " class='active'" : '';
    		        echo "<li><a href='{$greatgrandchild->url}'>{$greatgrandchild->title}</a></li>";
    				}															
    				echo "</ul>";										
    				echo "</li>";		
         		}else {
         			$class = $grandchild === $page->rootParent ? " class='active'" : '';
     				echo "<li><a href='{$grandchild->url}'>{$grandchild->title}</a></li>";
         		}
    		}			         	
         	echo "</ul>";
         echo "</li>";		
     }else{
     $class = $child === $page->rootParent ? " class='active'" : '';
     echo "<li$class><a href='{$child->url}'>{$child->title}</a></li>";
     }
    }
    ?>
    </ul>		
    </div><!-- /navbar -->
    </div><!-- /menubar -->
    <header id="masthead">
    	<div id="header-banner">BANNER GOES HERE</div>
    </header>
    <div id="wrapper">
    	<div id="content">

[Luis]

Hey sry for waiting so long, I was a bit in trouble the last days. 

Just for understanding.

The given code is your included head.inc ?

The Code is all working, no bugs in it. 

But, the css for your #menubar won´t work?

I´ve tried your head.inc in my test environment and everythin works fine. 

So my question is, do you put your css into the tut_layout.css ?

Or where is this css snippet?

[pwusr]

Thanks Luis. Really appreciate your help.

I´ve tried your head.inc in my test environment and everythin works fine.

Yes, that part is working.(Sorry!) But what I want is, to get the styling working when I use the MarkupSimpleNavigation module. I have the module installed and placed the following php code

<?php$treeMenu = $modules->get("MarkupSimpleNavigation"); echo $treeMenu->render();?>

between

<div id="navbar"> & </div> 

replacing the php code there. I know its not styled but even after spending a lot of time I can't get it to work,

I have already given the css code above.

Thanks a lot in advance.

[Luis]

Ah I see,

you are just outputting the nav list without any classes to the ul and li elements. 

Please take a look at the options section here: https://github.com/somatonic/MarkupSimpleNavigation/wiki/MarkupSimpleNavigation-Documentation

Your 

echo $treeMenu->render();

has to be something like this:

$options = array(
    'parent_class' => 'parent', // string (default 'parent') overwrite class name for current parent levels
    'current_class' => 'current', // string (default 'current') overwrite current class
    'has_children_class' => 'has_children' // string (default 'has_children') overwrite class name for entries with children
)
echo $treeMenu->render($options);

[pwusr]

Thanks.

I tried substituting the class names in options but it didn't make any change to the unstyled menu.

Please see the css:

ul#nav { margin: 8px 0 0 20px; }
ul.drop a { display:block;  color: #fff;  font-family: Verdana;  font-size: 14px;  text-decoration: none; }
ul.drop, ul.drop li, ul.drop ul { list-style: none;  margin: 0;  padding: 0;   color: #fff; }
ul.drop { position: relative;  z-index: 597;  float: left;  }
ul.drop li { float: left;  line-height: 1.3em;  vertical-align:  middle; zoom: 1;  padding: 5px 10px;  }
ul.drop li.hover, ul.drop li:hover { position: relative;  z-index: 599;  cursor: default;  background: #1e7c9a;  }
ul.drop ul { visibility: hidden;  position: absolute;  top: 100%;  left: 0;  z-index: 598;  width: 195px;  background: #555;  border: 1px solid #fff;  }
ul.drop ul li { float: none;  }
ul.drop ul ul { top: -2px;  left: 100%;  }
ul.drop li:hover > ul { visibility: visible  }

I set 'drop' as current_class.  Please let me know what I am doing wrong.

Thanks a lot in advance.

[Luis]

try this in your $options array:

'outer_tpl' => '<ul id="nav" class="drop">||</ul>',

[pwusr]

Thanks a lot Luis. That worked.

Sorry, I couldn't reply earlier as I was away last couple days.

[Luis]

My pleasure