Ajaxsearch template

437 Posts

distant_smile Reply #1, 11 years, 7 months ago

Hi,

I have an Ajaxsearch call on my site that returns info from my pages, this is in the form of a linked pagetitle and an image pulled from a TV. I want to style the results to basically encompass the title and image in a box approx 100x100px - I am a little lost on where to start with the CSS? I would appreciate any help, I would like the boxes to display 3 horizontally and then continue the pattern down the page

Regards,
SB

This question has been answered by iusemodx. See the first response.

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

353 Posts

pepebe Reply #2, 11 years, 7 months ago

Quote from: distant_smile at Mar 16, 2015, 04:39 AM

Hi,

I have an Ajaxsearch call on my site that returns info from my pages, this is in the form of a linked pagetitle and an image pulled from a TV. I want to style the results to basically encompass the title and image in a box approx 100x100px - I am a little lost on where to start with the CSS? I would appreciate any help, I would like the boxes to display 3 horizontally and then continue the pattern down the page

Regards,
SB

How does the html look like your ajax call is returning? Do you use a framework like bootstrap/foundation/etc? Your search results should fit into your basic design concept. If you share a bit more information about your project, I'm sure somebody will show up an give you a hand.

Cheers,

pepebe

Homepage: pepebe.de | MODX snippets (and other stuff) at github: https://gist.github.com/pepebe

437 Posts

distant_smile Reply #3, 11 years, 7 months ago

Hi there. This is the div box that my results will show in

<div id="content">

[*content*]
	
</div>

The overall width of the content div is around 350px. I realise I need the &tplResults parameter but I just need an example/starter to get me going
Regards,
SB

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

437 Posts

distant_smile Reply #4, 11 years, 7 months ago

I have added the &tplResults to my Ajaxsearch landing page. The template contains this code:

<h3><a href="[~[+id+]~]">[+pagetitle+]</a></h3>
[+introtext+]<br></br>
<img src="[+legoImages+]" alt="Lego images" width="100" height="100"  />

It returns a box 100x100 with the 'alt' text displayed and no picture. The picture should be pulled from a TV called legoImages. I know this will still need tweaking as the image will crop 100x100 of the picture rather than create a 100x100 thumbnail. From memory before I used the FCK Editor to make a thumbnail?

Regards,
SB

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

953 Posts

iusemodx Reply #5, 11 years, 7 months ago

Your HTML syntax is wrong, the following does not exist:

</br>

XHTML:

<br />

HTML:

<br>

Your results block - I presume you want each block to be 100px wide.

350px is not wide, adding 3 elements @100px you will only have 25px spacing, and if you don't have an element in the row that doesn't have a margin your elemens will drop underneath each other.

example of what's probably required, this clears itself, it doesn't need any other clearing classes or extra classes:

CSS:

#results{display:block; position:relative; width:100%;}
#results ul{display:block; margin:0; padding:0; list-style:none;}
#results ul::before, #results ul::after{display:table; content:" ";}
#results ul::after{clear:both;}
#results ul li{display:block; float:left; width:100px; margin:0 0 25px 25px; padding:0; word-break:break-all; word-wrap:break-word;}
#results ul li:first-child, #results ul li:nth-child(3n+1){margin-left:0; clear:left;}
#results ul li img{max-width:100px;}

HTML:

<div id="results">
  <ul>
    AJAX CALL HERE
  </ul>
</div>

tplResults chunk:

<li><h3><a href="[~[+id+]~]">[+pagetitle+]</a></h3>
[+introtext+]<br>
<img src="[+legoImages+]" alt="" /></li>

This is all a guess, as I presume the call syntax is different to what you have already posted and I dont know my way around AjaxSearch

I tried attaching the file as .html - wont work.

You need to rename the file from "Untitled-3.txt" to "Untitled-3.html" - you can then see a basic demo of the above code.

Download the latest Evo release
Report an issue about Evo
Read the Evo documentation

437 Posts

distant_smile Reply #6, 11 years, 7 months ago

Ok I have created a tpl names 'ajaxSearch' with the following code:

<li><h3><a href="[~[+id+]~]">[+pagetitle+]</a></h3>
[+introtext+]<br>
<img src="[+legoImages+]" alt="" /></li>

My HTML is:

<div id="results">
 <h2>Search<h2>
		<ul>
    [!AjaxSearch? &ajaxSearch=`0` &ajaxSearch=`0` &showIntro=`0` &showResults=`0` &landingPage=`9` &advSearch=`allwords`!]
	</ul>
	 </div>

And my css is:

