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

Introduction

Souhaitez-vous définir un symbole de devise avant un champ de paiement Article unique ? Par défaut, lorsque vous utilisez ce champ et que le Type d'article est défini sur Défini par l'utilisateur, aucun symbole de devise n'est affiché.

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

Création de votre 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'article

Une fois que vous avez ajouté vos autres champs à votre formulaire, assurez-vous d'ajouter le champ de formulaire Article unique qui se trouve sous les Champs de paiement dans le constructeur de formulaire. Une fois ajouté, définissez le Type d'article sur Défini par l'utilisateur.

Ajout du snippet

Maintenant que les champs sont configurés, il est temps d'ajouter le fragment de code à votre site. Pour toute aide sur comment et où ajouter des fragments de code à 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 de formulaire 3382 et l'ID de champ 17 et placera ainsi qu'il stylisera 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 W3C.

Maintenant, lorsque nous visualisons le formulaire, nous pouvons voir le symbole de devise à l'intérieur du champ.

Et c'est tout ce dont vous avez besoin pour définir un symbole de devise sur un champ de paiement Article unique. Souhaitez-vous définir un montant minimum sur un champ de paiement Article unique ? Consultez le tutoriel sur Comment définir un montant minimum pour un champ de prix.

Articles associés

Référence d’action : wpforms_wp_footer_end