Difference between revisions of "GeoMaps Theme Customization"

From JReviews Documentation
Jump to: navigation, search
(→‎Marker infowindow)
 
(3 intermediate revisions by the same user not shown)
Line 3: Line 3:
 
*/components/com_jreviews_addons/geomaps/views/themes/geomaps/
 
*/components/com_jreviews_addons/geomaps/views/themes/geomaps/
  
−
Even though you can customize the theme files there, that is not recommended. Instead use the [[JReviews Code Overrides]] functionality to copy specific geomaps theme files that you want to customize into your custom theme in jreviews_overrides folder.
+
Remember to use [[JReviews Code Overrides]] functionality for all your customizations.
  
−
== Listing detail page map ==
+
== Marker infowindow ==
  
−
The theme file of the JReviews listing detail page (/listings/detail.thtml) calls this file to load the map:
+
Marker infowindow use these theme files:
  
−
*/components/com_jreviews_addons/geomaps/views/themes/geomaps/geomaps/map_detail.thtml
+
'''Joomla'''
 +
*/components/com_jreviews_addons/geomaps/views/themes/geomaps/elements/map-json.thtml
 +
*/components/com_jreviews_addons/geomaps/views/themes/geomaps/elements/map-infowindow-template.thtml
  
−
If you want to customize it, copy it first to your custom theme in overrides:
+
'''WordPress'''
 +
*/wp-content/plugins/jreviews_addons/geomaps/views/themes/geomaps/elements/map-json.thtml
 +
*/wp-content/plugins/jreviews_addons/geomaps/views/themes/geomaps/elements/map-infowindow-template.thtml
  
−
*/templates/jreviews_overrides/views/themes/{your_theme}/geomaps/map_detail.thtml
+
The first file creates the entire map payload that includes the data that is used in the infowindow and sidebar templates. If you want to customize it, copy it first to your custom theme in overrides:
  
−
== List pages map ==
+
'''Joomla'''
 +
*/templates/jreviews_overrides/views/themes/{your_theme}/elements/map-json.thtml
 +
*/templates/jreviews_overrides/views/themes/{your_theme}/elements/map-infowindow-template.thtml
  
−
Only Blogview and Thumbview list page layouts can show the map. The /listings/listings_blogview.thtml and /listings/listings_thumbview.thtml theme files call this file to load the map:
+
'''WordPress'''
 +
*/jreviews_overrides/views/themes/{your_theme}/elements/map-json.thtml
 +
*/jreviews_overrides/views/themes/{your_theme}/elements/map-infowindow-template.thtml
  
−
*/components/com_jreviews_addons/geomaps/views/themes/geomaps/geomaps/map_results.thtml
+
The Add-on will automatically display any custom fields that are added to the configuration in the infowindow:
  
−
If you want to customize it, copy it first to your custom theme in overrides:
+
[[File:infowindow-fields.png]]
  
−
*/jreviews_overrides/views/themes/{your_theme}/geomaps/map_results.thtml
+
However, if you want to create a different layout for the custom fields, you need to update the following code in map-json.thtml
  
−
== GeoMaps module map ==
+
<source lang="php">
 +
$fields[] = [
 +
  'label' => $CustomFields->label($name,$listing),
 +
  'text' => $fieldText,
 +
  'showLabel' => Sanitize::getBool($fieldArray['properties'], 'show_title')
 +
];
 +
</source>
  
−
The GeoMaps module uses this theme file:
+
to:
  
−
*/components/com_jreviews_addons/geomaps/views/themes/geomaps/modules/geomaps.thtml
+
<source lang="php">
 +
$fields[$name] = [
 +
  'label' => $CustomFields->label($name,$listing),
 +
  'text' => $fieldText,
 +
  'showLabel' => Sanitize::getBool($fieldArray['properties'], 'show_title')
 +
];
 +
</source>
  
−
If you want to customize it, copy it first to your custom theme in overrides:
+
Now in the infowindow/sidebar templates, you can get rid of the field code:
  
−
*/templates/jreviews_overrides/views/themes/{your_theme}/modules/geomaps.thtml
+
<pre>
 +
