Sum meta values of checked inputs in wordpress loop - javascript

I try to sum values of checked inputs in wordpress loop and I have construction like:
<!--wp-loop-->
<input type="checkbox" value="<?php the_title(); ?>" id="i-<?php the_ID(); ?>">
<label for="i-<?php the_ID(); ?>"><?php the_meta(); ?></label>
<!--wp-loop-->
And I have a lot of loops in one page.
function updateTextInput() {
var allVals2 = [];
$('.taglist :checked').each(function(y) {
allVals2.push(<?php echo get_post_meta($post->ID, "price", true); ?>);
});
var total = 0;
for (var i = 0; i < allVals2.length; i++) {
total += allVals2[i] << 0;
}
$('#basket2').val(total);
}
$(function() {
$('.taglist input').click(updateTextInput);
updateTextInput();
});
and this is max that I have to do (
my only problem is: this script is not in loop and it's catch only value of last post in category and what's why it doesn't work right((

Related

How to implementing EasyPay Pakistan Payment gateway in WordPress?

Hi Everyone I am trying to implement the EasyPay Pakistan payment gateway for my website but i am getting this error Parameter Authentication failed my code is below which is in plugin they provided:
<?php
require '../../../wp-config.php';
$storeId = get_option('storeId');
$daysToExpire = get_option('daysToExpire');
$live = get_option('live');
$liveVal = $live['menu'];
$easypayIndexPage = '';
if ($liveVal == 'no') {
$easypayIndexPage = 'https://easypaystg.easypaisa.com.pk/easypay/Index.jsf';
} else {
$easypayIndexPage = 'https://easypay.easypaisa.com.pk/easypay/Index.jsf';
}
$merchantConfirmPage = home_url().'/wp-content/plugins/Easypay/confirmEasypay.php';
$options = get_option('autoRedirect');
//$autoRedirect = checked( isset( $options['autoRedirectCb'] ) );
$autoRedirect = checked( isset( $options['autoRedirectCb'] ),1,false );
if($autoRedirect) {
$autoRedirect = 1;
} else {
$autoRedirect = 0;
}
$orderId = $_GET['orderId'];
if (strpos($_GET['amount'], '.') !== false) {
$amount = $_GET['amount'];
} else {
$amount = sprintf("%0.1f",$_GET['amount']);
}
$custEmail = $_GET['custEmail'];
$custCell = $_GET['custCell'];
$hashKey = get_option('hashKey');
date_default_timezone_set('Asia/Karachi');
$expiryDate = '';
$currentDate = new DateTime();
if($daysToExpire != null) {
$currentDate->modify('+'.$daysToExpire.'day');
$expiryDate = $currentDate->format('Ymd His');
}
$paymentMethods = get_option('paymentMethod');
$paymentMethodVal = $paymentMethods['methods'];
$hashRequest = '';
if(strlen($hashKey) > 0 && (strlen($hashKey) == 16 || strlen($hashKey) == 24 || strlen($hashKey) == 32 )) {
// Create Parameter map
$paramMap = array();
$paramMap['amount'] = $amount ;
$paramMap['autoRedirect'] = $autoRedirect ;
if($custEmail != null && $custEmail != '') {
$paramMap['emailAddr'] = $custEmail ;
}
if($expiryDate != null && $expiryDate != '') {
$paramMap['expiryDate'] = $expiryDate;
}
if($custCell != null && $custCell != '') {
$paramMap['mobileNum'] = $custCell;
}
$paramMap['orderRefNum'] = $orderId ;
if($paymentMethodVal != null && $paymentMethodVal != '') {
$paramMap['paymentMethod'] = $paymentMethodVal ;
}
$paramMap['postBackURL'] = $merchantConfirmPage;
$paramMap['storeId'] = $storeId ;
//Creating string to be encoded
$mapString = '';
foreach ($paramMap as $key => $val) {
$mapString .= $key.'='.$val.'&';
}
$mapString = substr($mapString , 0, -1);
// Encrypting mapString
$ivlen = openssl_cipher_iv_length($cipher="AES-128-ECB");
$iv = openssl_random_pseudo_bytes($ivlen);
$crypttext = openssl_encrypt($mapString, $cipher, $hashKey,OPENSSL_RAW_DATA, $iv);
$hashRequest = base64_encode($crypttext);
}
$con = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD);
if (!$con) {
die('Could not connect: ' . mysqli_errno());
}
mysqli_select_db($con, DB_NAME);
global $wpdb;
$table_name = $wpdb->prefix . 'easypay_order';
// mysql inserting an order with pending status
$query = "INSERT INTO ".$table_name."( easypay_order_id, easypay_order_info, easypay_order_status, ipn_attr ) VALUES ('$orderId' ,'null', 'pending', 'null')";
try {
mysqli_query($con, $query);
} catch (Exception $ex) {
error_log($ex->getMessage());
}
// echo $easypayIndexPage;
//echo "\r\n".$storeId;
// echo $amount;
//echo $merchantConfirmPage;
//echo $orderId;
// echo $hashRequest;
//<?php header("Location: $easypayIndexPage") ?>
<form name="easypayform" method="post" action="<?php echo $easypayIndexPage; ?>">
<input name="storeId" value="<?php echo $storeId ?>" hidden = "true" readOnly="true" />
<input name="amount" value="<?php echo $amount ?>" hidden = "true"/>
<input name="postBackURL" value="<?php echo $merchantConfirmPage ?>" hidden = "true" readOnly="true" />
<input name="orderRefNum" value="<?php echo $orderId ?>" hidden = "true" readOnly="true" />
<?php if ($expiryDate != '' && $expiryDate != null) { ?>
<input name="expiryDate" value="<?php echo $expiryDate ?>" hidden = "false"/>
<?php } ?>
<input name="autoRedirect" value="<?php echo $autoRedirect ?>" hidden = "true"/>
<input name="emailAddr" value="<?php echo $custEmail ?>" hidden = "true"/>
<input name="mobileNum" value="<?php echo $custCell ?>" hidden = "true"/>
<input name="merchantHashedReq" value="<?php echo $hashRequest ?>" hidden = "true"/>
<input name="paymentMethod" value="<?php echo $paymentMethodVal ?>" hidden = "true"/>
</form>
<script data-cfasync="false" type="text/javascript">
document.easypayform.submit();
</script>
When I click on Proceed to easypay nothing appears on the page and just white black page appears, so after research I came to know that this below written code is not working:
<script data-cfasync="false" type="text/javascript">
document.easypayform.submit();
</script>
Therefore I added this line of code into my form so that I can manually click the button so redirect to EasyPay page.
<input type = "submit" value="Submit">
Now, when clicking on the submit button it is redirecting to EasyPay page but this error occurs saying Parameter Authentication failed.
So, is there anyone who can help me out in this implementation because there support team is not helpful.
I will be very thankful for your help.
This EasyPay plugin can't accept payment values greater than 2 decimals, so, by going in Woo-Commerce plugin in the currency's setting and changing number of decimals to 1 the EasyPay plugin issue will be resolve.

