Woocommerce Checkout -> Select mit "Suchfunktion"

[mriglu]

Hallo zusammen,

ich suche nach einer Lösung, um in meinem Online-Shop auf der Checkout-Seite eigene Felder anzeigen zu lassen.

Im Details:
Es soll eine Select-Auswahl sein, am besten mit "Suchfunktion". Der Besucher soll eine Eingabe machen und es werden die passenden Optionen angezeigt.

Bis jetzt habe ich folgenden Code in die functions.php eingefügt:
-----------------
add_action('woocommerce_after_order_notes', 'my_custom_checkout_field' );
function my_custom_checkout_field( $checkout ) {
echo '<div id="my_custom_checkout_field"><h2>' . __('Verein auswählen') . '</h2>';
woocommerce_form_field( 'my_field_name', array(
'type' => 'select',
'required' => 1,
'label' => __( 'Title', 'woocommerce-germanized' ),
'options' => apply_filters( 'woocommerce_gzd_title_options', array(
1 => __( 'Option 1', 'Auswahl' ),
2 => __( 'Option 2', 'Auswahl' ),
3 => __( 'Option 3', 'Auswahl' ) ) ),
'before' => 'first_name',
'group' => array( 'billing', 'shipping' ),
), $checkout->get_value( "my_field_name" ));
echo '</div>';
}
-------------
Das Problem: es ist nicht die gewünschte "Suchfunktion" bzw. Eingabe vorhanden (es werden sehr viele Optionen).

Der Code ist auch zusammengestückelt, da ich mich mit php eher wenig auskenne

Ein Plugin habe ich bereits ausprobiert, leider kommt es da zu Komplikationen.

Ich bedanke mich im Voraus und hoffe, dass sich jemand damit auskennt

Viele Grüße
Kevin

 

[lachender_engel]

Die von Dir gewünschte "Suchfunktion" nennt sich "autocomplete form" und wird nicht mit einem Pulldown sondern einem Text-Eingabefeld realisiert. Umsetzen kannst Du das unter anderem mi jQuery.
Weitere Ansätze dazu findest Du zum Beispiel auch hier.

 

[mriglu]

Hallo lachender_engel,

vielen Dank für Deine Antwort. Ich würde gern ein Dropdown + "Eingabefeld". Siehe Bild. Gibt es da auch eine Möglichkeit?

Vielen Dank.

 

[hub]

Moin,
du meinst den hier (select2)?

Gruß Ulli

 

[mriglu]

Hallo Ulli,

perfekt! Danach hab ich gesucht. Danke!

Leider bekomme ich es nicht eingebunden. Habe jetzt folgenden Code in die functions.php eingefügt:
----------------
add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );

function my_custom_checkout_field( $checkout ) {

echo '<div id="my_custom_checkout_field"><h2>' . __('My Field') . '</h2>';

woocommerce_form_field( 'my_field_name', array(
'type' => 'select',
'class' => array('select2'),
'label' => __('Fill in this field'),
'options' => apply_filters( 'woocommerce_gzd_title_options', array(
1 => __( 'Allgemeiner Spendentopf', 'Verein' ),
2 => __( 'Verein 1', 'woocommerce-germanized' ),
3 => __( 'Ms.', 'woocommerce-germanized' ) ) ),

), $checkout->get_value( 'my_field_name' ));

echo '</div>';

}
---------------------

Und die JS und CSS in den Footer eingefügt.

Es zeigt zwar das select an, aber nicht die Eingabefunktion von select2.

Hast Du event. einen Tipp für mich? Auf der Seite komme ich leider nicht ganz zurecht.

Vielen Dank.

Grüße
Kevin

 

[hub]

Moin,
erwischt . Von woocommerce habe ich null Ahnung. Wenn es nur um das Suchfeld geht, musst du dem Teil nur in irgendeiner Form mitteilen, ab wievielen Ergebnissen (Einträgen) es erscheinen soll.
In der Beschreibung sieht das so aus:

$('select').select2({
  minimumResultsForSearch: 20 // at least 20 results must be displayed
});

Also dort, wo du select2 deinem Div-Element zuweist legst du auch die Optionen fest. Eine der vielen ist das Minimum ab wievielen Ergebnissen die Suche angezeigt werden soll.
War es das, was du meinst?

 

[mriglu]

Ich bräuchte es an der Kasse. Dann müssen dann noch 2 zusätzliche "Hooks" eingefügt werden. Einer, der die Infos auch in der Bestellbestätigung anzeigen lässt und eins für die Bestellbestätigungsseite.

Da muss ich wohl noch ein wenig suchen

Vielen Dank für Deine Hilfe!

Schönen Sonntag noch.

Grüße
Kevin