Integrating my code with EE?

Question

I have two select boxes and a submit button.On click of this submit button,I redirect the user to a page which is populated by data feeded from an admin panel.

Yes,I have created an admin panel which populates these select boxes and also has some data related to every single selectboxes(images,reviews etc) which will be displayed on click of submit on the redirected page.Hope I am clear.

I have done this thing with conventional way of using php,javascript.But I am trying exp engine for the first time just for learning.

I have created the admin panel and feeded quite a lot of data.

MyQuestion:Its the integration that I have no clue about.

1.I want to assign all the value belonging to a certain column in my table to the select boxes.

2.On click of submit button,want to populate a page with data related to both select boxes.

I dont have any clue about how to integrate my code with a template that I have using Expression Engine.

Hope I am not Misunderstood.

Please correct the tagging.I am new to this stack exchange network.

Answer 1

Create a category group in EE called "Cars" (assumes cat group ID of 2 in code below). In there you create categories with the Make. You then create child categories of each Make with the relevant Model. You can then create children of the models if there are variants of the model.

Channel Categories

Main landing page template has this code:

{!-- MAKE --}
<select id="make">
{exp:channel:categories 
    style="linear"
    category_group="2"
    parent_only="yes"}
    <option value="{category_id}">{category_name}</option>
{/exp:channel:categories}
</select>

{!-- MODEL --}
<select id="model">
    {!-- TO BE POPULATED VIA AJAX --}
</select>

{!-- VARIANT --}
<select id="variant">
    {!-- TO BE POPULATED VIA AJAX --}
</select>

Separate template in "car" template group, called "model-list" template, called via Ajax on the following URL: /car/model-list/# The number is the category ID selected from the #make select above.

/car/model-list template:

{exp:channel:categories 
    style="linear"
    category_group="2"
    show_empty="no"
    show="{segment_3}"
    parent_only="yes"}
    <option value="{category_id}">{category_name}</option>
{/exp:channel:categories}

Pulled via Ajax then inserted into the relevant part of the main template/page.

Then once the model is selected, the same process to get any variants but calling this URL: /car/variant-list/# (again the number indicates the category ID ...

/car/variant-list template:

{exp:channel:categories 
    style="linear"
    category_group="2"
    show_empty="no"
    show="{segment_3}"}
    <option value="{category_id}">{category_name}</option>
{/exp:channel:categories}

Once you have all the category IDs from either 2 or 3 of the selects, you can then combine them to form the category parameter in a channel:entries tag, either via JS to combine and submit or append as URL segments, or leave as separate form fields submitted to the next page and use a third-party add-on (Mo' Variables is a great one) to get the POST values.

Car Details template (car/details)

{exp:channel:entries
   dynamic="no"
   category="{post:make}&{post:model}{if {post:variant}}&{post:variant}{/if}"}
   {title}
   ...
{/exp:channel:entries}

The car entry would need to have the relevant categories selected obviously! One negative would be that the car details doesn't have a unique URL, but that could be solved by calling a lookup Ajax call after the variant is selected (or if variant options don't exist) that calls something similar to the last code above that outputs {url_title} - this is then used on a URL for the Submit button (/car/details/{url_title}) and therefore giving you a unique URL for each car.

Another alternative would be to output the entire category tree as a JS variable (from the EE template) and then parse it in JS to populate the relevant select boxes, this avoiding the Ajax calls.

You might also be able to approach it using relationships but I've not explored that option!