PHP function getParagraph with hover effect for extracting and shortening text

On the website of one of our clients, we integrated a donation feature into the checkout process that allows users to financially support various local or global environmental projects.

For each of these projects, we implemented a special feature: When users move their mouse over the layout box, a hover effect is activated. This displays an extracted and shortened paragraph from a more detailed description, processed using our getParagraph function. This functionality allows users to quickly and efficiently get a summary of the project without having to click through lengthy texts, making the donation process easier and more user-friendly.

We use Magento 2 for the development and implementation of this project.

This is what the function looks like:

 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 function for shortening text
    if (!isset($matches[$index])) {$matches[$index]='';}
        $shortenedText = substr($matches[$index], 0, 200) . '...';
        return $shortenedText;
}

But how does the code actually work?

• Parameter input: The function accepts two parameters:
  • $number: This is the number of the paragraph you want to retrieve.
  • $string: This is the HTML string containing the paragraphs.
• Paragraph indexing:
  • It adjusts $number to a zero-based index by subtracting 1. This makes it compatible with array indexing in PHP.
• Matching
  • The function uses the regular expression preg_match_all('#<p(.*?)>(.*?)</p>#', $string ?? '<p></p>', $matches) to find all paragraphs (<p>...</p>) in the input string.
• Retrieving and shortening the paragraph
  • It checks whether the paragraph exists in the results using array_key_exists($index, $matches). If the paragraph does not exist, $matches[$index] is set to an empty string to prevent errors.
  • The text of the found paragraph is then shortened to the first 200 characters and appended with Ellipses ...

Visualization in the frontend

As soon as users move their mouse over a project option, an informative overlay box appears directly over the background image. The text in this box is precisely limited to a maximum of 200 characters, according to the functionality of our getParagraph function.

Our web agency in Munich, Econcess, places great emphasis on innovative and user-friendly solutions to reach a broad target audience. If you are interested in customized solutions for your web projects, please feel free to contact us. We offer professional support in implementing your digital projects, particularly in the areas of coding and programming.