How to make a searchable product database in Modx

181 Posts

pagalo Reply #1, 17 years, 11 months ago

Hi Guys,

I am after some advice on creating a searchable product database.

Something like http://borla.com/ see the search box on the left hand side.

Is it possible to make a client editable list of products that have make, year, and model?
And each model needs to have a few images, plus possibly a audio file link, that’s if Modx has a nice ’snippet upload’ for this.

I have used Modx a few times now but only for standard page editing nothing like this tho.

A point in the right direction would be much appreciated.

2,314 Posts

anonymized-26931 Reply #2, 17 years, 11 months ago

Hi!

you should check tvExplorer: http://modxcms.com/forums/index.php/topic,16456.0.html

cheers, j

181 Posts

pagalo Reply #3, 17 years, 11 months ago

Thanks,

I am a bit new to this, so I guess I would use tvExplorer to make the search form, then make the individual products pages in modx as hidden pages and tvExplorer some how searches these by year and make, and displays the icons and names that link to the products page?

181 Posts

pagalo Reply #4, 17 years, 11 months ago

Cheers,

This is great, I installed tvEditor and tvExplorer.

And I made a couple of hidden pages with TV’s.

Now I am a bit stuck, does someone have a good link to how to make a form to search for 2 TV’s ’Make / Model’ and ’year’.

181 Posts

pagalo Reply #5, 17 years, 11 months ago

Okay I made a Ajax search box and it works well can someone give me an example of some tvexplorer code that would do a similar thing.

[!AjaxSearch? &hideMenu=`1` &withTvs=`+:model,year`!]

I would love to have a similar thing but the results bring up not just a link but a bit of info and a icon from that page, nad have the model and year as drop down boxes, is that possible?

181 Posts

pagalo Reply #6, 17 years, 11 months ago

If I was to use a form like this and past it straight into a new page what else would I need?

<form method="get" action="[~[*id*]~]">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
			  <tr>
				<td colspan="2"></td>
			  </tr>
			  <tr>
				<td class="searchFeild"><b>Make / Model:</b></td>
				<td class="searchFeild">
                [+tve.model:filter->9:label->model:tvtype->dropdown+]
			    </td>
				</tr>
				<tr>
				<td class="searchFeild"><b>Year:</b></td>
				<td class="searchFeild">
				[+tve.year:filter->9:label->year:tvtype->dropdown+]</td>
				</tr>
                <tr>
				<td class="searchFeild"><b>Part Number:</b></td>
				<td class="searchFeild">
				[+tve.partNo:filter->9:label->partNo:tvtype->dropdown+]</td>
				</tr>
				<td> 
				</td>
				<td>
				<input type="submit" name="search" value="Search" /></td>
				</tr>
			  </table>
			  </form> [tt][/tt]

241 Posts

bob1000 Reply #7, 17 years, 11 months ago

Rather than placing the form directly into the page, you would call it via the tvExplorer snippet:

[[tvExplorer? &dittoName=`Ditto` &dittoSnippetParameters=`tpl:resultsTpl|parents:9|depth:2|display:all|sortBy:pagetitle|sortDir:ASC` &formTPL=`searchTpl`]]
[+tve.searchForm+]

You then place the form into a chunk and reference it using the &formTPL=`searchTpl` parameter. In this example, the chunk for the form is called searchTpl.

Because tvExplorer uses Ditto to output the results, you need to include parameters for Ditto to use. One of these is the chunk Ditto uses to display the results (tpl:resultsTpl). This is the equivalent to the Ditto parameter &tpl=`resultsTpl`. For example, create a chunk called resultsTpl and put in any code and placeholders you want.

<h4><a href="[~[+id+]~]">[+title+]</a></h4>
<p>[+producticon+][+introtext+]</p>

The last thing you need is to add the placeholder for the Ditto results. This could be in a separate document or the same one as the tvExplorer snippet call.

[+tve.dittoList+]

181 Posts

pagalo Reply #8, 17 years, 11 months ago

Thanks Bob,

That worked a treat!

The search form looks to be working as the fields appear and they have the correct info in them.
But once I hit search a new empty page appears.

I put this into the resultsTpl chunk:

<h4><a href="[~[+id+]~]">[+title+]</a></h4>
<p>[+producticon+][+introtext+]</p>
<p>[+partNo+][+model+][+year+]</p>

And I put this into my product search page:

[[tvExplorer? &dittoName=`Ditto` &dittoSnippetParameters=`tpl:resultsTpl|parents:9|depth:2|display:all|sortBy:pagetitle|sortDir:ASC` &formTPL=`searchTpl`]]
[+tve.searchForm+][+tve.dittoList+]

241 Posts

bob1000 Reply #9, 17 years, 11 months ago

You’ll need to change the Ditto parameters to match your site.

parents:9 should contain the ID or IDs of the parent document to search in
depth:2 should indicate the number of document levels to drill down (default is 1, 0 equals infinite depth)

For the resultsTpl chunk, did you create TVs for [*producticon*], [*partNo*], [*model*] and [*year*]?

181 Posts

pagalo Reply #10, 17 years, 11 months ago

Okay not sure what the parent document id is, is it the number in brackets next to the page name in the page tree or is it something like the menu number?

Yeah I have made TV’s for partNo, model and year.

Just to clarify I made a page called product search and added the tvExplorer snippet.
I then made 2 pages with some text and an image etc and I put values into the drop down boxes of each pages TV’s, I then published them but I didn’t show them in the menu.

And when every I go to the live product search page the form displays fine but if I choose any of the options and hit search it goes to a new empty page "index.php?model=Ford&year=1966&partNo=hm84&search=Search", even if I just select a model say ford and nothing else it still comes up with nothing?