Créer un système de devis en ligne avec Woocommerce

Dans ce tutoriel, je serais mentionné tous les étapes pour créer un système de devis en ligne. Pour plusieurs commerçants, Ils préfèrent de mettre en ligne un catalogue de produits juste pour faire de la publicité et d’exposer leurs produits. L’objectif de ce petit tutoriel est de transformer Woocommerce en catalogue en ligne + un système de devis sans modifier les fonctionnalités intégrées dans le système.

La première étape :

Comme première étape on va faire une redirection de la page “checkout” vers notre page de devis en ligne. Cette redirection se fait avec une fonction dans le fichiers functions.php de Wordpress.

function custom_add_to_cart_redirect() { return ‘http://exemple.fr/order/';
}
add_filter( ‘woocommerce_get_checkout_url’, ‘custom_add_to_cart_redirect’ );

La deuxième étape :

Créer une page avec le même nom choisi dans la function de Wordpress.

La troisième étape :

Consiste à créer une template pour la page “Order” dans laquelle nous allons créer une formulaire qui permet la génération du devis.

Pour la template il suffit de créer un nouveau fichier php, je propose “commande.php” dans le même emplacement du fichiers fonctions.php

Chaque thème a plusieurs template comme page.php, tu peux copier le contenu du page.php vers commande.php mais il faut faire plusieurs modifications.

Il faut changer le nom du template ( au début de la page )

/*
Template Name: Commande
*/

Désactiver les commentaires

//comments_template();

Après le commantaire <! — START CONTENT → on va implémenter notre code du formulaire.

<form method=”post” action=”../email.php”> :

le traitement du formulaire sera faite dans un fichier séparé nommé “email.php”

<div class=”control-group”> <label class=”control-label” for=”name”>Name</label> <div class=”controls form-inline”> <input class=”span3" type=”text” placeholder=”First Name” name=”first” id=”first” required/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class=”span3" type=”text” placeholder=”Last Name” name=”last” id=”last” required/> </div> </div>

J’utilise Bootstrap 3 pour la création du formulaire car il assure la responsivité du contenu ainsi que le chargement du css et js Bootstrap est intégré dans mon thème Wordpress, Si votre thème de contient pas les éléments Bootstrap tu peux utiliser les balises HTML directement sans l’intégrations des classes CSS.

<div class=”control-group”> <label class=”control-label” for=”mail”>E-mail</label> <div class=”controls”> <input class=”span6" type=”email” placeholder=”exemple@exemple.com” name=”email” id=”email” required/> </div> </div>

J’insiste sur l’utilisation des attributs HTML5 comme dans notre cas l’attribut “required” pour assure que le champ ne reste pas vide de plus l’utilisation de type “email” pour garantir le format d’email.

<div class=”control-group”> <label class=”control-label” for=”telephone”>Tel</label> <div class=”controls”> <input class=”span6" type=”tel” name=”tel” id=”tel” required/> </div> </div>

Dans le champ Téléphone on peut utiliser type “tel”

<div class=”control-group”> <label class=”control-label” for=”shipping”>Shipping Address</label> <div class=”controls”> <input class=”span6" type=”text” name=”street” id=”street” placeholder=”Street Address” required/> <input class=”span4" type=”text” name=”city” id=”city” placeholder=”City” required/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class=”span2" type=”number” name=”zip” id=”zip” placeholder=”Zip Code” required/> <select class=”span6" name=”country” id=”country” required> <option>Belgium</option> <option>France</option> </select> </div> </div>

Pour l’adresse de livraison je propose l’usage de l’attribut type=”number” pour le Code Postal

Tous les champs précédents l’internaute a la responsabilité de le remplir avec pertinence, mais il y a des champs que doit être remplies automatiquement comme “la commande” et le “Total” pour cela il faut parser les variables de Woocommerce ainsi les valeurs.

Après la code HTML du formulaire on ouvre le php pour faire le traitement des variables de Woocommerce mais avant tous il est indispensable de faire l’appel du variable globale de woocommerce

global $woocommerce;

L’emplacement du déclaration est au début du code source.

<?php $items = $woocommerce->cart->get_cart();

Tous les valeurs nécessaire pour remplir le formulaire sont fournis par “cart du Woocommerce”

Je suggère l’usage de la balise <texarea> pour afficher la commande, donc j’utilise

echo “<div class=’control-group’><label class=’control-label’ for=’Order’>Order</label><div class=’controls’><textarea name=’order’ id=’order’ class=’span6' cols=’150' rows=’8' readonly>”;

Il est préférable d’ajouter l’attribut “readonly” qui permet la désactivation du textarea ce qui garantit le non-changement des valeurs du chariot dans notre formulaire

Généralement, l’internaute commande plusieurs produits, donc nous avons obligé d’utiliser un boucle

