In Woocommerce konnte ich 2 benutzerdefinierte Dropdown-Listen auf der Checkout-Seite hinzufügen:
add_action('woocommerce_before_order_notes', 'wps_add_select_checkout_field');
function wps_add_select_checkout_field( $checkout) {
echo '<h2>'.__('Next Day Delivery').'</h2>';
woocommerce_form_field( 'City', array(
'type' => 'select',
'class' => array( 'wps-drop' ),
'label' => __( 'Delivery options' ),
'options' => array(
'blank' => __( 'Select a day part', 'wps' ),
'A' => __( 'A', 'wps' ),
'B' => __( 'B', 'wps' ),
'C' => __( 'C', 'wps' )
)
),
$checkout->get_value( 'City' ));
}
add_action('woocommerce_before_order_notes', 'wps_add_select_checkout1_field');
function wps_add_select_checkout1_field( $checkout1) {
//echo '<h2>'.__('Next Day Delivery').'</h2>';
woocommerce_form_field( 'Dis', array(
'type' => 'select',
'class' => array( 'wps-drop' ),
'label' => __( 'Delivery options' ),
'options' => array(
'blank' => __( 'Select a day part', 'wps' ),
'A' => __( 'ro', 'wps' ),
'B' => __( 'wa', 'wps' ),
'C' => __( 'da', 'wps' )
)
),
$checkout1->get_value( 'Dis' ));
}
//* Process the checkout
add_action('woocommerce_checkout_process', 'wps_select_checkout_field_process');
function wps_select_checkout_field_process() {
global $woocommerce;
// Check if set, if its not set add an error.
if ($_POST['City'] == "blank")
wc_add_notice( '<strong>Please select a day part under Delivery options</strong>', 'error' );
}
Ich möchte die dynamisch generieren Optionen der zweiten Dropdown-Liste, basierend auf dem ausgewählten <option>
aus der ersten Dropdown-Liste.
Beispiel was ich brauche:
- Wenn
<option>
“A” ist ausgewählt in der 1. Dropdown-Liste, Die 2. Dropdown-Liste zeigt dynamisch a Spezifisch Reihe von Optionen.
- Wenn
<option>
“C” ist ausgewählt in der 1. Dropdown-Liste, Die 2. Dropdown-Liste zeigt dynamisch a unterschiedlich Reihe von Optionen.
- Und so weiter …
Ist das möglich? Wo muss ich anfangen?
Jede Hilfe ist willkommen.
Ich habe Ihre beiden ersten Funktionen zusammengeführt, da sie denselben Hook verwenden.
In dieser zusammengeführten Funktion habe ich hinzugefügt:
- Die “erforderliche” Option für beide Felder.
- Zum Beispiel die Slugs für beide Felder geändert
"City"
Wirf einen Woocommerce-Fehler aus.
- verschiedene Sätze von “Options” -Arrays, die ich an Javascript übergebe (eine für jede verfügbare
<option>
im ersten Auswahlfeld).
- Einige jQuery-Codes, die den Satz von Optionen im zweiten Auswahlfeld basierend auf den ausgewählten dynamisch erstellen
<option>
des ersten Auswahlfeldes.
Ich habe die Bedingung für die etwas geändert If
Anweisung in der letzten Funktion.
Hier ist der überarbeitete Code:
// Add checkout custom select fields
add_action( 'woocommerce_before_order_notes', 'add_checkout_custom_fields', 20, 1 );
function add_checkout_custom_fields( $checkout) {
$domain = 'woocommerce'; // The domain slug
echo '<h2>'.__( 'Next Day Delivery', $domain ).'</h2>';
// First Select field (Master)
woocommerce_form_field( 'delivery_one', array(
'type' => 'select',
'label' => __( 'Delivery options one' , $domain),
'class' => array( 'form-row-wide' ),
'required' => true,
'options' => array(
'' => __( 'Please select a value', $domain ),
'A' => __( 'A', $domain ),
'B' => __( 'B', $domain ),
'C' => __( 'C', $domain ),
),
),
$checkout->get_value( 'delivery_one' ) );
// Default option value
$default_option2 = __( 'Please select a value', $domain );
// Dynamic select field options for Javascript/jQuery
$options_0 = array( '' => $default_option2 );
$options_a = array(
'' => $default_option2,
'D' => __( 'D', $domain ),
'E' => __( 'E', $domain ),
'F' => __( 'F', $domain ),
'G' => __( 'G', $domain ),
);
$options_b = array(
'' => $default_option2,
'H' => __( 'H', $domain ),
'I' => __( 'I', $domain ),
'J' => __( 'J', $domain ),
);
$options_c = array(
'' => $default_option2,
'K' => __( 'K', $domain ),
'L' => __( 'L', $domain ),
'M' => __( 'M', $domain ),
);
// Second Select field (Dynamic Slave)
woocommerce_form_field( 'delivery_two', array(
'type' => 'select',
'label' => __( 'Delivery options two', $domain ),
'class' => array( 'form-row-wide' ),
'required' => true,
'options' => $options_0,
),
$checkout->get_value( 'delivery_two' ) );
$required = esc_attr__( 'required', 'woocommerce' );
// jQuery code
?>
<script>
jQuery(function($){
var op0 = <?php echo json_encode($options_0); ?>,
opa = <?php echo json_encode($options_a); ?>,
opb = <?php echo json_encode($options_b); ?>,
opc = <?php echo json_encode($options_c); ?>,
select1 = 'select[name="delivery_one"]',
select2 = 'select[name="delivery_two"]';
// Utility function to fill dynamically the select field options
function dynamicSelectOptions( opt ){
var options="";
$.each( opt, function( key, value ){
options += '<option value="'+key+'">'+value+'</option>';
});
$(select2).html(options);
}
// 1. When dom is loaded we add the select field option for "A" value
// => Disabled (optional) — Uncomment below to enable
// dynamicSelectOptions( opa );
// 2. On live selection event on the first dropdown
$(select1).change(function(){
if( $(this).val() == 'A' )
dynamicSelectOptions( opa );
else if( $(this).val() == 'B' )
dynamicSelectOptions( opb );
else if( $(this).val() == 'C' )
dynamicSelectOptions( opc );
else
dynamicSelectOptions( op0 ); // Reset to default
});
});
</script>
<?php
}
// Check checkout custom fields
add_action( 'woocommerce_checkout_process', 'wps_check_checkout_custom_fields', 20 ) ;
function wps_check_checkout_custom_fields() {
// if custom fields are empty stop checkout process displaying an error notice.
if ( empty($_POST['delivery_one']) || empty($_POST['delivery_two']) ){
$notice = __( 'Please select a day part under Delivery options' );
wc_add_notice( '<strong>' . $notice . '</strong>', 'error' );
}
}
Der Code wird in die function.php-Datei Ihres aktiven untergeordneten Designs (aktives Design) eingefügt.
Dies ist ein voll funktionsfähiges und getestetes Beispiel.
Beispiel: Wenn “A” ausgewählt ist, zeigt die zweite Dropdown-Liste “ro”
– Asher A.
10. Februar 2018 um 21:20 Uhr
Danke. Wissen Sie, wo ich das Javascript und die ID im HTML hinzufügen kann?
– Asher A.
10. Februar 2018 um 22:12 Uhr