2015-08-03 77 views
0

我嘗試在woocommerce帳單表單上添加輸入,我想使用Ajax來呈現它的動態。在woocommerce中添加動態字段

它是這樣的東西:

  • 有一個選擇輸入例如:

選擇1

選擇2

也就是說,當選擇「選擇1」時,帶有無線電框的另一個列表出現,並且與先前的菜單有關。

該功能在沒有wordpress的情況下完美運行,但是當我們將它添加到WP時,它不起作用。該功能是重複的,並且不能正常工作

我使用require_once()將它添加到了函數.php中的wp中。

你能幫我們做到這一點嗎?

非常感謝

樂行政法院INFORMATIQUE

+0

「我補充它使用require_once()在function.php到WP;」請告訴我們你添加了什麼。另外考慮閱讀[插件中的Ajax](https://codex.wordpress.org/AJAX_in_Plugins)。 Bon勇氣! – helgatheviking

+0

這應該是「請給我們看」 – helgatheviking

回答

0

我有這樣的(form_livraison.php)函數工作:

<script type='text/javascript'> 
 
    
 
\t \t \t function getXhr(){ 
 
           var xhr = null; 
 
\t \t \t \t if(window.XMLHttpRequest) // Firefox et autres 
 
\t \t \t \t xhr = new XMLHttpRequest(); 
 
\t \t \t \t else if(window.ActiveXObject){ // Internet Explorer 
 
\t \t \t \t try { 
 
\t \t \t     xhr = new ActiveXObject("Msxml2.XMLHTTP"); 
 
\t \t \t    } catch (e) { 
 
\t \t \t     xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
 
\t \t \t    } 
 
\t \t \t \t } 
 
\t \t \t \t else { // XMLHttpRequest non supporté par le navigateur 
 
\t \t \t \t alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
 
\t \t \t \t xhr = false; 
 
\t \t \t \t } 
 
           return xhr; 
 
\t \t \t } 
 
    
 
\t \t \t /** 
 
\t \t \t * Méthode qui sera appelée sur le click du bouton 
 
\t \t \t */ 
 
\t \t \t function go(){ 
 
\t \t \t \t var xhr = getXhr(); 
 
\t \t \t \t // On défini ce qu'on va faire quand on aura la réponse 
 
\t \t \t \t xhr.onreadystatechange = function(){ 
 
\t \t \t \t \t // On ne fait quelque chose que si on a tout reçu et que le serveur est ok 
 
\t \t \t \t \t if(xhr.readyState == 4 && xhr.status == 200){ 
 
\t \t \t \t \t \t leselect = xhr.responseText; 
 
\t \t \t \t \t \t // On se sert de innerHTML pour rajouter les options a la liste 
 
\t \t \t \t \t \t document.getElementById('horaires').innerHTML = leselect; 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
    
 
\t \t \t \t // Ici on va voir comment faire du post 
 
\t \t \t \t xhr.open("POST",'http://XX/ajax_livraison.php',true); 
 
\t \t \t \t // ne pas oublier ça pour le post 
 
\t \t \t \t xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
 
\t \t \t \t // ne pas oublier de poster les arguments 
 
\t \t \t \t // ici, l'id du site 
 
\t \t \t \t sel = document.getElementById('site'); 
 
\t \t \t \t idsite = sel.options[sel.selectedIndex].value; 
 
\t \t \t \t xhr.send("idSite="+idsite); 
 
\t \t \t } 
 
\t \t </script> 
 

 
\t \t \t \t <label>Lieux du retrait :</label> 
 
\t \t \t \t <select name='site' id='site' onchange='go()'> 
 
\t \t \t \t \t <option value='-1'>Aucun</option> 
 
\t \t \t \t \t <?php 
 
\t \t \t \t \t \t $bdd = new PDO('mysql:host=XX', 'XX', 'XX'); //Connexion à la base 
 
\t \t \t \t \t \t $req = $bdd->query('SELECT * FROM site ORDER BY ville');//Récupération des informations 
 

 
\t \t \t \t \t \t while($row = $req->fetch()){ 
 
\t \t \t \t \t \t \t echo "<option value='".$row["id"]."'>".$row["ville"]."</option>"; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t ?> 
 
\t \t \t \t </select> 
 
\t \t \t \t <div id='horaires'> 
 
\t \t \t \t \t Horaires :<br/> 
 
\t \t \t \t </div>

這個調用此頁面(ajax_livraison .php)

<?php 
 
\t setlocale (LC_TIME, 'fr_FR.utf8','fra'); //Mise en français de la date 
 
\t echo "Horaires : <br/> Nous sommes le ".(strftime("%A %d %B"))."<br/>"; //Affichage de la date 
 
\t $num_jour = date("N"); //Récupération du numéro du jour (Lundi 1 -> Dimanche 7) 
 

 
\t if(isset($_POST["idSite"])){ //si un élément est sélectionné... 
 
\t \t $bdd = new PDO('mysql:host=XX', 'XX', 'XX'); //Connexion à la base 
 
\t \t //mysql_select_db("test"); 
 
\t \t //$res = mysql_query("SELECT * FROM horaires WHERE idSite=".$_POST["idSite"]); //Récupération des informations 
 
\t \t $req = $bdd->prepare('SELECT * FROM horaires WHERE idSite = ?'); 
 
\t \t $req->execute(array($_POST['idSite'])); 
 

 
\t \t $resultfinal = array(); //Création d'un tableau 
 
\t \t 
 
\t \t while($row = $req->fetch()){ //Boucle tant qu'il y a des résultats 
 

 
\t \t \t $inter_jour = $num_jour - $row['id_jour']; //Calcul de l'intervalle entre le jour J et le jour de livraison 
 

 
\t \t \t if ($inter_jour>=0){ //Si intervalle de livraison supérieur ou égale à 0 
 
\t \t \t \t $compte_jour = date('d')+(7-$inter_jour); //Calcul jour livraison 
 
\t \t \t } 
 

 
\t \t \t else{ 
 
\t \t \t \t $compte_jour = date('d')-$inter_jour; //Sinon idem avant 
 
\t \t \t } 
 

 
\t \t \t $date_livraison = strftime("%A %d %B",mktime(0,0,0,date('m'),$compte_jour,date('Y'))); //Récupération de la date de livraison suite au calcul 
 

 
\t \t \t $num_livraison = strftime("%d", mktime(0,0,0,date('m'),$compte_jour,date('Y'))); //Récupération numéro livraison suite au calcul 
 

 
\t \t \t if((($num_jour+1) == $row["id_jour"]) && $row['idSite']==1){ //Si livraison = J+1 et site de livraison == Massy 
 
\t \t \t \t $write = "<input type='radio' name='heures' id='".$row["id"]."' value='".$row["id"]."' checked><label for='".$row["id"]."'> ".$date_livraison." 16h00 - 20h00</label><br/>"; 
 
\t \t \t } 
 

 
\t \t \t else{ 
 
\t \t \t \t $write = "<input type='radio' name='heures' id='".$row["id"]."' value='".$row["id"]."'><label for='".$row["id"]."'> ".$date_livraison." ".$row["am"]." ".$row["pm"]."</label><br/>"; 
 
\t \t \t } 
 

 
\t \t \t $resultfinal[$num_livraison] = $write; //Ajout de la ligne en fin de tableau 
 

 
\t \t } 
 

 
\t \t ksort($resultfinal); //Trie du tableau par la clé 
 

 
\t \t foreach ($resultfinal as $key => $value) { //Pour chaque ligne du tableau... 
 
\t \t \t echo $value; //afficher le contenu 
 
\t \t } 
 

 
\t } 
 
?>

所以在WordPress的function.php我稱之爲與require_once(form_livraison.php);

add_action('woocommerce_checkout_fields' , 'custom_store_pickup_field'); 
 
    
 
function custom_store_pickup_field($fields) { 
 
    require_once("form_livraison.php"); 
 
}

我希望你明白我的功能^^

感謝您的幫助