> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Flächenprodukte anzeigen

> Wie Sie in WEBSALE V8s Produkte anbieten, deren Preis sich aus einer vom Käufer eingegebenen Länge und Breite berechnet.

Bei einem Flächenprodukt gibt der Käufer die gewünschte Länge beziehungsweise Höhe und die gewünschte Breite beziehungsweise Dicke selbst ein. Aus beiden Werten berechnet der Shop die Fläche und daraus den Preis. Typisch sind Print-Produkte, Zuschnitte und Meterware.

Angelegt werden Flächenprodukte über den WSPManager oder per Import.

## Funktionsweise

Vier Bausteine bestimmen, was der Käufer sieht und bezahlt.

| Baustein | Wo gepflegt |
| - | - |
| Preis pro Flächeneinheit | Produktdaten |
| Fester Aufpreis, optional | Produktdaten, Feld `AreaProductStaticAddPrice` |
| Staffelpreise, optional | Produktdaten, Feld `AreaProductPriceScale` |
| Minimal- und Maximaleingaben | Produktdaten, Feld `AreaProductRange` |

Die Umrechnung zwischen der Eingabeeinheit und der Flächeneinheit stellen Sie einmal für den gesamten Shop ein. So kann der Käufer in Zentimetern eingeben, während der hinterlegte Preis in EUR pro Quadratmeter gilt.

### Der berechnete Preis

Der Shop rechnet nach dieser Formel:

```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
Preis = fester Aufpreis + (Preis pro Flächeneinheit x Fläche)
```

Greift eine Staffelstufe, tritt deren Preis an die Stelle des Produktpreises. Gewählt wird immer die höchste Stufe, deren Ab-Größe die berechnete Fläche nicht überschreitet.

Solange die Eingaben ungültig sind, setzt der Shop den Preis auf 0. Zeigen Sie den Preis deshalb nur innerhalb einer `PR-AreaProductValidInput`-Klammerung an, sonst steht dort zunächst ein Nullpreis.

### Gültige Eingaben

Zu jedem Flächenprodukt gehören Minimal- und Maximalwerte für beide Richtungen. Liegt ein Wert außerhalb, oder ist er gar nicht erst eine gültige Zahl, gilt die Eingabe als ungültig. Der Shop zeigt dann eine Hinweismeldung, und das Produkt lässt sich nicht in den Warenkorb legen.

Die eingegebene Länge, die eingegebene Breite und die berechnete Fläche werden in die Bestelldaten übernommen. Auf der Merkliste werden Flächenprodukte ebenfalls unterstützt.

## Voraussetzungen

Eine Freischaltung durch WEBSALE ist nicht nötig.

Die Produktdaten lesen Sie über die Produktdatenschnittstelle ein.

## Shopkonfiguration anpassen

Alle shopweiten Einstellungen stehen in der `shop.config` im Abschnitt `<AreaProduct>`. Legen Sie ihn an, falls er noch fehlt.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<AreaProduct>
    InputPrecision                        = 1
    CalculatedAreaDisplayPrecision        = 2
    CalculatedAreaConversionFactor        = 10000
    DisplayNameWidth                      = Breite
    DisplayNameLength                     = Höhe
    DisplayNameCalculatedArea             = Fläche
    DisplayLengthWidthUnit                = cm
    DisplayCalculatedAreaUnit             = m²
    MessageAreaOutOfRange                 = Ihre Eingaben sind fehlerhaft.<br>Bitte überprüfen Sie Ihre Eingaben und versuchen Sie es erneut.
    UseDynamicWeightBasedOnCalculatedArea = yes
