pwired Posted March 10, 2014 Share Posted March 10, 2014 Hi I have a home page with 3 columns: on the left side 12 categories, in the middle column info text about a category, on the right side some links and thumbs So the left column looks like this: category1 category2 category3 etc etc If a visitor of the homepage clicks on a category, in the middle column of the homepage should show up info text about this category. So I need to put the contents of this info text for each category somewhere in the admin with fields. Since I have 12 categories, do I need to setup 12 text fields each with a name for a category, and add these 12 text fields to the home page template ? The code to output the info text of category1 in the middle column of the homepage when a visitor clicks in the left column on category1 would be something like this but I am not sure about how the right code would be: <a href="category1"><?php echo $page->category1 ; ?></a> The link to click on a category has to be in the left column but the info text to output after clicking on a link has to be done in the middle column. How do you do this ? Thanks Link to comment Share on other sites More sharing options...
Joss Posted March 10, 2014 Share Posted March 10, 2014 Not sure if I totally followed that, but it kind of depends what you need to do with the categories other than just list them on the front page. For instance: Let us say you are using categories as parents for sub pages (or for something like news articles) and those would be displayed as part of their own template-file/page on the site somewhere. Then you can can create a template that not only has the fields you need for those other pages, but also has fields covering what you want to show on the front page. Those front page related fields you can then find() so that you can create your list in the left column. To display content in a central column using jquery to post it onClick. You could even choose to call that as an ajax call and I am sure someone will post how to do that! Link to comment Share on other sites More sharing options...
pwired Posted March 10, 2014 Author Share Posted March 10, 2014 Hi Joss, are you saying to work with 2 templates and put the info text on a hidden child page and then output the info text from this hidden page in the middle column of the home page ? Still don't know how to do this from the left column when clicking on a category link. I guess clicking on a category link has to execute some php or script code to output the info text to the middle column. Link to comment Share on other sites More sharing options...
SiNNuT Posted March 10, 2014 Share Posted March 10, 2014 In most scenarios i think it would be wise to set up the categories as pages somewhere in your tree. categories (basically a container page) -category1 (using a template with for example a title field for the category name and a field for the category info) -category... -category12 Then on your homepage you can just foreach over the needed content. It sounds like you want to make some kind of vertical tabbed content area, where the tabs(basically just an unordered list in your left column) hide/unhide their info text when clicked. This is done by javascript. I wouldn't bother with ajax loading if the info content isn't that big. Maybe try googling for something like http://designm.ag/tutorials/building-vertical-tabbed-content-with-jquery/ Link to comment Share on other sites More sharing options...
Joss Posted March 10, 2014 Share Posted March 10, 2014 Hi Joss, are you saying to work with 2 templates k has to execute some php or script code to output the info text to the middle column. No, just create one template for categories with all the fields you need for wherever they are displayed. Then you can just call those fields into your home page Link to comment Share on other sites More sharing options...
pwired Posted March 10, 2014 Author Share Posted March 10, 2014 Thanks Joss - Sinnut. Ok so the first step would be to make a container page "categories" and then make child pages category1 category2 etc and a template categories with the needed fields. Second step would be when clicking on a link in the left column to get the field containing the info text and then output that info text in the middle column. Home Page Left column Middle column Right column category1 When someone clicks on category2 a category link in the left category3 column, the info text about category4 that category shows up here category5 in the middle column. Without etc. reloading the page in the browser. etc. Link to comment Share on other sites More sharing options...
SiNNuT Posted March 10, 2014 Share Posted March 10, 2014 Yes, and that's where javascript (jQuery, plain js or other libraries) comes in. On the home page you use PHP and the PW api to list all of the Left column and all of the Middle column, with some correct markup for javascript to do it's magic (step 1). You then use javascript to hide/show the content of the Middle column based on which anchor link is active in the Left column (step 2). The link i posted shows you an example of how to do such a thing. I can't provide you with a copy paste solution, but it in essence just a php foreach (using a PW selector) and some basic jQuery. 1 Link to comment Share on other sites More sharing options...
pwired Posted March 10, 2014 Author Share Posted March 10, 2014 Thanks Sinnut, you are right, I have to port the jquery script solution shown on that page you linked, to processwire. Not easy but not impossible for a beginner coder like me Thanks. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now