Nic jin\u00e9ho pot\u0159ebovat nebudeme<\/p>\n\n\n\n
Do funkce musilda_eventpress_product_option si p\u0159id\u00e1me n\u00e1sleduj\u00edc\u00ed k\u00f3d:<\/p>\n\n\n\n
global $post;\n$min_participants = get_post_meta( $post->ID, '_min_participants', true );\nif ( empty( $min_participants ) ) {\n\t$min_participants = 1;\n}\n$max_participants = get_post_meta( $post->ID, '_max_participants', true );\nif ( empty( $max_participants ) ) {\n\t$max_participants = 1;\n}\n\nwoocommerce_wp_text_input(\n\tarray(\n\t\t'id' => '_min_participants',\n\t\t'value' => $min_participants,\n\t\t'label' => __( 'Minimal participants', 'musilda-eventpress' ),\n\t\t'placeholder' => __( '1', 'musilda-eventpress' ),\n\t\t'description' => __( 'Add minimum participants for event', 'musilda-eventpress' ),\n\t\t'type' => 'number',\n\t\t'custom_attributes' => array(\n\t\t\t'step' => '1',\n\t\t\t'min' => '1',\n\t\t),\n\t)\n);\nwoocommerce_wp_text_input(\n\tarray(\n\t\t'id' => '_max_participants',\n\t\t'value' => $max_participants,\n\t\t'label' => __( 'Maximal participants', 'musilda-eventpress' ),\n\t\t'placeholder' => __( '1', 'musilda-eventpress' ),\n\t\t'description' => __( 'Add maximal participants for event', 'musilda-eventpress' ),\n\t\t'type' => 'number',\n\t\t'custom_attributes' => array(\n\t\t\t'step' => '1',\n\t\t\t'min' => '1',\n\t\t),\n\t)\n);<\/code><\/pre>\n\n\n\nV\u00fdsledek:<\/p>\n\n\n\n![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2021\/11\/event-data.png\")
<\/a><\/figure>\n\n\n\nTo bylo to jednodu\u0161\u0161\u00ed, proto\u017ee jsme vyu\u017eili funkci woocommerce_wp_text_input a vygenerovali si pol\u00ed\u010dka. <\/p>\n\n\n\n
Te\u010f ale mus\u00edme p\u0159idat pole pro p\u0159id\u00e1n\u00ed v\u00fdb\u011bru data a \u010dasu kon\u00e1n\u00ed. WordPress sice v sob\u011b m\u00e1 jQuery a tak lze pou\u017e\u00edt jQuery modul dat pickup, ale j\u00e1 se posledn\u00ed dobou jQuery sna\u017e\u00edm vyh\u00fdbat, tak\u017ee pou\u017eiji https:\/\/bulma-calendar.onrender.com\/<\/a><\/p>\n\n\n\nAbych mohl knihovnu pou\u017e\u00edt, mus\u00edm nejprve soubory ulo\u017eit v pluginu a na\u010d\u00edst pomoc\u00ed enqueue:<\/p>\n\n\n\n
\/**\n * Add admin assets\n *\n *\/\nadd_action( 'admin_enqueue_scripts', 'eventpress_enqueue_admin_styles' );\nfunction eventpress_enqueue_admin_styles() {\n\t$current_screen = get_current_screen();\n\tif ( 'product' == $current_screen->id ) {\n\t\twp_enqueue_style( 'bulma-calendar', plugins_url( 'assets\/admin\/css\/bulma-calendar.min.css', __FILE__ ), array(), '1.0' );\n\t}\n}\nadd_action( 'admin_enqueue_scripts', 'eventpress_enqueue_admin_scripts' );\nfunction eventpress_enqueue_admin_scripts() {\n\t$current_screen = get_current_screen();\n\tif ( 'product' == $current_screen->id ) {\n\t\twp_enqueue_script( 'bulma-calendar', plugins_url( 'assets\/admin\/js\/bulma-calendar.min.js', __FILE__ ), array(), '1.0', true );\n\n wp_enqueue_script( 'event-admin', plugins_url( 'assets\/admin\/js\/main.js', __FILE__ ), array(), '1.0', true );\n\t}\n}<\/code><\/pre>\n\n\n\nDo funkce musilda_eventpress_product_option si za max participants input vlo\u017e\u00edme n\u00e1sleduj\u00edc\u00ed k\u00f3d pro input date pickeru:<\/p>\n\n\n\n
$event_start_date_time = get_post_meta( $post->ID, '_event_start_date_time', true );\nif ( empty( $event_start_date_time ) ) {\n\t$event_start_date_time = '';\n}\n\necho '<p class=\"form-field event_start_date_time\">\n\t<label for=\"event_start_date_time\">' . esc_html__( 'Event start date time', 'musilda-eventpress' ) . '<\/label>\n\t<input type=\"date\" class=\"short\" name=\"_event_start_date_time\" id=\"event_start_date_time\" value=\"' . esc_attr( $event_start_date_time ) . '\" maxlength=\"10\" \/>\n<\/p>';<\/code><\/pre>\n\n\n\nJako posledn\u00ed mus\u00edme do souboru main.js, kter\u00fd vlo\u017e\u00edme do slo\u017eky assets\/admin\/js, p\u0159id\u00e1me k\u00f3d:<\/p>\n\n\n\n
var eventStartDatTime = document.querySelector('#event_start_date_time');\nif ( eventStartDatTime ) {\n\tbulmaCalendar.attach( eventStartDatTime, {\n\t\ttype: 'datetime',\n\t\tdateFormat: 'dd.MM.yyyy',\n\t\tweekStart: 1\n\t});\n}<\/code><\/pre>\n\n\n\nTento k\u00f3d bude inicializovat datepicker, kter\u00fd bude vyvol\u00e1n pomoc\u00ed soubor\u016f bulma calendar, kter\u00e9 um\u00edst\u00edme do slo\u017eek assets\/admin\/js a assets\/admin\/css. V\u0161echny soubory najdete v commitu, kter\u00fd je odk\u00e1z\u00e1n na konci \u010dl\u00e1nku.<\/p>\n\n\n\n
Pokud jste ud\u011blali v\u0161e, jak jste m\u011bli, v\u00fdsledek bude vypadat takto:<\/p>\n\n\n\n![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2021\/11\/event-data-picker.png\")
<\/a><\/figure>\n\n\n\n