# Wordpress Plugin

Unser Plugin ermöglicht es Ihnen ihre bei TIVENTS gelisteten Produkte in ihrer Wordpress Installation anzuzeigen und zum Shop zu verlinken. Dabei können Sie unterscheiden, wie Sie die Produkte anzeigen wollen. Alle Produkte, nur Gutschein, Events oder Patenschaften, als Listen-, Kachelansicht oder bei Events als Kalendar.

<span>Eine Demo finden Sie unter </span>[https://wordpress-demo.tivdev.de/](https://wordpress-demo.tivdev.de/)

# Installation und Einrichtung

## Installation

Die Installation ist am Einfachsten über das Pluginverzeichnis von Wordpress. Alternativ können Sie das Plugin auch manuell hochladen.

## Einrichtung

## API-Key (optional)

# Shortcodes

Mittels der nachstehenden Shortcodes können Sie in ihrer Seite die Produkte und Spender darstellen.

## Produkte als Listen oder Kalender

### Optionen

<table id="bkmrk-name-funktion-hinwei" style="border-collapse:collapse;width:100%;"><colgroup><col style="width:33.3333%;"></col><col style="width:33.3333%;"></col><col style="width:33.3333%;"></col></colgroup><thead><tr><td>Name</td><td>Funktion</td><td>Hinweise</td></tr></thead><tbody><tr><td>type</td><td>  
</td><td>  
</td></tr><tr><td>style</td><td>  
</td><td>  
</td></tr><tr><td>limit</td><td>  
</td><td>  
</td></tr><tr><td>start</td><td>  
</td><td>  
</td></tr><tr><td>end</td><td>  
</td><td>  
</td></tr><tr><td>group</td><td>  
</td><td>Eine spezielle Option, die von TIVENTS direkt angelegt werden muss. Bitte sprechen Sie uns an, wenn keine der oben aufgeführten Möglichkeiten Ihren Bedarf wiederspiegeln kann. </td></tr><tr><td>divid</td><td>Hier kann eine eigene ID für das TIVENTS Element gesetzt werden</td><td>  
</td></tr><tr><td>  
</td><td>  
</td><td>  
</td></tr></tbody></table>

### Listenansicht

Für alle Produkte

```bash
[tivents_products style="list"][/tivents_products]
```

Für Gutscheine

```bash
[tivents_products style="list" type=coupons][/tivents_products]
```

Für Events

```bash
[tivents_products style="list" type=events][/tivents_products]
```

Für Patenschaften/Zertifikate

```bash
[tivents_products style="list" type=certifcates][/tivents_products]
```

### Kachelansicht

Für alle Produkte

```bash
[tivents_products style="grid"][/tivents_products]
```

Für Gutschein

```bash
[tivents_products style="grid" type=coupons][/tivents_products]
```

Für Events

```bash
[tivents_products style="grid" type=events][/tivents_products]
```

### Kalendaransicht

```bash
[tivents_products style="calendar" type=events][/tivents_products]
```

### Unformatierte Liste

```
[tivents_products style=unstyled-list type=coupons][/tivents_products]
```

Unter [https://wordpress-demo.tivdev.de/listenansichten/unformatierte-liste/](https://wordpress-demo.tivdev.de/listenansichten/unformatierte-liste/) kann man sich eine Version des Einsatzes des Plugins ansehen. Zum Einsatz kommt hier folgendes CSS

```
#tivents-product-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Drei Spalten mit gleicher Breite */
  gap: 10px; /* Optional, um Abstand zwischen den Items zu haben */
}

#tivents-product-list-item {
  border: 1px solid #000; /* Border für jedes Item */
}
#tivents-product-image img {
  max-width: 50%;
  display: flex;
}

#tivents-product-name {
  line-height: 1em;
  min-height: 3em;
}

#tivents-product-date {
line-height: 1em;
  min-height: 2em;
}

#tivents-product-place {
line-height: 1em;
  min-height: 2em;
}
```

## Detailansicht

Wir erarbeiten eine Lösung für eine Produktdetailseite

## Modal

Wir erarbeiten eine Lösung für ein Modal für die Produktdetails

## Spenderwand

Falls Sie bei uns Patenschaften oder Unterstützer Produkte anbieten und die Unterstüzer auch veröffentlich werden sollen, können Sie diese ebenfalls anzeigen lassen.

Diese Punkt ist noch in der Bearbeitung. Bitte schreiben Sie uns an, wenn Sie planen Ihre Spender auf Ihrer Seite zu veröffentlichen.

# Design

Unser Plugin ist so geplant, dass es sich theoretisch in viele Seiten einpassen sollte. Damit auch das Farbkonzept stimmt, haben wir die Möglichkeiten geschaffen einige Einstellungen anzupassen und den Foote via CSS auszublenden. Sollten Sie noch andere Wünsche zu Anpassung, Vorschläge oder Kritik haben, sprechen Sie uns gern an.

### Primäre Farbe  


Die Primärfarbe bestimmt in der Kachel- und Listenansicht die Farbe beim Hovereffekt und bei der Listenansicht den kleinen Farbstreifen links. Als Standard ist das TIVENTS Gelb (#F5C800) gesetzt, dies kann aber in jeden HEX Wert geändert werden.

### Sekundärfarbe

Die Sekundärfarbe bestimmt die Farbe vom Ort, Laufzeit. Als Standard ist schwarz (#000000) gesetzt, dies kann aber in jeden HEX Wert geändert werden.

### Textfarbe

Die Textfarbe definiert die Farbe des Produktes. Als Standard ist schwarz (#000000) gesetzt, dies kann aber in jeden HEX Wert geändert werden.

### Footer ausblenden

Wir setzen einen Footer, damit man sehen kann von wem das Plugin stammt, als auch erkennen zu können, um welche Version es sich handelt, die bei Ihnen zum Einsatz kommt. Diesen kann man einfach über den Customizer in Wordpress ausblenden. Bitte fügen Sie dazu bei Zusätzliches CSS folgende Zeilen ein:

```CSS
#tiv-footer {
	display:none;
}
```

## Stile

### Unformatierte Liste

Man kanne eine unformatierte Liste einbinden. Diese kann dann über eigenes CSS angepasst werden.

```
[tivents_products style=unstyled-list type=coupons][/tivents_products]
```

Der Aufbau des HTMLs ist dann so:

```html
<div id="tivents-product-list">
  <div id="tivents-product-list-item">
    <a id="tivents-product-link" href="https://tiv.li/hrip?utm=tivents-wordpress-plugin">
      <div id="tivents-product-card">
        <div id="tivents-product-image"><img src="'.$imageUrl.'" alt="'.$product['name'].' - Image"></div>
        <div id="tivents-product-name">Mustergutschein</div>
        <div id="tivents-product-date">Gutschein</div>
        <div id="tivents-product-location">Musterstadt</div>
      </div>
    </a>
  </div>
</div>
```

# Patenschaften/Spenden

Wir schaffen zukünftig noch die Möglichkeit Patenschaften und Spendenprodukte im Plugin anzeigen zu könne. Daher befindet sich diese Seite noch im Aufbau.

Sprechen Sie uns gern an, wenn Sie bei der Unterstützung Ihres Vereins, Einrichtung o.v.a Hilfe benötigen.

# Datenschutz

Das Plugin holt sich die Daten über unsere API Schnittstelle. Persönliche Daten der Webseitenbesucher werden nicht abgefragt.