Comment définir un symbole de devise avant un champ d'article unique ?

Introduction

Souhaitez-vous placer un symbole de devise devant un champ de paiement d'un article unique? Par défaut, lorsque vous utilisez ce champ et que le type d'élément est défini par l 'utilisateur, aucun symbole de devise n'est affiché.

Cependant, dans ce tutoriel, nous allons vous montrer comment vous pouvez y parvenir à l'aide d'un petit script.

Création du formulaire

Pour commencer, créez un nouveau formulaire et ajoutez vos champs.

Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter cette documentation utile.

Définition du type d'élément

Une fois que vous avez ajouté les autres champs à votre formulaire, assurez-vous d'ajouter le champ de formulaire Article unique qui se trouve sous les champs de paiement dans le générateur de formulaires. Une fois ajouté, définissez le type d'élément comme étant défini par l'utilisateur.

Ajout du snippet

Maintenant que les champs sont définis, il est temps d'ajouter l'extrait à votre site. Si vous avez besoin d'aide pour savoir comment et où ajouter des snippets à votre site, veuillez consulter ce tutoriel.

/**
 * Set a currency symbol in the Single Item payment field
 *
 * @link https://wpforms.com/developers/how-to-set-a-currency-symbol-before-a-single-item-field/
 */

function wpf_add_dollar_symbol_to_singleitem() {
    ?>
    <script>
      document.addEventListener( 'DOMContentLoaded', function() {
		  
		// Look for the form ID 3382 and the field ID 17
        var inputElement = document.querySelector( '#wpforms-3382-field_17' );
		  
		// Add left padding to create space for the dollar symbol
        inputElement.style.paddingLeft = '1em'; 
		  
		// Set background position
        inputElement.style.backgroundPosition = 'left center'; 
		  
		// Set background repeat
        inputElement.style.backgroundRepeat = 'no-repeat'; 
        
		// Define the desired padding size
        var paddingSize = '5px'; 
		  
		// dollar symbol svg
        var backgroundImage = 'url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'14\' height=\'14\' viewBox=\'0 0 12 12\'%3E%3Ctext x=\'' + paddingSize + '\' y=\'10\' font-size=\'14\' fill=\'%23000\'%3E%24%3C/text%3E%3C/svg%3E")';
		  
		// Set background image with the dollar symbol and padding
        inputElement.style.backgroundImage = backgroundImage; 
		  
      });
    </script>
    <?php
    }
    add_action('wpforms_wp_footer_end', 'wpf_add_dollar_symbol_to_singleitem', 30);

Ce script recherchera l'ID du formulaire 3382 et l'ID du champ 17 et le placera ainsi qu'une icône SVG pour le symbole du dollar ($) au début du champ. Les styles CSS appliqués dans ce script sont faciles à adapter et à modifier selon vos spécifications. Pour en savoir plus sur les images SVG, veuillez consulter la documentation du W3C.

Désormais, lorsque nous affichons le formulaire, nous pouvons voir le symbole de la devise à l'intérieur du champ.

C'est tout ce dont vous avez besoin pour définir un symbole de devise dans un champ de paiement d'un article unique. Souhaitez-vous fixer un montant minimum dans un champ de paiement d'un article unique? Consultez le tutoriel Comment définir un montant minimum pour un champ de prix.

En rapport

Référence de l'action : wpforms_wp_footer_end