</AreaProduct>
```

| Parameter | Bedeutung |
| - | - |
| `InputPrecision` | Nachkommastellen der Eingabefelder |
| `CalculatedAreaDisplayPrecision` | Nachkommastellen der angezeigten Fläche |
| `CalculatedAreaConversionFactor` | Umrechnungsfaktor, siehe unten |
| `DisplayNameLength`, `DisplayNameWidth`, `DisplayNameCalculatedArea` | Bezeichnungen, auch im Warenkorb und in der Bestellung |
| `DisplayLengthWidthUnit` | Einheit der Eingabe, gilt für Länge und Breite gemeinsam |
| `DisplayCalculatedAreaUnit` | Einheit der berechneten Fläche |
| `MessageAreaOutOfRange` | Meldung bei Werten außerhalb der Grenzen |
| `UseDynamicWeightBasedOnCalculatedArea` | Gewicht aus der Fläche berechnen |

### Umrechnungsfaktor bestimmen

Der Faktor beantwortet die Frage, durch wie viel der Shop das Produkt aus Länge und Breite teilen muss, um auf die gewünschte Flächeneinheit zu kommen.

```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
Fläche = (Länge x Breite) / CalculatedAreaConversionFactor
```

Gibt der Käufer in Zentimetern ein und soll die Fläche in Quadratmetern erscheinen, lautet der Faktor 10000, denn ein Quadratmeter hat 10000 Quadratzentimeter. Sollen Eingabe und Fläche dieselbe Einheit verwenden, setzen Sie 1.

Ein Wert von 0 oder kleiner wird vom Shop stillschweigend auf 1 gesetzt. Ein Tippfehler an dieser Stelle fällt deshalb nicht durch eine Fehlermeldung auf, sondern durch absurd hohe Flächen und Preise.

### Gewicht aus der Fläche berechnen

Steht `UseDynamicWeightBasedOnCalculatedArea` auf `yes`, multipliziert der Shop das Gewicht des Produkts mit der berechneten Fläche. Das im Produkt hinterlegte Gewicht ist dann kein Stückgewicht mehr, sondern das Gewicht pro Flächeneinheit.

Referenz: [Abschnitt AreaProduct](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/warenkorb-und-bestellprozess.md#areaproduct)

## Produktdetailansicht erweitern

Das folgende Beispiel für `ws_product.htm` zeigt den vollständigen Ablauf: Eingabe, Neuberechnung, Anzeige der Fläche und erst danach der Warenkorb-Button.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form action="~FORM-Product~" method="post">
...
{PR-AreaProduct}

   {MSG-AreaInput_Notify}~MSG-AreaInput_Notify~{/MSG-AreaInput_Notify}

   ~PR-AreaProductWidth_descr~:
   <input type="text" name="~PR-AreaProductWidth_input~" value="~PR-AreaProductWidth~"
          min="~PR-AreaProductMinWidth~" max="~PR-AreaProductMaxWidth~"> ~PR-AreaProductWidth_unit~
   (min. ~PR-AreaProductMinWidth~ / max. ~PR-AreaProductMaxWidth~ ~PR-AreaProductWidth_unit~)

   X

   ~PR-AreaProductLength_descr~:
   <input type="text" name="~PR-AreaProductLength_input~" value="~PR-AreaProductLength~"
          min="~PR-AreaProductMinLength~" max="~PR-AreaProductMaxLength~"> ~PR-AreaProductLength_unit~
   (min. ~PR-AreaProductMinLength~ / max. ~PR-AreaProductMaxLength~ ~PR-AreaProductLength_unit~)

   <input type="submit" name="~PR-RecalcVariations~" value="Fläche berechnen">

   {PR-AreaProductCalculatedArea}
      ~PR-AreaProductCalculatedArea_descr~:
      ~PR-AreaProductCalculatedArea~ ~PR-AreaProductCalculatedArea_unit~
   {/PR-AreaProductCalculatedArea}

   {PR-AreaProductValidInput}
      <input type="text" name="~PR-Quantity_input~" value="~PR-Quantity~">
      <input type="submit" name="~BT-ProductAddToBasket~" value="In den Warenkorb legen">
   {/PR-AreaProductValidInput}

{/PR-AreaProduct}
...
</form>
```

Drei Klammerungen tragen die Logik:

* `PR-AreaProduct` schließt den gesamten Block ein, damit normale Produkte auf demselben Template unberührt bleiben.
* `PR-AreaProductCalculatedArea` erscheint erst, wenn eine Fläche berechnet wurde, also nicht beim ersten Aufruf.
* `PR-AreaProductValidInput` gibt den Warenkorb-Button erst frei, wenn beide Eingaben innerhalb der Grenzen liegen.

