1. Accueil
  2. Base de connaissances
  3. WC Vendors
  4. Personnalisation et développement avancés
  5. Personnalisation de modèle
  6. Assistant de formulaire

Assistant de formulaire

WC Vendors dispose d'une classe d'assistant de formulaire qui permet de générer le front-end à partir de champs définis. Ceux-ci sont utilisés sur tous les formulaires fournis par WC Vendors Pro. Il peut s'agir de métadonnées personnalisées ou de champs de métadonnées existants provenant de plugins tiers. Tous les champs de formulaire sont définis à l'aide d'un appel statique à la classe d'assistant de formulaire et en analysant un tableau d'options. Tout le code d'exemple pour faire fonctionner le champ sera fourni, y compris la définition du champ, la sauvegarde du champ et son affichage sur un formulaire pertinent.

Tous les formulaires front-end prennent en charge la capture et le stockage automatiques des champs de métadonnées personnalisés s'ils utilisent un préfixe prédéfini pour la clé de métadonnées pertinente pour le formulaire que vous souhaitez personnaliser. Sauf si vous avez une raison de définir vos clés de métadonnées nommées, il est fortement recommandé d'utiliser notre code intégré automatique pour enregistrer vos nouveaux champs de formulaire.

Champs pris en charge 

Plusieurs champs différents sont pris en charge par l'assistant de formulaire, ce qui facilite la génération de champs de formulaire dans notre front-end. Tous les formulaires de WC Vendors Pro utilisent ce système pour afficher les champs de formulaire sur le front-end. Il y a quelques champs requis pour générer un champ, tout en fournissant des champs facultatifs qui offrent une flexibilité quant à ce qui est affiché.

Champs de l'assistant de formulaire

  • Champ de saisie (texte, caché, case à cocher)
  • Zone de texte
  • Sélectionner
  • Select2
  • Sélection imbriquée
  • Sélection de pays
  • Bouton de soumission
  • Téléchargeur de fichiers

Veuillez noter

Les définitions de code suivantes ne sont que des exemples, et vous devrez modifier les exemples de code pour refléter les valeurs dont vous avez besoin.

Champ de saisie

WCVendors_Pro_Form_Helper::input()

Ce type de champ est utilisé pour afficher un champ de texte standard, un champ de texte caché ou une case à cocher. Il n'y a que trois paramètres requis pour afficher le champ de saisie, tandis que les paramètres facultatifs vous offrent flexibilité et contrôle sur une gamme d'options différentes. Le tableau suivant décrit les divers attributs disponibles lors de la création d'un champ de saisie. Ceux-ci sont définis comme un tableau d'attributs, où l'attribut défini est la clé du tableau et la valeur est la sortie souhaitée.

ParamètreRequisDescription
post_idouiC'est l'identifiant du post ou du produit avec lequel vous souhaitez interagir.
idouiCeci est la clé de métadonnées ou le champ de base de données correspondant
valeurnonC'est la valeur de la base de données, si elle n'est pas définie, l'id est utilisé pour appeler get_post_meta( ) en interne
labelnonC'est le label affiché sur la page
classenonCeci est le code HTML qui définit les balises d'ouverture pour le conteneur enveloppant
placeholdernonCeci est le texte de substitution qui est affiché
wrapper_classnonCeci est la classe pour le conteneur enveloppant
wrapper_startnonCeci est le code HTML qui définit les balises de fermeture pour le conteneur enveloppant
wrapper_endnonCeci est le type de champ : texte (par défaut), caché, case à cocher
cbvaluenonCeci est la valeur de la case à cocher, requise uniquement si vous avez défini le type comme case à cocher
typenonCeci est le type de champ : texte (par défaut), caché, case à cocher
show_labelnonCeci vous permet d'afficher et de masquer l'étiquette pour l'entrée

Champ de texte

Vous n'avez pas à spécifier l'attribut type dans les arguments, car c'est le type de champ par défaut. Le code suivant est un exemple de définition d'une entrée de texte, cela affiche le titre du produit que vous voyez sur tous nos formulaires de produit. Un champ de texte est le type d'entrée par défaut, c'est pourquoi vous n'avez pas à spécifier l'attribut de type pour celui-ci.

Exemple de champ de texte

WCVendors_Pro_Form_Helper::input( array( 
	 	'post_id' 			=> $post_id, 
	 	'id'	 			=> 'post_title', 
	 	'label' 			=> __( 'Product Name', 'wcvendors-pro' ),
	 	'value' 			=> $product_title, 
	)
);

Champ caché

Les champs cachés sont utilisés dans les formulaires pour suivre et stocker des informations avec votre formulaire lorsque vous n'avez pas besoin d'une entrée de l'utilisateur. Il y a des moments où les intégrations avec des plugins tiers nécessiteront ce type de champ. Ce type de champ peut également être utilisé si vous souhaitez coder en dur une valeur pour vos vendeurs, telle que le prix ou les catégories.

