PHP-Funktion getParagraph mit Hover-Effekt zum Extrahieren und Kürzen von Text

Auf der Website eines unserer Kunden haben wir im Check-out Prozess eine Spendenfunktion integriert, die es den Nutzern ermöglicht, verschiedene lokale oder globale Umweltprojekte finanziell zu unterstützen.

Für jedes dieser Projekte haben wir eine besondere Funktion implementiert: Wenn Benutzer mit der Maus über die Layout-Box fahren, wird ein Hover-Effekt aktiviert. Dieser zeigt einen extrahierten und gekürzten Paragrafen aus einem ausführlicheren Beschreibungstext, der mittels unserer getParagraph Funktion verarbeitet wurde. Diese Funktionalität ermöglicht es den Nutzern, schnell und effizient, eine Zusammenfassung des Projekts zu erhalten, ohne sich durch längere Texte klicken zu müssen, wodurch das Spendenverfahren erleichtert und benutzerfreundlicher gestaltet wird.

Für die Entwicklung und Implementierung dieses Projekts arbeiten wir mit Magento 2.

So sieht die Funktion aus:

 public function getParagraph($number, $string)
    {
        $index = $number-1;

        $matches = [];

        if(!preg_match_all('#<p(.*?)>(.*?)<\/p>#', $string ?? '
 

























', $matches)) {}
          //  throw new \Magento\Framework\Validator\Exception('No paragraphs found');

        $matches = $matches[2];
        if(!array_key_exists($index, $matches)) {

        }
            //throw new Exception("Only ".count($matches)." were found, you requested number {$number}");
        // substr -Funktion zum Kürzen von Text
        if (!isset($matches[$index])) {$matches[$index]='';}
            $shortenedText = substr($matches[$index], 0, 200) . '...';
            return $shortenedText;
    }

Aber wie funktioniert der Code eigentlich?

• Parameterannahme: Die Funktion nimmt zwei Parameter entgegen:
  • $number: Dies ist die Nummer des Paragrafen, den Sie abrufen möchten.
  • $string: Dies ist der HTML-String, der die Paragrafen enthält.
• Paragrafen-Indizierung:
  • Sie passt die $number an einen nullbasierten Index an, indem sie 1 subtrahiert. Dies macht sie kompatibel mit der Array-Indizierung in PHP.
• Matching
  • Die Funktion verwendet den regulären Ausdruck preg_match_all('#<p(.*?)>(.*?)</p>#', $string ?? '<p></p>', $matches), um alle Paragrafen (<p>...</p>) im Eingabestring zu finden.
• Abruf und Kürzung des Paragrafen
  • Es wird überprüft, ob der Paragraf in den Ergebnissen existiert, indem array_key_exists($index, $matches) verwendet wird. Existiert der Paragraf nicht, wird $matches[$index] auf einen leeren String gesetzt, um Fehler zu vermeiden.
  • Anschließend wird der Text des gefundenen Paragrafen auf die ersten 200 Zeichen gekürzt und mit Ellipsen ... ergänzt.

Visualisierung im Frontend

Sobald Nutzer mit der Maus über eine Projektoption navigieren, erscheint eine informative Overlay-Box direkt über dem Hintergrundbild. Der Text in dieser Box ist präzise auf maximal 200 Zeichen begrenzt, entsprechend der Funktionsweise unserer getParagraph-Funktion.

Unsere Internetagentur in München, Econcess, legt großen Wert auf innovative und benutzerfreundliche Lösungen, um eine breite Zielgruppe zu erreichen. Wenn Sie Interesse an individuellen Lösungen für Ihre Webprojekte haben, kontaktieren Sie uns gerne. Wir bieten Ihnen professionelle Unterstützung bei der Umsetzung Ihrer digitalen Vorhaben, insbesondere in den Bereichen Code und Programmierung.