Showing price on click input type="radio"?

[Product listing with clickable inputs][1]
i'm building a webshop system, and i would like to see on the product page that if a user selects a product size, the price will be displayed of the selected size..
Only the last displayed input works when i click on it.
Product listing with size inputs: https://i.stack.imgur.com/Wo6Oq.png
<?php
$count = 0;
foreach($original_array as $order_list){
$count++;
if($order_list['aantal'] == 0 || $order_list['aantal'] == ''){
$disableValue = 'disable';
}
if($count == 2){
$checked = 'checked=""';
}
?>
<div class="sc-item">
<input type="radio" name="variatie_maat[]" value="<?=$order_list['maat'];?>" onclick="myFunction();" id="<?=$order_list['maat'];?>-maat" <?=$disableValue;?> <?=$checked;?>>
<label for="<?=$order_list['maat'];?>-maat"><?=$order_list['maat'];?></label>
<input style="display:none;" value="<?=$order_list['prijs'];?>" id="prijs-<?=$order_list['prijs'];?>" name="variatie_prijs[]">
</div>
<?php
}
?>
<script>
// Here the value is stored in new variable x
function myFunction() {
var x =
document.getElementById("prijs-<?=$order_list['prijs'];?>").value;
document.getElementById(
"price").innerHTML = x;
}
</script>
'''
Try this.
<?php
$count = 0;
foreach($original_array as $order_list){
$count++;
if($order_list['aantal'] == 0 || $order_list['aantal'] == ''){
$disableValue = 'disable';
}
if($count == 2){
$checked = 'checked=""';
}
?>
<div class="sc-item">
<input type="radio" name="variatie_maat[]" value="<?=$order_list['maat'];?>" onclick="myFunction('<?=$order_list['prijs'];?>');" id="<?=$order_list['maat'];?>-maat" <?=$disableValue;?> <?=$checked;?>>
<label for="<?=$order_list['maat'];?>-maat"><?=$order_list['maat'];?></label>
<input style="display:none;" value="<?=$order_list['prijs'];?>" id="prijs-<?=$order_list['prijs'];?>" name="variatie_prijs[]">
</div>
<?php
}
?>
<script>
function myFunction(id) {
var x = document.getElementById("prijs-" + id).value;
document.getElementById("price").innerHTML = x;
}
</script>

Function not executing before .forEach

I'm having some problems showing my loading icon, before a function is executing. It seems to be showing at the same time my new elements are being appended to the DOM. I'm expecting to have many elements, so a loading icon is necessary as these new elements are being built.
A breakdown of what I want to happen
Show loading icon
Build new elements and append to DOM
Hide loading icon
Generate Dummy Elements
<div class="loader"></div>
<button>Duplicate Items</button>
<section class="grid">
<?php for ($i = 0; $i < 1000; $i++) :
$randH = rand(1, 10);
$randW = rand(1, 10);
$imgUrl = 'http://placehold.it/' . $randH . 'x' . $randW;
?>
<article class="grid__item">
<img src="<?php echo $imgUrl; ?>" height="<?php echo $randH; ?>" width="<?php echo $randW; ?>">
<p>Hello <?php echo $i; ?></p>
</article>
<?php endfor;?>
</section>
<section class="gallery></section>
Javascript Functions
let createGallery = () => {
let gridItems = document.querySelectorAll('.grid__item'),
gallery = document.querySelector('.gallery'),
gridArray = Array.prototype.slice.call(gridItems, 0);
// create new elements
gridArray.forEach((item, index) => {
let galleryItem = document.createElement('article'),
img = item.querySelector('img').attributes,
markup = {
caption: item.querySelector('p').innerHTML
},
template = `<article class="gallery__item">
<img class="gallery__item__img" src="{{src}}" height="{{height}}" width="{{width}}">
<figcaption>{{caption}}</figcaption>
</article>`;
for (let i = 0; i < img.length; i++) {
markup[img[i].nodeName] = img[i].nodeValue;
}
Object.keys(markup).forEach(function(key) {
let regEx = new RegExp('\{\{' + key + '\}\}', 'g');
template = template.replace(regEx, markup[key]);
});
galleryItem.innerHTML = template;
galleryItem.className = 'gallery__item ' + index;
gallery.appendChild(galleryItem);
})
// after all images have been added > hide loader
$('.loader').removeClass('is-active');
};
let initGallery = () => {
// show loader, before creating gallery
$('.loader').addClass('is-active');
// create new elements
createGallery();
}
let $button = document.querySelector('button');
$button.addEventListener('click', initGallery);

Opencart customization: server-side script for rating

I've added a custom table into the Opencart database, where I have a field/column, called average_rating (value = null to 5).
In my (custom) template (.tpl file) I've added a code to get and show the rating of current record from database.
Here is the code within .tpl file:
<div class="form-group">
<label class="col-sm-2 control-label" for="input-average_rating"><?php echo $entry_average_rating; ?></label>
<div class="col-sm-10">
<input type="hidden" name="average_rating" value="<?php echo $average_rating; ?>" id="input-average_rating" />
<?php for ($i = 0; $i < $average_rating; $i++) { ?>
<div class="rating_hover" id="<?php echo 'r' . ($i+1) ?>" title="<?php echo $i+1 ?>" data-toggle="tooltip"><i class="fa fa-star"></i></div>
<?php } ?>
<?php for ($i = $average_rating; $i <= 4; $i++) { ?>
<div class="rating_normal" id="<?php echo 'r' . ($i+1) ?>" title="<?php echo $i+1 ?>" data-toggle="tooltip"><i class="fa fa-star"></i></div>
<?php } ?>
</div>
</div>
For the blue-stars, I use .rating_hover class, for the grey-ones: .rating_normal class (see the picture below).
All this stuff works fine. But now I want to do something I have no experience with and I would appreciate any tip concerning my question.
Question: When a mouse pointer is over a grey star, it must become blue, like the ones before it. And when clicked on a star, my hidden input must get the value of title attribute of the clicked div-element. I wouldn't like to write a client-side Javascript to do this. Could somebody give a tip on how to do this with JSON or AJAX... or somehow please?
I mean: something like this:
$('div[id=\'r*\']').onmouseover({
// for (i=$average_rating; i<=[current_id]; i++) {
// ??? document.getElementById('r[i]').style.ClassName = 'someclass';
});
Javascript-alternative works fine, but I still have problems with JSON-script:
This is how javascript works:
Inside every div-element I added following commands:
<div ... onclick="rOnClick(<?php echo ($i+1) ?>);" onmouseover="rOnMouseOver(<?php echo ($i+1) ?>);" onmouseout="rOnMouseOut(<?php echo ($i+1) ?>);" ... >
And my Javascript functions are now, as follows:
<script type="text/javascript">
function rOnMouseOver(id) {
var ar = parseInt(document.getElementById('input-average_rating').value);
if (isNaN(ar)) {
ar = 0;
}
for(i = (ar+1); i <= id; i++) {
document.getElementById('r' + i).className = 'rating_hover';
}
}
function rOnMouseOut(id) {
var ar = parseInt(document.getElementById('input-average_rating').value);
if (isNaN(ar)) {
ar = 0;
}
for(i = 1; i <= ar; i++) {
document.getElementById('r' + i).className = 'rating_hover';
}
for(i = (ar+1); i <= id; i++) {
document.getElementById('r' + i).className = 'rating_normal';
}
}
function rOnClick(id) {
document.getElementById('input-average_rating').value = id;
for(i = 1; i <= id; i++) {
document.getElementById('r' + i).className = 'rating_hover';
}
for(i = (id+1); i <= 5; i++) {
document.getElementById('r' + i).className = 'rating_normal';
}
}
</script>
Please add another css class 'rating' in all rating divs. Also you will be needed to add a different class 'rated' for existing/clicked rated value. Then add following script:
$('.rating').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('rating_over');
$(this).nextAll().removeClass('rating_normal');
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('ratings_over');
$('.rated').addClass('ratings_over'); // back to rated one
}
);
$('.rating').bind('click', function() {
$('.rating').removeClass('rated');
$(this).addClass('rated');
$('#input-average_rating').val($(this).attr('title'));
});

PHP and Javascript getelementbyid, how to pass on parameters

I have a Javascript function that is called many time within a while loop with <div id='c$value'>.
When calling countdown() I would need to pass on some parameters. In this case $m and $s.
How can this be done ?
window.onload = function() {
<?php
$nbcounters = 5;
for ($i = 0; $i < $nbcounters; $i++) {
echo "countdown('c$i', 0, 7);";
}
?>
}
the php code
<?php
$value = 0;
while ($value < $nbcounters) {
$m = rand(1, 3);
$s = rand(10, 20);
echo "<div id='c$value'></div><br>";
$value++;
}
?>
Thanks!

Categories

Resources