Extension tt_address

Common setup steps

The below mentioned packages are available through the "Display mode" available in the plugin content element.

The setup steps are similar:

1. Add static template "Pizpalue - tt_address [package name]"

2. Add TypoScript Configuration to resources from page property

3. Configure the package in the constant editor (category "PIZPALUE: PLUGINS", section "Addresses (tt_address)")

4. Add the address plugin to a page and select the corresponding view (Plugin options - Display tab - Select display mode)

Google map

This package adds a Google map showing the selected addresses.

Map showing addresses from table tt_address

Setup

Carry out the common setup steps.

"Google Map View" in the "Display mode" from the plugin content element

Note

This package adds its Fluid templates and partials to index 20 (see TS setup "plugin.tx_ttaddress.view.templateRootPaths"). To overrule these files add own resources under a higher index.

Customization

The markers info window might be customized by overriding the templates partial (file "typo3conf/ext/pizpalue/ Extensions/tt_address/GoogleMap/Resources/Private/Partials/GoogleMap.html"). The content is defined in the tag with id "pp-ttaddress-maptemplate":

<div class="pp-ttaddress-maptemplate" data-pp-amt-markertitle="company">
   <div class="pp-amt-wrap" data-pp-amt-uid="uid">
      <div class="pp-amt-imagewrap">
         <img class="pp-amt-image" src="" data-pp-amt="image" />
      </div>
      <div class="pp-amt-text">
         <h6><span data-pp-amt="company"></span>&nbsp;(<span data-pp-amt="title"></span>)</h6>
         <p data-pp-amt="description"></p>
         <p>
            <b data-pp-amt="name"></b><br />
            Tel: <span data-pp-amt="phone"></span>&nbsp;|&nbsp;
            <a href="#" data-pp-amt="email">Email</a>&nbsp;|&nbsp;
            <a href="#" target="_blank" data-pp-amt="www">Web</a>
         </p>
      </div>
   </div>
</div>

Since the data for each address is assigned to a marker through JS some data attributes and class names serve a special need.

Template attributes

Template attribute	Function
data-pp-amt-markertitle	Defines the address field used for the markers title shown when hovering over the marker
data-pp-amt-uid	The uid from the address the content is derived from
data-pp-amt	The value indicates the field used for replacing the tags content

Data attributes

Data attribute	Function
data-pp-amd-uid	Specifies the address record uid holding the data for the infowindow
data-pp-amd-imageuri	The uri from the image to be shown in the infowindow
data-pp-amd-uri	The uri to show the address details

Classes

Class	Function
pp-ttaddress-maptemplate	Identifies the template for the marker info window (is sibling from pp-ttaddress-map)
pp-amt-image	Identifies the image

Teaser

This package provides a teaser showing random address item as overlay images.

Teaser showing random address item as overlay image

Setup

Carry out the common setup steps.

"Teaser View" in the "Display mode" from the plugin content element

Note

This package adds its Fluid templates and partials to index 22 (see TS setup "plugin.tx_ttaddress.view.templateRootPaths"). To overrule these files add own resources under a higher index.

Customization

The package provides several configuration constants allowing to define the view for different screen sizes. For further customizations the template might be overruled.