WC Vendors tiene una clase de asistente de formularios que permite generar el frontend a partir de campos definidos. Estos se utilizan en todos los formularios proporcionados por WC Vendors Pro. Pueden ser metadatos personalizados o campos de metadatos existentes de plugins de terceros. Todos los campos del formulario se definen mediante una llamada estática a la clase de asistente de formularios y el análisis de una matriz de opciones. Se proporcionará todo el código de ejemplo para que el campo funcione, incluida la definición del campo, el guardado del campo y su visualización en un formulario relevante.
Todos los formularios del frontend admiten la captura y el almacenamiento automáticos de campos de metadatos personalizados si utilizan un prefijo predefinido para la clave de metadatos relevante para el formulario que desea personalizar. A menos que tenga una razón para definir sus claves de metadatos con nombre, se recomienda encarecidamente que utilice nuestro código integrado automático para guardar sus nuevos campos de formulario.
Campos Soportados
Hay varios campos diferentes soportados con el asistente de formularios que facilitan la generación de campos de formularios dentro de nuestro frontend. Todos los formularios en WC Vendors Pro utilizan este sistema para generar los campos de formularios en el frontend. Hay algunos campos requeridos para generar un campo, al tiempo que se proporcionan campos opcionales que brindan flexibilidad sobre lo que se muestra.
Campos del Asistente de Formularios
- Entrada (texto, oculto, casilla de verificación)
- Área de Texto
- Seleccionar
- Select2
- Selección anidada
- Selección de País
- Botón de envío
- Cargador de Archivos
Tenga en cuenta
Las siguientes definiciones de código son solo ejemplos, y tendría que cambiar las muestras de código para reflejar los valores que necesita.
Campo de entrada
WCVendors_Pro_Form_Helper::input()
Este tipo de campo se utiliza para generar un campo de texto estándar, un campo de texto oculto o una casilla de verificación. Solo se necesitan tres configuraciones para generar el campo de entrada, mientras que las configuraciones opcionales le brindan flexibilidad y control sobre una variedad de opciones diferentes. La siguiente tabla describe los diversos atributos disponibles al crear un campo de entrada. Estos se definen como una matriz de atributos, donde el atributo definido es la clave de la matriz y el valor es la salida deseada.
| Configuración | Requerido | Descripción |
| post_id | sí | Este es el id de la publicación o producto con el que desea interactuar. |
| id | sí | Esta es la clave de metadatos o campo de base de datos correspondiente |
| valor | no | Este es el valor de la base de datos; si no se define, se utiliza el id para llamar a get_post_meta() internamente |
| etiqueta | no | Esta es la etiqueta que se muestra en la página |
| clase | no | Este es el código HTML que define las etiquetas de apertura para el contenedor envolvente |
| marcador de posición | no | Este es el texto marcador de posición que se muestra |
| clase_envolvente | no | Esta es la clase para el contenedor envolvente |
| inicio_envolvente | no | Este es el código HTML que define las etiquetas de cierre para el contenedor envolvente |
| fin_envolvente | no | Este es el tipo de campo: texto (predeterminado), oculto, casilla de verificación |
| valor_cb | no | Este es el valor de la casilla de verificación, requerido solo si has definido el tipo como casilla de verificación |
| tipo | no | Este es el tipo de campo: texto (predeterminado), oculto, casilla de verificación |
| mostrar_etiqueta | no | Esto te permite mostrar y ocultar la etiqueta para la entrada |
Campo de texto
No tienes que especificar el atributo tipo en los argumentos, ya que este es el tipo de campo predeterminado. El siguiente código es un ejemplo de una entrada de texto que se está definiendo, esto muestra el título del producto que ves en todos nuestros formularios de producto. Un campo de texto es el tipo de entrada predeterminado, por eso no tienes que especificar el atributo de tipo para este.
Ejemplo de campo de texto
WCVendors_Pro_Form_Helper::input( array( 'post_id' => $post_id, 'id' => 'post_title', 'label' => __( 'Product Name', 'wcvendors-pro' ), 'value' => $product_title, ) );
Campo oculto
Los campos ocultos se utilizan en los formularios para rastrear y almacenar información con tu formulario cuando no requieres la entrada del usuario. Hay momentos en que las integraciones con complementos de terceros requerirán este tipo de campo. Este tipo de campo también se puede usar si deseas codificar un valor para tus vendedores, como el precio o las categorías.
Ejemplo de campo oculto
WCVendors_Pro_Form_Helper::input( array( 'post_id' => $post_id, 'type' => 'hidden', 'id' => 'post_id', 'value' => $post_id ) );
Casilla de verificación
Las casillas de verificación se utilizan en varios formularios. Para definir una casilla de verificación, usa la siguiente definición. Debido a cómo se generan las casillas de verificación, cuando la casilla de verificación se desmarca después de haber estado marcada previamente, se necesita un paso adicional que requiere enganchar la acción de guardar de la página de configuración o la acción de guardar del producto para verificar si el valor no está allí para eliminarlo.
Ejemplo de campo de casilla de verificación
add_action( 'wcvendors_settings_after_seller_info', 'checkbox_check' );
function checkbox_check(){
$key = '_wcv_custom_settings_checkbox3';
$value = get_user_meta( get_current_user_id(), $key, true );
WCVendors_Pro_Form_Helper::input( apply_filters( $key, array(
'id' => $key,
'label' => __( 'Fairtrade', 'wcvendors-pro' ),
'type' => 'checkbox',
'desc_tip' => true,
'value' => $value,
'description' => __('Check this box if you are fairtrade.', 'wcvendors-pro'),
) )
);
}
function fairtrade( $vendor_id ) {
if ( ! isset( $_POST[ '_wcv_custom_settings_checkbox3' ] ) ){
delete_user_meta( $vendor_id, '_wcv_custom_settings_checkbox3' );
}
}
add_action ('wcv_pro_store_settings_saved','fairtrade');
Área de texto
WCVendors_Pro_Form_Helper::textarea()
El campo de área de texto te permite crear campos de área de texto en varios formularios. La siguiente tabla describe los diversos atributos disponibles al crear un campo de área de texto. Estos se definen como una matriz de atributos, donde el atributo definido es la clave de la matriz y el valor es la salida deseada.
| Configuración | Requerido | Descripción |
| post_id | sí | Este es el id de la publicación o producto con el que desea interactuar. |
| id | sí | Esto establecerá la clase CSS, deja un espacio entre clases para especificar varias |
| valor | no | Este es el valor de la base de datos; si no se define, se utiliza el id para llamar a get_post_meta() internamente |
| etiqueta | no | Esta es la etiqueta que se muestra en la página |
| clase | no | Este es el código HTML que define las etiquetas de apertura para el contenedor envolvente |
| marcador de posición | no | Este es el texto marcador de posición que se muestra |
| columnas | no | El número de columnas que tendrá el área de texto |
| filas | no | El número de filas que tendrá el área de texto |
| inicio_envolvente | no | Este es el código HTML que define las etiquetas de cierre para el contenedor envolvente |
| fin_envolvente | no | Esto establecerá la clase CSS, y dejará un espacio entre clases para especificar varias |
| estilo | no | La etiqueta de estilo |
Ejemplo de campo de área de texto
WCVendors_Pro_Form_Helper::textarea( apply_filters( 'wcv_product_description', array( 'post_id' => $post_id, 'id' => 'post_content', 'label' => __( 'Product description', 'wcvendors-pro' ), 'value' => $product_description, 'placeholder' => __( 'Please add a full description of your product here', 'wcvendors-pro' ), 'custom_attributes' => $custom_attributes, ) ) );
Seleccionar
WCVendors_Pro_Form_Helper::select()
El campo de selección te permite crear un menú desplegable simple especificando las opciones o la taxonomía para poblar automáticamente desde el backend de WordPress.
Ejemplo de campo de selección
WCVendors_Pro_Form_Helper::select( array( 'post_id' => $post_id, 'id' => '_download_type', 'class' => 'select', 'label' => __( 'Download Type', 'wcvendors-pro' ), 'desc_tip' => 'true', 'description' => sprintf( __( 'Choose a download type - this controls the <a href="%s">http://schema.org</a>.', 'wcvendors-pro' ), 'http://schema.org/' ), 'options' => array( '' => __( 'Standard Product', 'wcvendors-pro' ), 'application' => __( 'Application/Software', 'wcvendors-pro' ), 'music' => __( 'Music', 'wcvendors-pro' ) ), // 'custom_attributes' => $custom_attributes, ) );
Select2
WCVendors_Pro_Form_Helper::select2()
El campo select2 proporciona una selección mejorada que ofrece más usabilidad y opciones para seleccionar varios valores. Esto se puede usar para definir tus propias opciones como en el ejemplo de selección anterior, o para conectarse a una taxonomía definida como en el ejemplo a continuación. Utiliza el popular framework select2 para lograr esto.
Ejemplo de campo Select2
WCVendors_Pro_Form_Helper::select2( array( 'post_id' => $post_id, 'id' => 'product_cat[]', 'taxonomy' => 'product_cat', 'class' => 'category-select2', 'show_option_none' => $show_option_none, 'taxonomy_args' => array( 'hide_empty' => 0, 'orderby' => 'order', 'exclude' => $exclude, ), 'label' => ( $multiple ) ? __( 'Categories', 'wcvendors-pro' ) : __( 'Category', 'wcvendors-pro' ), ) );
Cargador de Archivos
WCVendors_Pro_Form_Helper::file_uploader()
El ayudante de formularios proporciona un cargador de archivos básico que te permite agregar un solo archivo por entrada al formulario. Esto es útil si necesitas agregar archivos adicionales a un producto o a la tienda. Se admiten varios formatos de archivo
- Imagen
- Documento
- Audio
- Video
Las extensiones de archivo para los formatos de archivo anteriores se determinan según los tipos de archivo que tu instalación de WordPress permite. Si no defines el tipo de archivo para el segundo argumento, entonces el tipo de archivo predeterminado es 'imagen'
Ejemplo de campo de carga de archivos de imagen
function wcv_image_uploader( ){
echo '<hr />';
echo '<h3>Image Uploader</h3>';
$value = get_user_meta( get_current_user_id(), '_wcv_custom_settings_image_example', true );
WCVendors_Pro_Form_Helper::file_uploader( array(
'id' => '_wcv_custom_settings_image_example',
'header_text' => __('Image uploader', 'wcvendors-pro' ),
'add_text' => __('Add image file', 'wcvendors-pro' ),
'remove_text' => __('Remove image file', 'wcvendors-pro' ),
'image_meta_key' => '_wcv_custom_settings_image_example',
'save_button' => __('Add image file', 'wcvendors-pro' ),
'window_title' => __('Select an Image', 'wcvendors-pro' ),
'value' => $value
), 'image'
);
}
Ejemplo de salida de código
Ejemplo de campo de carga de archivos de documento
function wcv_doc_uploader( ){
echo '<hr />';
echo '<h3>Document Uploader</h3>';
$value = get_user_meta( get_current_user_id(), '_wcv_custom_settings_doc_example', true );
WCVendors_Pro_Form_Helper::file_uploader( array(
'id' => '_wcv_custom_settings_doc_example',
'header_text' => __('Document uploader', 'wcvendors-pro' ),
'add_text' => __('Add document', 'wcvendors-pro' ),
'remove_text' => __('Remove document', 'wcvendors-pro' ),
'file_meta_key' => '_wcv_custom_settings_doc_example',
'save_button' => __('Add document', 'wcvendors-pro' ),
'window_title' => __('Select a document', 'wcvendors-pro' ),
'value' => $value
), 'document'
);
}
Ejemplo de salida de código
Ejemplo de campo de carga de archivos de audio
function wcv_audio_uploader( ){
echo '<hr />';
echo '<h3>Audio Uploader</h3>';
$value = get_user_meta( get_current_user_id(), '_wcv_custom_settings_audio_example', true );
WCVendors_Pro_Form_Helper::file_uploader( array(
'id' => '_wcv_custom_settings_audio_example',
'header_text' => __('Audio uploader', 'wcvendors-pro' ),
'add_text' => __('Add audio', 'wcvendors-pro' ),
'remove_text' => __('Remove audio', 'wcvendors-pro' ),
'file_meta_key' => '_wcv_custom_settings_audio_example',
'save_button' => __('Add audio', 'wcvendors-pro' ),
'window_title' => __('Select audio', 'wcvendors-pro' ),
'value' => $value
), 'audio'
);
}
Ejemplo de salida de código
Ejemplo de campo de carga de archivos de video
function wcv_video_uploader( ){
echo '<hr />';
echo '<h3>Video Uploader</h3>';
$value = get_user_meta( get_current_user_id(), '_wcv_custom_settings_video_example', true );
WCVendors_Pro_Form_Helper::file_uploader( array(
'id' => '_wcv_custom_settings_video_example',
'header_text' => __('Video uploader', 'wcvendors-pro' ),
'add_text' => __('Add video', 'wcvendors-pro' ),
'remove_text' => __('Remove video', 'wcvendors-pro' ),
'file_meta_key' => '_wcv_custom_settings_video_example',
'save_button' => __('Add video', 'wcvendors-pro' ),
'window_title' => __('Select video', 'wcvendors-pro' ),
'value' => $value
), 'video'
);
}
Ejemplo de salida de código
Guardado automático de campos
Para aprovechar nuestra función de guardado automático de campos, necesitarás definir tus claves de metadatos personalizadas con nuestros prefijos predefinidos. Todos los prefijos que comienzan con un guion bajo ('_') se ocultan del formulario de edición en el panel de administración de WordPress. Si necesitas que el campo se muestre en el backend para que los administradores lo editen, omite el guion bajo del prefijo.
¿Qué significa esto? Significa que si defines tu campo de formulario y comienzas el id con el prefijo relevante a continuación, el controlador del formulario guardará automáticamente la clave de metadatos.
Prefijos de tipo de campo disponibles
| Nombre del formulario | Nombre del prefijo | Ejemplo |
| Producto | _wcv_custom_product_ | _wcv_custom_product_ingredients |
| Producto | wcv_custom_product_ | wcv_custom_product_delivery_time |
| Configuración y registro | _wcv_custom_settings_ | _wcv_custom_settings_bankname |
| Configuración y registro | wcv_custom_settings_ | wcv_custom_settings_bankname |
| Cupón | _wcv_coupon_post_meta_ | _wcv_coupon_post_meta_newfield |
Ejemplo de autoguardado de campo de producto
WCVendors_Pro_Form_Helper::input( array( 'post_id' => $object_id, 'id' => '_wcv_custom_product_ingredients', 'label' => __( 'Ingredients', 'wcvendors-pro' ), 'placeholder' => __( 'Ingredients', 'wcvendors-pro' ), 'desc_tip' => 'true', 'description' => __( 'The product ingredients', 'wcvendors-pro' ), ) );
Ejemplo de autoguardado de campo de formulario de configuración y registro
add_action( 'wcvendors_settings_after_seller_info', 'checkbox_check' );
function checkbox_check(){
$key = '_wcv_custom_settings_checkbox3';
$value = get_user_meta( get_current_user_id(), $key, true );
WCVendors_Pro_Form_Helper::input( apply_filters( $key, array(
'id' => $key,
'label' => __( 'Fairtrade', 'wcvendors-pro' ),
'type' => 'checkbox',
'desc_tip' => true,
'value' => $value,
'description' => __('Check this box if you are fairtrade.', 'wcvendors-pro'),
) )
);
}
Esto funciona para cualquier tipo de campo que no sea una selección múltiple.
Guardado de taxonomías
Si ha definido una taxonomía personalizada, admitimos el guardado automático de estas. Todo lo que tiene que hacer es definir el ID del campo con el mismo formato que los campos individuales. El nombre de la taxonomía seguirá siendo el que definió al registrar la taxonomía. Solo necesita usar estos prefijos para los nombres de los campos en el formulario.
| Nombre del formulario | Nombre del prefijo | Ejemplo |
| Producto | _wcv_custom_taxonomy_ | _wcv_custom_taxonomy_subjects |
| Producto | wcv_custom_taxonomy_ | wcv_custom_taxonomy_subjects |
Ejemplo de autoguardado de taxonomía de producto
El siguiente es un ejemplo de una taxonomía definida por el usuario.
WCVendors_Pro_Form_helper::select2( array(
'post_id' => $object_id,
'id' => '_wcv_custom_taxonomy_subjects[]',
'class' => 'select2',
'custom_tax' => true,
'label' => __('Subjects', 'wcvendors-pro'),
'show_option_none' => __('Select Subject(s)', 'wcvendors-pro'),
'taxonomy' => 'subjects',
'taxonomy_args' => array(
'hide_empty' => 0,
),
'custom_attributes' => array( 'multiple' => 'multiple' ),
)
);
Acciones
Cada entrada del formulario tiene una acción _before_ y _after_ que le permite engancharse al formulario antes o después de que se renderice el elemento. Todos los tipos de formulario definidos anteriormente proporcionan este acceso. El ID del campo se añade al final de las acciones para que pueda dirigirse a campos específicos definidos.
Acciones anteriores
| Campo | Acción |
| input | do_action( ‘wcv_form_input_before_’. $field[ ‘id’ ], $field ); |
| select | do_action( ‘wcv_form_select_before_’. $field[ ‘id’ ], $field ); |
| select2 | do_action( ‘wcv_form_select2_before_’. $field[ ‘id’ ], $field ); |
| nested_select | do_action( ‘wcv_form_nested_select_before_’. $field[ ‘id’ ], $field ); |
| textarea | do_action( ‘wcv_form_textarea_before_’. $field[ ‘id’ ], $field ); |
| product_media_uploader | do_action( ‘wcv_form_product_media_uploader_before_product_media_uploader’, $post_id ); |
| file_uploader | do_action( ‘wcv_form_file_uploader_before_’. $field[ ‘id’ ], $field ); |
| submit | do_action( ‘wcv_form_submit_before_’. $field[ ‘id’ ], $field ); |
| country_select2 | do_action( ‘wcv_form_country_select2_before_’. $field[ ‘id’ ], $field ); |
| wcv_terms_checklist | do_action( ‘wcv_form_wcv_terms_checklist_before_’. $field[ ‘id’ ], $field ); |
| custom_field | do_action( ‘wcv_form_custom_field_before_’. $field[ ‘id’ ], $field ); |
Acciones posteriores
| Campo | Acción |
| input | do_action( ‘wcv_form_input_after_’. $field[ ‘id’ ], $field ); |
| select | do_action( ‘wcv_form_select_after_’. $field[ ‘id’ ], $field ); |
| select2 | do_action( ‘wcv_form_select2_after_’. $field[ ‘id’ ], $field ); |
| nested_select | do_action( ‘wcv_form_nested_select_after_’. $field[ ‘id’ ], $field ); |
| textarea | do_action( ‘wcv_form_textarea_after_’. $field[ ‘id’ ], $field ); |
| product_media_uploader | do_action( ‘wcv_form_product_media_uploader_after_product_media_uploader’, $post_id ); |
| file_uploader | do_action( ‘wcv_form_file_uploader_after_’. $field[ ‘id’ ], $field ); = |
| submit | do_action( ‘wcv_form_submit_after_’. $field[ ‘id’ ], $field ); |
| country_select2 | do_action( ‘wcv_form_country_select2_after_’. $field[ ‘id’ ], $field ); |
| wcv_terms_checklist | do_action( ‘wcv_form_wcv_terms_checklist_after’. $field[ ‘id’ ], $field ); |
| custom_field | do_action( ‘wcv_form_custom_field_after_’. $field[ ‘id’ ], $field ); |
Ejemplo
Si conoce el ID del campo, puede engancharse a la acción. Por ejemplo, el ID del campo Título de la entrada es post_title, por lo tanto, las acciones antes y después serían las siguientes. A continuación, definiría la información a mostrar antes o después, con las funciones analizadas.
add_action( ‘wcv_form_input_before_post_title’, ‘add_field_before_post_title’ );
add_action( 'wcv_form_input_before_post_title', 'add_field_before_post_title' ); add_action( 'wcv_form_input_after_post_title', 'add_field_after_post_title');