Exemple de champ caché

WCVendors_Pro_Form_Helper::input( array( 
		'post_id'		=> $post_id, 
		'type'			=> 'hidden', 
		'id' 			=> 'post_id', 
		'value'			=> $post_id
	)
);

Case à cocher

Les cases à cocher sont utilisées dans les différents formulaires. Pour définir une case à cocher, utilisez la définition suivante. En raison de la façon dont les cases à cocher sont générées, lorsque la case à cocher est décochée après avoir été précédemment cochée, une étape supplémentaire est nécessaire, qui nécessite de s'accrocher à l'action de sauvegarde de la page de paramètres ou de la sauvegarde du produit pour vérifier si la valeur n'est pas là pour la supprimer.

Exemple de champ de case à cocher

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');

Zone de texte

WCVendors_Pro_Form_Helper::textarea()

Le champ de zone de texte vous permet de créer des champs de zone de texte sur divers formulaires. Le tableau suivant décrit les différents attributs disponibles lors de la création d'un champ de zone de texte. Ceux-ci sont définis comme un tableau d'attributs, où l'attribut défini est la clé du tableau et la valeur est la sortie souhaitée.

ParamètreRequisDescription
post_idouiC'est l'identifiant du post ou du produit avec lequel vous souhaitez interagir.
idouiCela définira la classe CSS, laissez un espace entre les classes pour en spécifier plusieurs
valeurnonC'est la valeur de la base de données, si elle n'est pas définie, l'id est utilisé pour appeler get_post_meta( ) en interne
labelnonC'est le label affiché sur la page
classenonCeci est le code HTML qui définit les balises d'ouverture pour le conteneur enveloppant
placeholdernonCeci est le texte de substitution qui est affiché
colonnesnonLe nombre de colonnes que la zone de texte aura
lignesnonLe nombre de lignes que la zone de texte aura
wrapper_startnonCeci est le code HTML qui définit les balises de fermeture pour le conteneur enveloppant
wrapper_endnonCela définira la classe CSS, et laissera un espace entre les classes pour en spécifier plusieurs
stylenonLa balise style

Exemple de champ zone de texte

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,
						)
					)
				);

Sélectionner

WCVendors_Pro_Form_Helper::select( )

Le champ de sélection vous permet de créer une simple liste déroulante tout en spécifiant les options ou la taxonomie à peupler automatiquement à partir du backend WordPress.

Exemple de champ de sélection

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()

Le champ select2 fournit une sélection améliorée qui offre plus d'utilisabilité et d'options pour sélectionner plusieurs valeurs. Ceci peut être utilisé pour définir vos propres options comme l'exemple de sélection ci-dessus, ou pour se connecter à une taxonomie définie comme dans l'exemple ci-dessous. Ceci utilise le populaire framework select2 pour y parvenir.

Exemple de champ 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' ), 
		) 
);

Téléchargeur de fichiers

WCVendors_Pro_Form_Helper::file_uploader()

L'assistant de formulaire fournit un téléchargeur de fichiers de base qui vous permet d'ajouter un seul fichier par entrée au formulaire. Ceci est utile si vous avez besoin d'ajouter des fichiers supplémentaires à un produit ou au magasin. Plusieurs formats de fichiers sont pris en charge

  • Image
  • Document
  • Audio
  • Vidéo

Les extensions de fichiers pour les formats de fichiers ci-dessus sont déterminées en fonction des types de fichiers que votre installation WordPress autorise. Si vous ne définissez pas le type de fichier pour le deuxième argument, le type de fichier par défaut est 'image'

Exemple de champ de téléchargement de fichier image

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'
	);
}
Exemple de sortie de code

Exemple de champ de téléchargement de fichier document

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'
	);
}

Exemple de sortie de code

Exemple de champ de téléchargement de fichier 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'
	);
}

Exemple de sortie de code

Exemple de champ de téléchargement de fichier vidéo

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'
	);
}
Exemple de sortie de code

Sauvegardes automatiques des champs

Pour profiter de notre fonctionnalité de sauvegarde automatique des champs, vous devrez définir vos clés méta personnalisées avec nos préfixes prédéfinis. Tous les préfixes commençant par un « _ » sont masqués du formulaire de modification dans le tableau de bord WordPress. Si vous avez besoin que le champ soit affiché dans le backend pour que les administrateurs puissent le modifier, laissez l'underscore du préfixe.

Qu'est-ce que cela signifie ? Cela signifie que si vous définissez votre champ de formulaire et que vous commencez l'identifiant avec le préfixe pertinent ci-dessous, le contrôleur de formulaire enregistrera automatiquement la clé méta.

Préfixes de types de champs disponibles