foreach($items as $item => $values) { $_product = $values[‘data’]->post;

Les valeurs stockés ont une relation avec post et Woocommerce en même temps.

echo “Product : “.$_product->post_title.’&#13;&#10;’;

cette ligne permet l’affichage du nom du produit

echo “SKU : “.$values[‘data’]->get_sku().’&#13;&#10;’;

cette ligne permet l’affichage du SKU du produit

echo “Quantity: “.$values[‘quantity’].’&#13;&#10;’;

cette ligne permet l’affichage la quantité commandée pour chaque produit

if ( !empty($values[‘variation’][‘attribute_color’]) ) : echo “Color : “.$values[‘variation’][‘attribute_color’].’&#13;&#10;’; endif;

Si votre produit est variable ( Variable Product Woocommerce), on peut extraire le contenu du variation. ( Couleur du produit dans ce exemple).

$price = get_post_meta($values[‘product_id’] , ‘_price’, true); echo “Unit Price: “.$price.”&#13;&#10;”;

ces deux lignes permettent l’affichage du prix unitaire pour chaque produit.

finalement on ferme le boucle et les balises HTML et donc la commande est bien affichée dans la zone de texte

echo “</textarea></div></div>”;

Pour le Total et le nombre des produits commandés on peut utiliser ces fonctions dans des input

<input class=”span3" type=”text” name=”witems” id=”witems” value=”<?php echo sprintf (_n( ‘%d item’, ‘%d items’, WC()->cart->cart_contents_count ), WC()->cart->cart_contents_count ); ?>” readonly>

<input class=”span3" type=”text” name=”wtotal” id=”wtotal” value=”<?php echo round(WC()->cart->cart_contents_total, 2); ?> &#128;” readonly>

Avec ces étapes le formulaire est bien remplie il faut juste ajouter le bouton du submit et fermer la balise form

<div class=”controls”> <button class=”btn btn-small btn-block” type=”submit”>Send Order</button> </div> </div> </form>

La quatrième étape :

Pour la page “order” il faut bien préciser le type du template, le nouveau type Commande sera affiché lors de la sélection du type de template ( Coté administration).

La cinquième étape :

la création du fichier “email.php” au niveau “root” : exemple.com/email.php , dans le même niveau du dossier wp-content

<?php
$subjectPrefix = ‘[Order via XXXX]’;
$emailTo = ‘your
@email.com’;
$note =’ * All prices are excluded VAT 21%, ex-works. Transportation cost available upon request.’;

On ouvre la condition :

if($_SERVER[‘REQUEST_METHOD’] == ‘POST’) {

$first = stripslashes(trim($_POST[“first”])); $last = stripslashes(trim($_POST[“last”])); $email = stripslashes(trim($_POST[‘email’])); $phone = stripslashes(trim($_POST[‘tel’])); $street = stripslashes(trim($_POST[‘street’])); $city = stripslashes(trim($_POST[‘city’])); $zip = stripslashes(trim($_POST[‘zip’])); $country = stripslashes(trim($_POST[‘country’])); $total = stripslashes(trim($_POST[‘wtotal’])); $items = stripslashes(trim($_POST[‘witems’])); $message = stripslashes(trim($_POST[‘order’])); $pattern = ‘/[\r\n]|Content-Type:|Bcc:|Cc:/i’;

Et on récupère les données du formulaire

if (preg_match($pattern, $first) || preg_match($pattern, $email)) { die(“Header injection detected”); } $emailIsValid = preg_match(‘/^[^0–9][A-z0–9._%+-]+([.][A-z0–9_]+)*[@][A-z0–9_]+([.][A-z0–9_]+)*[.][A-z]{2,4}$/’, $email);

On fait aussi quelques tests de validation et ensuite on va créer le corps du mail

if($first && $email && $emailIsValid && $message){ $subject = “$subjectPrefix”; $body = ‘<html><body>’; $body .= ‘<img style=”margin: 0 auto;” src=”http://exemple.fr/wp-content/uploads/2015/06/your-logo.png" alt=”Inspire LED Logo”/>’; $body .= ‘<table rules=”all” style=”border-color: #666;” cellpadding=”10">’; $body .= “<tr style=’background: #eee;’><td><strong>First Name:</strong> </td><td> $first</td></tr>”; $body .= “<tr><td><strong>Last Name:</strong> </td><td> $last</td></tr>”; $body .= “<tr style=’background: #eee;’><td><strong>Email:</strong> </td><td> $email</td></tr>”; $body .= “<tr><td><strong>Tel:</strong> </td><td> $phone</td></tr>”; $body .= “<tr style=’background: #eee;’><td><strong>Shipping Address:</strong> </td><td> $street — $city — $zip — $country</td></tr>”; $body .= “<tr><td><strong>Order</strong> </td><td> $message</td></tr>”; $body .= “<tr style=’background: #eee;’><td><strong>Total</strong> </td><td> $total | Items : $items</td></tr>”; $body .= “</table>”; $body .= “<h5 style=’text-align:center;’>$note</h5>”; $body .= “</body></html>”; $headers = ‘MIME-Version: 1.1’ . PHP_EOL; $headers .= ‘Content-type: text/html; charset=utf-8’ . PHP_EOL; $headers .= “From: $first $last <$email>” . PHP_EOL; $headers .= “Cc: $email” . PHP_EOL; $headers .= “Return-Path: $emailTo” . PHP_EOL; $headers .= “Reply-To: $email” . PHP_EOL; $headers .= “X-Mailer: PHP/”. phpversion() . PHP_EOL; mail($emailTo, $subject, $body, $headers); header(‘Location: http://exemple.fr/order?success=1’); } else { header(‘Location: http://exemple.fr/order?success=0’); }
} ?>

et donc avec la création du email.php notre système de devis en ligne est établi avec succès

NB: pour order?success=1, il faut ajouter ce ligne de code dans le fichier commande.php , avant le formulaire pour afficher un message de réussite au utilisateur

<?php if(isset($_GET[“success”]) && ($_GET[“success”] == ‘1’) ){ echo ‘<div class=”alert alert-success”>Order sent successfully</div>’; } ?>

  • Désolé pour les fautes de français.
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.