/*Ajax Results*/
#results{display:block; position:relative; width:100%;}
#results ul{display:block; margin:0; padding:0; list-style:none;}
#results ul::before, #results ul::after{display:table; content:" ";}
#results ul::after{clear:both;}
#results ul li{display:block; float:left; width:100px; margin:0 0 25px 25px; padding:0; word-break:break-all; word-wrap:break-word;}
#results ul li:first-child, #results ul li:nth-child(3n+1){margin-left:0; clear:left;}
#results ul li img{max-width:100px;}
/*End of Ajax Results*/

The link is here:

http://www.borntobrick.co.uk/

If you enter 'lego' as a search term all that returns is a grey dot? I had it returning the link and image before but they were one under the other. I need the returned image to be a thumbnail and side by side, overflowing underneath like a grid. This is proving rather difficult
Regards,
SB

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

953 Posts

iusemodx Reply #7, 11 years, 7 months ago

I dont have much time but:

Looking at your source code the sidebar now has the code I provided.

The code I provided should be the results from the form, and it should be in the content area, not in the sidebar

I just looked briefly at AjaxSearch - there can be a lot to configure, for pure Ajax results or non-ajax, as such they have different templates which need modifying to your needs.

Sorry, but this is as far as I am going - I was under the impression you needed an idea about outputting the results:

Quote from: distant_smile at Mar 16, 2015, 05:54 AM

I just need an example/starter to get me going

My suggestion: View the AjaxSearch Documentation

Download the latest Evo release
Report an issue about Evo
Read the Evo documentation

353 Posts

pepebe Reply #8, 11 years, 7 months ago

as far as I can see all your placeholders return empty values. On top of them they don't seem to be processed.

<div id="content">
<form id="ajaxSearch_form" action="index.php?id=9" method="post">
...
</form>

<li><h3><a href="[~~]"></a></h3>
<br>
<img src="" alt=""></li>

</div>

There should be a wrapping ul/ol element around your results.

Try to set debug to 0 so we can learn more.

Final questions: Your homepage is running Evo right?

Homepage: pepebe.de | MODX snippets (and other stuff) at github: https://gist.github.com/pepebe

437 Posts

distant_smile Reply #9, 11 years, 7 months ago

Yes running Evo 1.0.15. I have added debug 0 but I must admit I am not entirely sure what I am looking for with debug as I never use it. Currently with my search back to how I first had it I get the TV image returned and a pagetitle and link.

What I want to achieve:

1. Any other returns are horizontal (With the space available in the Div I think 3 results will fit until they overflow underneath, creating a grid).
2. The returned images (from my TV) are thumbnails of a relative size for example 100x100px.

As my site shows at present, the returns are under each other and the pagetitle is wider than the image. I need to put the image and the pagetitle in a box to keep it equal, but I am a little lost as I do not have much experience with styling Snippet results. I tried Iusemodx idea, but I must have been doing it incorrectly as I could not get it to work. My HTML for the right sidebar is:

<div id="sidebar-b">
	
	<div id="container3">
 <h2>Search<h2>
		[!AjaxSearch? &ajaxSearch=`0` &ajaxSearch=`0` &showIntro=`0` &showResults=`0` &landingPage=`9` &advSearch=`allwords` &debug=`0`!]
	 </div>
	 </div>

The CSS to suit is as follows:

#sidebar-b {
float : right;
width : 170px;
margin : 0;
padding : 10px;
border-left : 1px solid #999;
background : #f2f2f5;
color : #666;
}

#container3 {
width : 180px;
border : 2px solid #000000;
margin-left : auto;
margin-right : auto;
text-align : center;
padding : 0px;
color : #666;
}

My Ajaxsearch call on the landing page is

[!AjaxSearch? &ajaxSearch=`0` &parents=`4` &tvPhx=`legoImages` &whereSearch=`content` &order=`pagetitle` &extract=`2:longtitle,introtext` &showPagingAlways=`1`!]

The results will be displayed in the content section which is a simple Div container with the following CSS:

#content {
padding : 10px;
margin-left : 190px;
margin-right : 190px;
background : inherit;
color : #666;
}

The Div is approximately 380px wide. Not sure if this will be enough info to go on but I can always keep my fingers crossed!
Regards

SB

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

953 Posts

iusemodx Reply #10, 11 years, 7 months ago

As stated in my post above - you need to modify the AjaxSearch templates or modify / create your own CSS for the output of the search results.

What you are doing is saying stuff doesn't work, when it does, when you modify to your requirements.

My example states that the results go in the content area, not in the sidebar, as you implemented it.

You need to modify the ajaxsearch results templates:

assets/snippets/ajaxSearch/templates/grpResult.tpl.html
assets/snippets/ajaxSearch/templates/results.tpl.html
assets/snippets/ajaxSearch/templates/result.tpl.html

Download the latest Evo release
Report an issue about Evo
Read the Evo documentation

Answered Ajaxsearch template