Nom du formulaire Nom du préfixeExemple
Produit_wcv_custom_product__wcv_custom_product_ingredients
Produitwcv_custom_product_wcv_custom_product_delivery_time
Paramètres et inscription_wcv_custom_settings__wcv_custom_settings_bankname
Paramètres et inscriptionwcv_custom_settings_wcv_custom_settings_bankname
Coupon_wcv_coupon_post_meta__wcv_coupon_post_meta_newfield

Exemple de sauvegarde automatique de champ de produit

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' ), 
	) 
);

Exemple de sauvegarde automatique de champ de formulaire Paramètres et inscription 

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'),
		) )
	);
}

Cela fonctionne pour tout type de champ qui n'est pas une sélection multiple.

Sauvegardes de taxonomie

Si vous avez défini une taxonomie personnalisée, nous prenons en charge la sauvegarde automatique de celles-ci. Tout ce que vous avez à faire est de définir l'ID du champ avec le même format que les champs individuels. Le nom de la taxonomie sera toujours celui que vous avez défini lors de l'enregistrement de la taxonomie. Vous n'avez besoin d'utiliser ces préfixes que pour les noms de champs sur le formulaire.

Nom du formulaire Nom du préfixeExemple
Produit_wcv_custom_taxonomy__wcv_custom_taxonomy_subjects
Produitwcv_custom_taxonomy_wcv_custom_taxonomy_subjects
Exemple de sauvegarde automatique de taxonomie de produit

Ce qui suit est un exemple de taxonomie définie par l'utilisateur.

 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' ), 
		)
);

Actions

Chaque entrée de formulaire a une action _before_ et _after_ qui vous permet de vous connecter au formulaire avant ou après le rendu de l'élément. Tous les types de formulaires définis ci-dessus fournissent cet accès. L'ID du champ est ajouté à la fin des actions afin que vous puissiez cibler des champs spécifiques définis.

Actions avant

Champ Action
inputdo_action( ‘wcv_form_input_before_’. $field[ ‘id’ ], $field );
 sélectionnerdo_action( ‘wcv_form_select_before_’. $field[ ‘id’ ], $field );
select2 do_action( ‘wcv_form_select2_before_’. $field[ ‘id’ ], $field );
nested_selectdo_action( ‘wcv_form_nested_select_before_’. $field[ ‘id’ ], $field );
textareado_action( ‘wcv_form_textarea_before_’. $field[ ‘id’ ], $field );
product_media_uploaderdo_action( ‘wcv_form_product_media_uploader_before_product_media_uploader’, $post_id );
file_uploaderdo_action( ‘wcv_form_file_uploader_before_’. $field[ ‘id’ ], $field );
soumettredo_action( ‘wcv_form_submit_before_’. $field[ ‘id’ ], $field );
country_select2do_action( ‘wcv_form_country_select2_before_’. $field[ ‘id’ ], $field );
wcv_terms_checklistdo_action( ‘wcv_form_wcv_terms_checklist_before_’. $field[ ‘id’ ], $field );
custom_fielddo_action( ‘wcv_form_custom_field_before_’. $field[ ‘id’ ], $field );

Actions Après

ChampAction
inputdo_action( ‘wcv_form_input_after_’. $field[ ‘id’ ], $field );
 sélectionnerdo_action( ‘wcv_form_select_after_’. $field[ ‘id’ ], $field );  
select2 do_action( ‘wcv_form_select2_after_’. $field[ ‘id’ ], $field );
nested_selectdo_action( ‘wcv_form_nested_select_after_’. $field[ ‘id’ ], $field );
textareado_action( ‘wcv_form_textarea_after_’. $field[ ‘id’ ], $field );
product_media_uploaderdo_action( ‘wcv_form_product_media_uploader_after_product_media_uploader’, $post_id );
file_uploaderdo_action( ‘wcv_form_file_uploader_after_’. $field[ ‘id’ ], $field ); =
soumettredo_action( ‘wcv_form_submit_after_’. $field[ ‘id’ ], $field );
country_select2do_action( ‘wcv_form_country_select2_after_’. $field[ ‘id’ ], $field );
wcv_terms_checklistdo_action( ‘wcv_form_wcv_terms_checklist_after_’. $field[ ‘id’ ], $field );
custom_fielddo_action( ‘wcv_form_custom_field_after_’. $field[ ‘id’ ], $field );


Exemple

Si vous connaissez l’ID du champ, vous pouvez vous connecter à l’action. Par exemple, l’ID du champ Titre de l’article est post_title, par conséquent les actions avant et après seraient les suivantes. Vous définiriez alors les informations à afficher avant ou après, avec les fonctions analysées.

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');
Cet article vous a-t-il été utile ?

Articles liés

Besoin d'aide ?

Vous ne trouvez pas la réponse que vous cherchez ?
Contacter le support
Finalisez votre achat