i am trying to make a checkout page with wp-invoice and a custom booking page.
Here is the code i put into my functions.php
function paypalpayment() {
global $wpdb;
$user = wp_get_current_user();
$user_ID = $user->ID;
$shortcode = $wpdb->get_row("SELECT MAX(ap.pending) AS pending, ap.book_datetime, ap.id, ap.hash FROM ea_appointments AS ap "
."INNER JOIN ea_users AS us ON ap.id_users_customer = us.id "
."WHERE us.wp_id ='".$user_ID."'");
$html = '';
if ($shortcode->pending == ''){
$html .= '<h1>Processing Error: Appointment has been deleted. </h1>';
$html .= '<p align="center"><a class="fep-button" style="width: 195px; text-align: center;" href="http://lectiotutoring.co.za/EasyBlue" /> Schedule an appointment</a></p>';
} else {
$html .= '<h2>Fee Policy</h2>';
$html .= '<p>You may reschedule an appointment without charge within 24 hours of your appointment. Cancelation of an appointment within 24 hours can either result in a refund or a credit for your next appointment per your request. You will need to inform Lectio Tutoring on the discussion board about how you would like your cancelation to be handled. If you would like a refund, refunds will be the full amount of the cost of your session minus the PayPal processing fees. There are no refunds for cancelations later than 24 hours in advance. <span class="bigger"><b>If payment is not completed within 10 minutes the appointment will be deleted.</b></span></p>';
date_default_timezone_set('Africa/Johannesburg');
$refreshtime = strtotime($shortcode->book_datetime) - strtotime("-10 minutes");
$html .= '<meta http-equiv="refresh" content="';
$html .= $refreshtime;
$html .= '">';
$html .= '<style>
ul.wpi_checkout_block.wpi_checkout_billing_address {
display: none;
}
ul.wpi_checkout_block.wpi_checkout_customer_information {
display: none;
}
ul.wpi_checkout_block.wpi_checkout_billing_information {
display: none;
}
.wpi_checkout_submit_btn.btn.btn-success.wpi_checkout_process_payment.wpi_paypal {
margin: -1px;
}
input {
margin-top: 10px;
width: 130px;
}
form.wpi_checkout .total_price {
top: 1px;
}
.loader {
border: 4px solid #f3f3f3;
border-radius: 50%;
border-top: 4px solid #3498db;
width: 30px;
height: 30px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
div#spinner {
margin-left: 160px;
position: absolute;
}
input#stepone {
position: absolute;
margin-top: -2px;
padding: 0px;
}
.bigger {
font-size:125%;
}
</style>';
$html .= '<input type="button" id="stepone" onclick="processpaypal()" value="Process Payment">';
$html .= '<div id="spinner" class="loader" style="display:none"></div>';
$html .= do_shortcode($shortcode->pending);
$html .= '<input type="button" onclick="deletapt()" value="Delete Apt.">';
$html .= '<script>
cancelurl = "http://lectiotutoring.co.za/EasyBlue/index.php/appointments/cancel/' . $shortcode->hash . '";
function deletapt(){
window.location = cancelurl;
}
jQuery(document).ready(function($) {
$("input[name=return]").val("http://lectiotutoring.co.za/payment-success/");
$("input[name=cancel_return]").val(cancelurl);
});
jQuery(document).ready(function($) {
function processpaypal($){
$("#spinner").css("display","block");
$("#stepone").css("display","none");
setTimeout(
function()
{
$(".wpi_checkout_submit_btn").click();
}, 250);
}
});
</script>';
}
return $html;
}
add_shortcode("paypalpay", "paypalpayment");
when i look for errors in my console it shows Uncaught ReferenceError: processpaypal is not defined in this area $html .= '<div id="spinner" class="loader" style="display:none"></div>';
I have converted my jquery to be compatible with wordpress but it does not seem to be working as i get that error as said above, what would be the problem? have i converted my js wrong in this area jQuery(document).ready(function($) {
function processpaypal($){
...comment are not enought i guess
Make your processpaypal function global, move it outside of the document ready. Learn more about scope here
To resolve $ conflict in wordpress, you do this.
a.
var $ = jQuery; // make sure to make it global
b.
//using jQuery instead of $ like so, (like you did it here jQuery(document))
function processpaypal(){
jQuery("#spinner").css("display","block");
jQuery("#stepone").css("display","none");
setTimeout(
function()
{
jQuery(".wpi_checkout_submit_btn").click();
}, 250);
}
Also consider this recommendations:
it's better to use separate css and js files instead of making it inline.
Create separate template file with your html output and include it using output buffering inside your function
date_default_timezone_set('Africa/Johannesburg'); you can put this at the beginning of your functions.php and this function will set timezone globaly for the whole file. reference
Related
Here is a page I am working on:
https://1stamender.com/testing-elements.php
This is basically a list of latest articles on my site and right now I have a UI I'm looking to improve. Right now I have it defined using bootstrap and my own CSS and can't seem to find a solution.
Basically I can see there is some funky spacing due to the inherent way that divs handle float: left;.
It pushes divs into a new row versus try to push itself up to the div above it leaving for some awkward spacing. This can be fixed by setting a height but the heights will generally be different for each article.
I haven't the faintest idea how to do this CSS wise I've been googling forever...
Edit: Apologies I know you want to see the code itself:
echo '
<div class="articlecontainer">
<div class="articlepicture2">
<img src="'.$mainpic.'" alt="'.$headline.'" width="100%">
</div>
<div class="articledescription2">
<a href="article.php?articlenumber='.$articlenumber.'" class="articlelink2"><strong><span class="headlinearticle2">'.$headline.'</span></strong><br>
'.substr($content,0,100).'...</a>
<hr>
Written by: ';
$sqlauthor = "SELECT * FROM ACCOUNT WHERE USERNAME='$articleauthor'";
$resultauthor = $conn->query($sqlauthor);
if ($resultauthor->num_rows > 0) {
// output data of each row
$rowauthor = $resultauthor->fetch_assoc();
$authordisplayname = $rowauthor['DISPLAYNAME'];
echo '<i>'.$authordisplayname.'</i><br>';
echo 'Overall Rating: ';
echo '<img src="images/main/rating/'.$star.'.png" alt="Rating 0.5" width="80">';
}
echo '
</div>
</div>
';
CSS:
.articlecontainer{
background-color: #666;
border: solid 1px #000;
color: #fff;
padding: 0px !important;
margin-left: 20px;
margin-right: 20px;
margin-top: 10px;
margin-bottom: 10px;
padding-bottom:10px !important;
border-radius: 5px;
width: 25%;
float: left;
You can either use three variables for each column and always toggle the used one or you could use css-columns, but you would change the posts-order to top to bottom.
CSS-Columns: https://developer.mozilla.org/en-US/docs/Web/CSS/columns
PHP: Something like this:
$column = 1;
$column_1_html = "";
$column_2_html = "";
$column_3_html = "";
foreach($boxes => $box) {
$box_html = "...";
if($column == 1) {
$column = 2;
$column_1_html .= $box_html;
} else if($column == 2) {
$column = 3;
$column_2_html .= $box_html;
} else if($column == 3) {
$column = 1;
$column_3_html .= $box_html;
}
}
As stated in the comments this library might be something for you: https://masonry.desandro.com/layout.html
I'm calling a PHP file from jquery ajax javascript. I could able to see the output of the PHP file in browser. But when called via ajax jquery, i'm not able to print he same output. How can i access it ?
**test.php**
<?php
$dbuser="root";
$dbname="test";
$dbpass="root";
$dbserver="localhost";
// Make a MySQL Connection
$con = mysql_connect($dbserver, $dbuser, $dbpass) or die(mysql_error());
mysql_select_db($dbname) or die(mysql_error());
// Create a Query
$sql_query = "SELECT id, login FROM user";
// Execute query
$result = mysql_query($sql_query) or die(mysql_error());
$jsonArray = array();
while ($row = mysql_fetch_array($result)){
$jsonArrayItem = array();
$jsonArrayItem["id"] = $row["id"];
$jsonArrayItem["login"] = $row["login"];
array_push($jsonArray, $jsonArrayItem);
//echo '<option value='. $row['id'] . '>'. $row['login'] . '</option>';
}
mysql_close($con);
$tableData = array(
"data" => $jsonArray
);
header('Content-Type: application/json');
echo json_encode($tableData,JSON_UNESCAPED_SLASHES);
die();
?>
test.html
<html>
<head>
<title>Example</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript">
$.ajax({
url: "test.php",
type: "GET",
dataType: "json",
data: values,
success: function(data){
window.alert(data);
},
error: function(data){
alert("AJAX error!");
}
})
</script>
</body>
</html>
<style>
#container {
text-align: center;
}
a, figure {
display: inline-block;
}
figcaption {
margin: 10px 0 0 0;
font-variant: small-caps;
font-family: Arial;
font-weight: bold;
color: #bb3333;
}
figure {
padding: 5px;
}
img:hover {
transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
img {
transition: transform 0.2s;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-o-transition: -o-transform 0.2s;
}
</style>
Is something wrong in syntax ? can someone help here ?
Use for example Chrome debug console. Network section, XHR filter, selected URL, response tab. Like this:
1) Press CTRL+I in Chrome
2) Try to follow this:
I would like to know how I can define CSS element dimensions before they are rendered eg. not using offset and jQuery
Can I echo php into where the width/height or position values are? eg.
<?php
$width = 290px;
$altwidth = 290;
?>
<style>
.widget {
width: <?php echo $width; ?>;
}
.altwidget {
width: <?php echo $altwidth; ?>px;
}
Would any of these work, is it completely wrong?
Similarly how would I apply JavaScript dimensions using a variable?
$(document).ready(function(){
$('.widget').css('width', <?php echo $width; ?>);
$('.altwidget').css('width', <?php echo $altwidth; ?>);
});
Your code will also works if it is written in php file.
Yes it will work, but you will have to make 290px a string for $width ( e.g. $width = "290px";), or better yet go with the $altwidth way and leave the px part out of the variable.
See below for how to dynamically set dimensions from JavaScript once the page has loaded. I have added some CSS for the example.
<html>
<head>
<?php
$width = "290px"; // Quotes added
$altwidth = 290;
?>
<style>
.widget {
width: <?php echo $width; ?>;
height: 100px;
color: white;
background: green;
cursor: pointer;
}
.altwidget {
width: <?php echo $altwidth; ?>px;
height: 100px;
color: white;
background: red;
cursor: pointer;
}
</style>
<script type="text/javascript">
var newWidgetWidth = '200';
var newAltWidgetWidth = '400';
</script>
</head>
<body>
<div class="widget" onclick="this.style.width = newWidgetWidth + 'px';">
Shrink me
</div>
<div class="altwidget" onclick="this.style.width = newAltWidgetWidth + 'px';">
Grow me
</div>
</body>
</html>
just would like to know how i can stop the position:absolute element to stop floting over the wapper div
html
<?php
echo "<div class='pinWrapper'>";
echo "<h2>New Arrivals</h2>";
echo "<br />";
$all_products = get_all_products();
while ($product = mysql_fetch_array($all_products))
{
echo "<div class='block'>";
echo "<a href='?page=product&itm=" . urlencode($product["Id"]) . "'>";
$Id = $product['Id'];
$limit = 1;
$img_set= get_images_by_id($Id, $limit);
while ($img = mysql_fetch_array($img_set))
{
echo "<img src='sto/" . $img["image_name"] ."'>";
}
echo "</a>";
echo "<a href='?page=product&itm=" . urlencode($product["Id"]) . "'>" . $product['item_name'] . "</a>";
echo "<div class='hpDis'>" . $product['sm_description'] . "</div>";
echo "</div>";
echo "<div class='clear'></div>";
}
echo "</div>";
?>
CSS
.pinWrapper {
position: relative;
margin: 0 auto;
width:720px;
}
.block{
position: absolute;
background: #eee;
padding: 1px;
width: 210px;
border: 1px solid #ddd;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.block img {
width: 200px;
height: auto;
}
Javascript
var colCount = 0;
var colWidth = 0;
var margin = 20;
var windowWidth = 800;
var blocks = [];
$(function(){
$(window).resize(setupBlocks);
});
function setupBlocks() {
//windowWidth = $(window).width();
colWidth = $('.block').outerWidth();
blocks = [];
console.log(blocks);
colCount = Math.floor(windowWidth/(colWidth+margin*2));
for(var i=0;i<colCount;i++){
blocks.push(margin);
}
positionBlocks();
}
function positionBlocks() {
$('.block').each(function(){
var min = Array.min(blocks);
var index = $.inArray(min, blocks);
var leftPos = margin+(index*(colWidth+margin));
$(this).css({
'left':leftPos+'px',
'top':min+'px'
});
blocks[index] = min+$(this).outerHeight()+margin;
});
}
// Function to get the Min value in Array
Array.min = function(array) {
return Math.min.apply(Math, array);
};
Live example here
Any help is greatly appreciated.
If you want the wrapper div to enclose the ".block" elements, you must remove
position: absolute;
and add instead:
display: inline-block;
margin: 32px;
You might as well remove the ".clear" elements.
add z-index:-999; and that will stop it from being above anything else
im familiar with php, but a serious learner in js, i have tried 3 methods to achieve my goal and i have seen the method used below that seems the easiest to implement so i can achieve my goal, but for some reason it does not work. I have included only the necessary bits for the specific function that isnt working, this all works inside a while loop based on entries in a db, seperated with a {$page_trackid} to distinguish between each function and link to it.
I understand a 'this' style function could be used, but as i say im so new to js im just trying to achieve the necessary before i extend to getting even more complex.
Is there something im doing totally wrong here?
Cheers
<head>
<style>
.hidden {display:none;}
.visible {display:block;}
.subtext_img {
width: 100px; height: 100px; padding-top: 10px; padding-right: 10px; float: right;
}
.subtext {
padding-left: 10px;
}
.arrow_box { padding-left: 100px; position: absolute; z-index: 100; background: #88b7d5; border: 4px solid #c2e1f5; width: 580px; height: 120px;} .arrow_box:after, .arrow_box:before { left: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-color: rgba(136, 183, 213, 0); border-left-color: #88b7d5; border-width: 10px; top: 30%; margin-top: -10px; } .arrow_box:before { border-color: rgba(194, 225, 245, 0); border-left-color: #c2e1f5; border-width: 16px; top: 30%; margin-top: -16px; }
</style>
</head>
<body>
<?
$data = mysql_query("SELECT * FROM user_Uploaded_Tracks WHERE username = '$user' ORDER BY datetime DESC")
or die(mysql_error());
$page_trackid = '1'; //reset page track id
// get a whole bunch of data, track info & user info based on some cross referencing via id
while ($info = mysql_fetch_array($data)) {
$db_trackid = $info['id'];
$username = $info['username'];
//data 2 track info based on db track id
$data2 = mysql_query("SELECT * FROM user_Uploaded_Tracks WHERE id = '$db_trackid' LIMIT 1")
or die(mysql_error());
$info2 = mysql_fetch_array($data2);
//data 3 is user profile data based on db track id
$data3 = mysql_query("SELECT * FROM users WHERE username = '$username' LIMIT 1")
or die(mysql_error());
$info3 = mysql_fetch_array($data3);
//data 4 profile image based on user id, track uploader*
$data4 = mysql_query("SELECT * FROM user_profile_pic WHERE username = '$username' ORDER BY datetime DESC LIMIT 1")
or die(mysql_error());
$info4 = mysql_fetch_array($data4);
echo "
<script>
function showbox(userinfo_{$page_trackid}){
document.getElementById(userinfo_{$page_trackid}).style.visibility='visible';
}
function hidestuff(userinfo_{$page_trackid}){
document.getElementById(userinfo_{$page_trackid}).style.visibility='hidden';
}
</script>
<div id='userinfo_{$page_trackid}' class='arrow_box' style='display: none;'> <img src='" . $info4['Image'] . "' class='subtext_img'>
<h2 class='subtext'><a href='http://XXXX/XXX/" . $info2['username'] . "'>" . $info2['username'] . "</a></h2>
<p class='subtext'>" . $info3['user_title'] . "</p>
<p class='subtext'><a href='" . $info3['website_link'] . "' target='_blank'>" . $info3['website_link'] . "</a>
</p>
</div>";
echo "
<div style='position: absolute; z-index: 1; width: 20px; height: 20px; padding-top: 50px; padding-left: 699px;'>
<a href='javascript:showbox_{$page_trackid}()'><img style='height: 20px;' alt='Track stats' src='http://XXXXXX/play1/skin/user-profile2.png' style=''></a>
</div>";
}
?>
</body>
Separation of concerns: avoid manipulating an element's style directly in javascript. styling belongs with css.
Here's what I would do:
CSS
.hidden {
display: none;
}
Javascript:
// show an element
document.getElementById("my-id").classList.remove("hidden");
// hide an element
document.getElementById("my-id").classList.add("hidden");
classList is not supported in old browsers, so make sure to include the polyfill at https://developer.mozilla.org/en-US/docs/DOM/element.classList
Your issue seems to be that in the HTML you are setting the display property to none, but in the script you are setting the visibility property. They are different things. Set one or the other in both places.