![20180607 Flaechenprodukte Bsp 1](https://mintcdn.com/websaleag-44ee7ea6/98HtpcQDYdzjmpoC/images/20180607_flaechenprodukte-bsp-1.png?fit=max\&auto=format\&n=98HtpcQDYdzjmpoC\&q=85\&s=b12bfdb6ccbac6df4a391be728db03a3)

Bezeichnungen und Einheiten kommen über die `_descr`- und `_unit`-Tags aus der `shop.config`. Schreiben Sie "cm" und "Breite" nicht fest ins Template, sonst weicht die Produktseite später von Warenkorb und Bestellung ab.

`PR-AreaProductLength_unit` und `PR-AreaProductWidth_unit` liefern beide denselben Wert, nämlich `DisplayLengthWidthUnit`. Eine getrennte Einheit für Länge und Breite ist nicht vorgesehen.

## Fester Aufpreis

Ein fester Aufpreis fängt Kosten ab, die unabhängig von der Fläche anfallen, beispielsweise Rüst- oder Produktionskosten. Er wird je Produkt im Feld `AreaProductStaticAddPrice` der Produktdaten gepflegt und einmal je Bestellposition aufgeschlagen.

Im Template geben Sie ihn mit `~PR-AreaProductStaticAddPrice~` aus. Als Klammerung verwendet, erscheint der Bereich nur, wenn überhaupt ein Aufpreis hinterlegt ist.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{PR-AreaProductStaticAddPrice}
   zuzüglich ~PR-AreaProductStaticAddPrice~ ~WS-Currency~ Bearbeitungspauschale
{/PR-AreaProductStaticAddPrice}
```

## Staffelpreise

Mit Staffelpreisen sinkt der Preis je Flächeneinheit, je größer die bestellte Fläche ist. Gepflegt werden sie je Produkt im Feld `AreaProductPriceScale`.

Maßgeblich ist die berechnete Fläche, nicht die Bestellmenge. Der Shop wählt die Stufe mit der höchsten Ab-Größe, die die Fläche nicht überschreitet. Liegt die Fläche unterhalb der kleinsten Stufe, gilt der reguläre Produktpreis.

Auf der Produktdetailansicht zeigen Sie die Staffel als Tabelle an.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{PR-AreaProduct}
...
   {PR-AreaProductPriceScale}
      <table>
         <tr>
            <td>ab Größe</td>
            <td>Preis pro Einheit</td>
         </tr>
         {@PR-AreaProductPriceScale}
            <tr>
               <td>~PR-AreaProductPriceScale_Size~</td>
               <td>~PR-AreaProductPriceScale_Price~</td>
            </tr>
         {/@PR-AreaProductPriceScale}
      </table>
   {/PR-AreaProductPriceScale}
...
{/PR-AreaProduct}
```

Die Klammerung sorgt dafür, dass Überschrift und Tabellengerüst nur erscheinen, wenn Staffelpreise hinterlegt sind. Die Schleife durchläuft anschließend die Stufen.

## Tags im Überblick

### Zustand des Produkts

| Tag | Bedeutung |
| - | - |
| `PR-AreaProduct` | Klammerung, trifft zu, wenn das Produkt ein Flächenprodukt ist |
| `PR-AreaProductValidInput` | Klammerung, trifft zu, wenn beide Eingaben gültig sind |
| `MSG-AreaInput_Notify` | Hinweismeldung bei fehlenden oder ungültigen Eingaben |

### Eingaben des Käufers

| Tag | Bedeutung |
| - | - |
| `PR-AreaProductLength_input` | Name des Eingabefelds für die Länge |
| `PR-AreaProductLength` | eingegebene Länge |
| `PR-AreaProductWidth_input` | Name des Eingabefelds für die Breite |
| `PR-AreaProductWidth` | eingegebene Breite |
| `PR-RecalcVariations` | Name des Buttons zur Neuberechnung |

### Grenzwerte

| Tag | Bedeutung |
| - | - |
| `PR-AreaProductMinLength`, `PR-AreaProductMaxLength` | Grenzen der Länge |
| `PR-AreaProductMinWidth`, `PR-AreaProductMaxWidth` | Grenzen der Breite |

### Ergebnis

| Tag | Bedeutung |
| - | - |
| `PR-AreaProductCalculatedArea` | berechnete Fläche, auch als Klammerung verwendbar |
| `PR-AreaProductBasePrice` | Preis pro Flächeneinheit |
| `PR-AreaProductStaticAddPrice` | fester Aufpreis, auch als Klammerung verwendbar |
| `PR-Weight` | Produktgewicht |

### Bezeichnungen und Einheiten aus der shop.config

| Tag | Herkunft |
| - | - |
| `PR-AreaProductLength_descr` | `DisplayNameLength` |
| `PR-AreaProductWidth_descr` | `DisplayNameWidth` |
| `PR-AreaProductCalculatedArea_descr` | `DisplayNameCalculatedArea` |
| `PR-AreaProductLength_unit`, `PR-AreaProductWidth_unit` | `DisplayLengthWidthUnit` |
| `PR-AreaProductCalculatedArea_unit` | `DisplayCalculatedAreaUnit` |

Ein Beispiel für die Preisanzeige pro Einheit:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
~PR-AreaProductBasePrice~ ~WS-Currency~ pro ~PR-AreaProductCalculatedArea_unit~
```


## Related topics

- [Flächenprodukte im Warenkorb anzeigen](https://dokumentation.websale.de/v8s/warenkorb/flaechenprodukte-im-warenkorb-anzeigen.md)
- [Besondere Produktarten im Warenkorb](https://dokumentation.websale.de/v8s/referenz/tags/basket/besondere-produktarten-im-warenkorb.md)
- [Warenkorb anzeigen und löschen](https://dokumentation.websale.de/v8s/warenkorb/warenkorb-anzeigen-loeschen.md)
- [Meta-Felder](https://dokumentation.websale.de/v8s/schnittstellen/produkte-und-kategorien/ws-sftp-produkte-pro/meta-felder.md)
- [Warenkorb und Bestellprozess](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/warenkorb-und-bestellprozess.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.