<div class="jrCustomFields">
 +
  <div class="jrFieldGroup">
 +
    {{#fields}}
 +
    <div class="jrFieldRow">
 +
      {{#showLabel}}<div class="jrFieldLabel">{{label}}:</div>{{/showLabel}}
 +
      <div class="jrFieldValue">{{& text}}</div>
 +
    </div>
 +
    {{/fields}}
 +
  </div>
 +
</div>
 +
</pre>
  
−
== Marker infowindow ==
+
And add your fields like this:
  
−
Marker infowindow popups use this theme file:
+
<pre>
−
 
+
<div>{{fields.jr_name.label }}</div>
−
*/components/com_jreviews_addons/geomaps/views/themes/geomaps/geomaps/map_infowindow.thtml
+
<div>{{& fields.jr_name.text }}</div>
−
 
+
</pre>
−
If you want to customize it, copy it first to your custom theme in overrides:
+
−
 
+
−
*/templates/jreviews_overrides/views/themes/{your_theme}/geomaps/map_infowindow.thtml
+
−
 
+
−
By default the infowindow shows the listing thumbnail, editor and user rating stars and review count. You can also add custom fields. First you need to specify which custom fields you want to make available for the infowindow in the GeoMaps configuration:
+
−
 
+
−
[[File:infowindow-fields.png]]
+
−
 
+
−
After that, add the fiels to the infowindow theme file like this:
+
−
 
+
−
<source lang="php">
+
−
<span class="jr-map-jr_address"></span>
+
−
<span class="jr-map-jr_phone"></span>
+
−
</source>
+
  
 +
The ampersand inside the tag is important to render HTML tags correctly if they are present in the field output.
  
 +
The same approach is valid for customizing the sidebar and slideout templates.
  
 
[[Category:JReviews]]
 
[[Category:JReviews]]
 
[[Category:GeoMaps Addon]]
 
[[Category:GeoMaps Addon]]

Latest revision as of 10:49, 21 January 2019

The GeoMaps theme files are located here:

  • /components/com_jreviews_addons/geomaps/views/themes/geomaps/

Remember to use JReviews Code Overrides functionality for all your customizations.

Marker infowindow

Marker infowindow use these theme files:

Joomla

  • /components/com_jreviews_addons/geomaps/views/themes/geomaps/elements/map-json.thtml
  • /components/com_jreviews_addons/geomaps/views/themes/geomaps/elements/map-infowindow-template.thtml

WordPress

  • /wp-content/plugins/jreviews_addons/geomaps/views/themes/geomaps/elements/map-json.thtml
  • /wp-content/plugins/jreviews_addons/geomaps/views/themes/geomaps/elements/map-infowindow-template.thtml

The first file creates the entire map payload that includes the data that is used in the infowindow and sidebar templates. If you want to customize it, copy it first to your custom theme in overrides:

Joomla

  • /templates/jreviews_overrides/views/themes/{your_theme}/elements/map-json.thtml
  • /templates/jreviews_overrides/views/themes/{your_theme}/elements/map-infowindow-template.thtml

WordPress

  • /jreviews_overrides/views/themes/{your_theme}/elements/map-json.thtml
  • /jreviews_overrides/views/themes/{your_theme}/elements/map-infowindow-template.thtml

The Add-on will automatically display any custom fields that are added to the configuration in the infowindow:

Infowindow-fields.png

However, if you want to create a different layout for the custom fields, you need to update the following code in map-json.thtml 

$fields[] = [
  'label' => $CustomFields->label($name,$listing),
  'text' => $fieldText,
  'showLabel' => Sanitize::getBool($fieldArray['properties'], 'show_title')
];

to: 

$fields[$name] = [
  'label' => $CustomFields->label($name,$listing),
  'text' => $fieldText,
  'showLabel' => Sanitize::getBool($fieldArray['properties'], 'show_title')
];

Now in the infowindow/sidebar templates, you can get rid of the field code: 

<div class="jrCustomFields">
  <div class="jrFieldGroup">
    {{#fields}}
    <div class="jrFieldRow">
      {{#showLabel}}<div class="jrFieldLabel">{{label}}:</div>{{/showLabel}}
      <div class="jrFieldValue">{{& text}}</div>
    </div>
    {{/fields}}
  </div>
</div>

And add your fields like this: 

<div>{{fields.jr_name.label }}</div>
<div>{{& fields.jr_name.text }}</div>

The ampersand inside the tag is important to render HTML tags correctly if they are present in the field output.

The same approach is valid for customizing the sidebar and slideout templates.

Retrieved from "https://docs.jreviews.com/index.php?title=GeoMaps_Theme_Customization&oldid=4774"