Redesigning listings page (like tripadvisor)
This topic contains 7 replies, has 3 voices, and was last updated by 
Guust 7 years, 2 months ago.
We have moved to a support ticketing system and our forums are now closed.
Open Support Ticket-
AuthorPosts
-
December 16, 2017 at 7:48 pm #409777
Hi,
I have finished designing my start page, which was relatively easy as I used the search widget and then made CSS code adjustments until I got what I wanted.
However, for the output / listings page, I’m lost how to tackle the redesigning. In essence I want to redesign the listing page like Tripadvisor (see screenshot). The page can be broken down in 6 features
0: redesign the page so that the 6 features are in position as desired on the page
1: restating city that was entered (or is converted from zip code)
2: remove the large GD map and open it from a linked picture
3: restate any filters that were applied by the user (using the advanced search add-on) – please note that I havent bought it yet, but will once I designed the whole page and know it will all work as I need
4: filters from the advanced search
5: create links to resort output results by different criteria
6: redesign the list viewI think I could redesign the page to have the spaces for the functionalities, but then I wouldnt know how to include these because as far as I know there are no widgets for the above items.
Could someone in very basic terms but detailed enough kindly help me to make the next steps by explaining how each of the above could be achieved?
I would truly appreciate any help!!
Thank you very much in advance!
Best regards
DavidDecember 17, 2017 at 1:02 am #4097871: restating city that was entered (or is converted from zip code)
GD > Design > Search tab > Display searched parameters with title > Yes
This will add the ZIP code or location searched.2: remove the large GD map and open it from a linked picture
That requires customization that is outside support.3: restate any filters that were applied by the user (using the advanced search add-on) – please note that I haven’t bought it yet, but will once I designed the whole page and know it will all work as I need
See 1: That setting will also add custom fields searched for.4: filters from the advanced search
You can sort by custom fields on the Listings page, but not the Search page.
The Search page is to display search results, if a visitor then wants to make a different search, they will need to use the search function again.
Here is an example of a “sort by” page: https://wpgeo.directory/docs/places/hotels/
Select “Disabled Parking from the “sort by” dropdown.5: create links to resort output results by different criteria
That can be done using the search URL.
For example this link shows all hotels with disabled parking:
https://wpgeo.directory/docs/?geodir_search=1&stype=gd_place&sgd_placecategory%5B%5D=3&sgeodir_dis_park%5B%5D=1&s=+&snear=&sgeo_lat=&sgeo_lon=6: redesign the list view
That depends a bit what you want to do, but this will be a good starting point:
https://wpgeodirectory.com/docs/core-place-settings/#showSome more links that may assist:
https://wpgeodirectory.com/docs/searching-and-browsing/
https://wpgeodirectory.com/docs/gd-search/
https://wpgeodirectory.com/docs/layout/#directory
https://wpgeodirectory.com/docs/customizing-geodirectory-templates/Thank you
December 17, 2017 at 10:44 am #409797Hi Guust,
Thank you very much for answering! I had a look at your links which I had read already, but one thing that came clear is that I confused the GD search page and the GD listings page. While I was referring to the listings page (which shows all listings search independent), I was actually referring to the GD search page. But reading your answers I think you already assumed correctly what I meant.
If I understand correctly 1,3,4, and 5 will require that I first get the advanced search add-on, right?
- The remaining biggest problem to me (as it is still completely unclear to me) is:
how I can redesign the GD search page (beyond the options in the GD plugin -> design). If I look in WP -> Pages there is no GD Search Page to amend. When I open up the PHP file geodir-search php in the templates folder I see only reference made to “do_action(‘geodir_search_content’);” (ignoring the header,sidebars, footers in the file for the moment). In essence the geodir-search php file is just the frame for the page by pulling the content pages in. What I think I would need is the page that holds the actual design for the search page, i.e. states inter alia: output list on the left, tables for the output list, map on the right, and assigns all the CSS classes across the page etc etc. I apologise for my amateurish developer language, but does this make sense? If not I’ll try to elaborate.
I would much appreciate if someone could help me to get started!
Many thanks
Best regards
DavidDecember 17, 2017 at 12:29 pm #409805Have a look at the codex: https://wpgeodirectory.com/codex/codex/geodirectory_templates/geodir-search-php/
If you need help with customizations, you can look for a developer here:
https://geodirectoryexperts.com/Thanks
December 17, 2017 at 1:55 pm #409808Thanks Guust. I presume you intention with the link was to show me what the different PHP actions mean? I think I understand these mostly. I actually already dug through the PHP files and got to geodirectory_template_actions.php where there is a section “SEARCH PAGE ACTIONS” that seems to put together the input for the search page. I will probably have to dig now further to see where it pulling the content from because there are many references again. Please let me know if I’m totally off track here in finding the code for layout amendments.
Would it be actually possible (and more efficient) to pull the search results with a shortcode just like the search bar, i.e. could I create a page from scratch and include such a shortcode?
A developer would be instant gratification as I feel stuck right now, but I need the budget for the GD add-ons and other project costs. So I will have to push through the codes or drop the project ..
December 17, 2017 at 2:40 pm #409812Hello!
you can’t assign templates to GeoDirectory, but you can customize GeoDirectory templates: https://wpgeodirectory.com/docs/customizing-geodirectory-templates/
However this wouldn’t be the right thing to do to change header, navigation, colors etc.
This would require a lenghty theme customization, using conditional tags to modify the header, the navigation and body classes (to change colors).
You can mak your changes in a child theme or in your functions.php
The conditional tag to check if you are visiting a GeoDirectory page or not is :
geodir_is_geodir_page()Related Links
https://wpgeodirectory.com/features/
https://wpgeodirectory.com/features/front-end-listings-search-result-page/All of this is a customization and is outside what we can do here in support.
Hope this helps,
Thanks
December 17, 2017 at 3:14 pm #409813Hi Alex,
Thanks, I totally understand that such customisation solutions would be outside of regular support and it’s not my expectation that anyone would provide me with a out-of-the-box customised search page. I’m absolutely willing to do the work myself.
All I want to understand is the ‘where’ and ‘how’. Once I’m at the right place I can do the customisations. However, at the moment I feel stuck and dont know where to start.
but you can customize GeoDirectory templates: https://wpgeodirectory.com/docs/customizing-geodirectory-templates/
I’ve seen the page few times, but from my perspective all it says is not to play around with the original file but to copy it in the child theme, just so that when you update any changes dont get overriden. That’s not the info I’m looking for. I have also looked through the files in the template folder, from which it is not possible to find the actual content of the GD search page.
However this wouldn’t be the right thing to do to change header, navigation, colors etc.
This would require a lenghty theme customization, using conditional tags to modify the header, the navigation and body classes (to change colors). You can mak your changes in a child theme or in your functions.phpIf I understand you correctly, you are saying all these changes to the layout/design wouldnt be most efficiently done in the GD template files, but in the child theme and its functions.php?
If that’s the case, which file in the supreme-directory folder is then putting together the layout for the GD search page, e.g. (to pick one example) that in a listings view the picture of a place is on the left and the start rating on the right?
There must be a file that includes the detailed code of how the GD search page will look and what classes are applied to which section?
Thank you both for your help.
Best,
DavidDecember 17, 2017 at 10:27 pm #409832Changes to layout and design do not need too much customization.
The Search page is primarily designed with widget areas, see https://wpgeodirectory.com/docs/layout/#directorySo you would want to use the top area and the left column at GD > Design > Search tab.
Then you add any widgets you like.
https://wpgeodirectory.com/docs/widgets/
Then you can change how some of the widgets look, and move things within a widget with some CSS:
https://wpgeodirectory.com/docs/customizing-your-style/But like I already said, some of the options you ask for do not exist, like you cannot sort the Search page, only the Listings page. You would have to create new code etc, it is not just a matter of layout or looks.
Any new code would then need to be added using actions or filters: https://codex.wordpress.org/Plugin_APIYou can use shortcodes instead of widgets, but they will not change how WordPress or GD works; that will require your own coding.
https://wpgeodirectory.com/docs/core-shortcodes/There is not just one file that includes the detailed code of how the GD search page will look, but each widget etc has its own code etc.
Thanks
-
AuthorPosts
We have moved to a support ticketing system and our forums are now closed.
Open Support Ticket