CodeNewbie Community 🌱

Wijn
Wijn

Posted on

Simple Wine filter for WordPress

Met deze Wine Filter plugin kunnen klanten eenvoudig verschillende wijnen filteren op type (rood, wit, rosé) en land (Frankrijk, Italië, Spanje, Kroatië etc.). Voeg simpelweg de shortcode [wine_filter] toe aan een pagina of bericht om een interactief filterformulier weer te geven.

Deze plugin verwerkt de filteraanvragen via AJAX, waardoor de resultaten direct op de pagina worden bijgewerkt zonder herladen. Perfect voor wijnwinkels die hun klanten een gebruiksvriendelijke manier willen bieden om hun assortiment te verkennen.

  1. Maak een nieuwe map voor je plugin en noem deze bijvoorbeeld wine-filter.
  2. Maak een nieuw PHP-bestand in deze map, bijvoorbeeld wine-filter.php, en voeg de volgende code toe:
<?php
/**
 * Plugin Name: Wine Filter
 * Description: Een plugin waarmee klanten verschillende wijnen kunnen filteren.
 */

// Voorkom directe toegang tot het bestand
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

// Voeg een shortcode toe voor het tonen van de wijnfilter
function wine_filter_shortcode() {
    ob_start(); ?>

    <form id="wine-filter-form">
        <label for="wine-type">Type wijn:</label>
        <select id="wine-type" name="wine-type">
            <option value="all">Alle</option>
            <option value="red">Rood</option>
            <option value="white">Wit</option>
            <option value="rose">Rosé</option>
        </select>

        <label for="wine-country">Land:</label>
        <select id="wine-country" name="wine-country">
            <option value="all">Alle</option>
            <option value="france">Frankrijk</option>
            <option value="italy">Italië</option>
            <option value="spain">Spanje</option>
            <option value="spain">Kroatië</option>
        </select>

        <button type="submit">Filter</button>
    </form>

    <div id="wine-results"></div>

    <script>
    document.getElementById('wine-filter-form').addEventListener('submit', function(event) {
        event.preventDefault();

        var wineType = document.getElementById('wine-type').value;
        var wineCountry = document.getElementById('wine-country').value;

        var data = {
            action: 'filter_wines',
            wine_type: wineType,
            wine_country: wineCountry
        };

        jQuery.post(ajaxurl, data, function(response) {
            document.getElementById('wine-results').innerHTML = response;
        });
    });
    </script>

    <?php return ob_get_clean();
}
add_shortcode('wine_filter', 'wine_filter_shortcode');

// Verwerk de AJAX-aanvraag voor het filteren van wijnen
function filter_wines() {
    $wine_type = sanitize_text_field( $_POST['wine_type'] );
    $wine_country = sanitize_text_field( $_POST['wine_country'] );

    // Dit is een voorbeeldarray met wijnen. In een echte plugin haal je dit waarschijnlijk uit de database.
    $wines = [
        ['name' => 'Merlot', 'type' => 'red', 'country' => 'france'],
        ['name' => 'Chardonnay', 'type' => 'white', 'country' => 'france'],
        ['name' => 'Chianti', 'type' => 'red', 'country' => 'italy'],
        ['name' => 'Prosecco', 'type' => 'white', 'country' => 'italy'],
        ['name' => 'Rioja', 'type' => 'red', 'country' => 'spain'],
        ['name' => 'Cava', 'type' => 'rose', 'country' => 'spain'],
    ];

    $filtered_wines = array_filter($wines, function($wine) use ($wine_type, $wine_country) {
        $type_match = $wine_type === 'all' || $wine['type'] === $wine_type;
        $country_match = $wine_country === 'all' || $wine['country'] === $wine_country;
        return $type_match && $country_match;
    });

    if (!empty($filtered_wines)) {
        foreach ($filtered_wines as $wine) {
            echo '<p>' . esc_html($wine['name']) . ' (' . esc_html($wine['type']) . ' - ' . esc_html($wine['country']) . ')</p>';
        }
    } else {
        echo '<p>Geen wijnen gevonden.</p>';
    }

    wp_die();
}
add_action('wp_ajax_filter_wines', 'filter_wines');
add_action('wp_ajax_nopriv_filter_wines', 'filter_wines');

Enter fullscreen mode Exit fullscreen mode

Instructies voor gebruik:

  • Installeer en activeer de plugin door de map wine-filter te uploaden naar de wp-content/plugins directory en vervolgens de plugin te activeren via het WordPress admin dashboard.
  • Voeg de shortcode [wine_filter] toe aan een pagina of bericht waar je de wijnfilter wilt weergeven.

Met deze plugin kunnen gebruikers wijnen filteren op type en land. Je kunt de array met wijnen vervangen door een dynamische query naar een database of een andere gegevensbron om een meer geavanceerde oplossing te implementeren.

Top comments (0)