[SOLVED] checking values in jQuery / Javascript array

[PWaddict]

I'm currently using this on my php template which outputs this: <script type="text/javascript">var coupons = ['CODE1','CODE2',];</script>

<script type="text/javascript">var coupons = <?php $coupons = $pages->find("template=paddiscount, title!='', pad_percentage!=''");
echo "[";
foreach($coupons as $coupon) {
  echo "'" . $coupon->title . "',";
}
echo "];";
?></script>

and the related code on my main.js is this:

var discount = $form.find('input[name=pad_discount_code]').val();

if (discount != '' && $.inArray(discount, coupons) == -1) {
  alert('Discount code not found');
} 

The above is working properly but now on the php template I need to add in the array also a timestamp value ($coupon->pad_valid_until) and on main.js I need to also check if there is timestamp associated with the coupon entered and if that timestamp is less than today then alert('Discount code expired');

I don't have much experience with this stuff and I don't know how to proceed. Can you please help me?

[PWaddict]

Ok I found how to do it:

On php template:

<script type="text/javascript">var coupons = <?php $coupons = $pages->find("template=paddiscount, title!='', pad_percentage!=''");
echo "{";
foreach($coupons as $coupon) {
  if ($coupon->pad_valid_until) {
    echo " '" . $coupon->title . "' : " . "'" . date("Y-m-d", $coupon->pad_valid_until) . "'" . ",";
  } else {
    echo " '" . $coupon->title . "' : " . "'" . "" . "'" . ",";
  }
}
echo "};";
?></script>

Outputs something like this: <script type="text/javascript">var coupons = { 'CODE1' : '', 'CODE2' : '2018-09-30',};</script>

And the related code on main.js:

var discount = $form.find('input[name=pad_discount_code]').val();

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1;
var yyyy = today.getFullYear();

if (dd < 10) {
  dd = '0' + dd;
}

if (mm < 10) {
  mm = '0' + mm;
}

today = yyyy + '-' + mm + '-' + dd;

if (discount != '' && (!coupons.hasOwnProperty(discount))) {
  
  alert('Discount code not found');

} else if (discount != '' && coupons[discount] != '' && coupons[discount] <= today) {
  
  alert('Discount code expired');
  
}

 

[AndZyk]

If you want to build a JSON object with PHP, you should have a look at json_encode. That it is easier and cleaner than building it yourself. ?

Regards, Andreas

[kongondo]

What @AndZyk said.

Below is one way to do it. Before that though, logic whether something exists should really be done server-side. Yes, you can also do client-side checks the way you are doing it (just for UX) as long as you also validate things server-side. Otherwise, if you only do it client-side, it is easy to change the 'valid until date' of the coupon in the markup and send that to the server which would honour the coupon and you'd incur a loss in your takings :-). I hope you are also checking server-side.

OK, here's the code. It makes things cleaner, more readable and is less prone to mistakes since PHP handles the JSON string.

<?php

	// initialise variables
	$couponsArray = array();
	$couponsJSON = '';

	// fetch coupons
	$coupons = $pages->find("template=paddiscount, title!='', pad_percentage!=''");

	// we found coupons
	if($coupons->count) {
		// loop through coupons and add values to coupons array
		foreach($coupons as $coupon) {	
			// if coupon valid until, get human readable valid until date, else empty
			$couponValidUntil = $coupon->pad_valid_until ? date("Y-m-d", $coupon->pad_valid_until) : '';
			$couponsArray[$coupon->title] = $couponValidUntil;
		}
		// generate JSON string of coupons for JavaScript
		$couponsJSON = json_encode($couponsArray);
	}

?>
<!-- html here -->
<script type="text/javascript">var coupons = <?php echo $couponsJSON ?></script>

Then in your JavaScript do your checks, if var coupons is not empty, etc.

Hope this helps :-).

[PWaddict]

@kongondo I will try it with your code. Thanks. Isn't the server-side checking done by Padloper? If you go to PadOrderProcess.php on the line 95 there is a piece of code for checking the checkout form for invalid and expired coupons.

[kongondo]

17 minutes ago, PWaddict said:

@kongondo I will try it with your code. Thanks. Isn't the server-side checking done by Padloper? If you go to PadOrderProcess.php on the line 95 there is a piece of code for checking the checkout form for invalid and expired coupons.

Ah. I thought you were doing your own implementation.

[PWaddict]

4 minutes ago, kongondo said:

Ah. I thought you were doing your own implementation.

I'm doing the client side validation cause I have ajaxified the checkout form.

[PWaddict]

@kongondo The coupons are actually exposed in my checkout page source. So I created a new hidden page with a different template and added there only your code to avoid exposing them but now I'm not sure how to proceed.

<?php namespace ProcessWire;

$couponsArray = array();
$couponsJSON = '';

$coupons = $pages->find("template=paddiscount, title!='', pad_percentage!=''");

if($coupons->count) {

  foreach($coupons as $coupon) {
    $couponValidUntil = $coupon->pad_valid_until ? date("Y-m-d", $coupon->pad_valid_until) : '';
    $couponsArray[$coupon->title] = $couponValidUntil;
  }

  $couponsJSON = json_encode($couponsArray);
} ?>
<?php if($coupons->count) { ?>
<script type="text/javascript">var coupons = <?= $couponsJSON ?>;</script>
<?php } else { ?>
<script type="text/javascript">var coupons = '';</script>
<?php } ?>

On checkout page I'm getting the error: "coupons is not defined" on console which is obvious cause this is a different page.

[PWaddict]

I think I figured it out. I had to set the template with the hidden coupons page to json header and then modify the js code like this:

$.get('../my-hidden-coupons-page/', function (data) {
  
  var coupons = data;
  
  if (discount != '' && (!coupons.hasOwnProperty(discount))) {
    
    alert('Discount not found');
  
  } else if (discount != '' && coupons[discount] != '' && coupons[discount] <= today) {
    
    alert('Discount expired');
    
  }
});

 

[PWaddict]

and here is the final code for the php template for the hidden page that will get all the available coupons ONLY via ajax:

<?php namespace ProcessWire;

$couponsArray = array();
$couponsJSON = '';

$coupons = $pages->find("template=paddiscount, title!='', pad_percentage!=''");

if($coupons->count) {

  foreach($coupons as $coupon) {
    $couponValidUntil = $coupon->pad_valid_until ? date("Y-m-d", $coupon->pad_valid_until) : '';
    $couponsArray[$coupon->title] = $couponValidUntil;
  }

  header('Content-Type: application/json');
  $couponsJSON = json_encode($couponsArray);
}

if($config->ajax) {
  echo $couponsJSON;
} ?>

If I did something wrong please let me know.

[kongondo]

Looks OK. It's good to exit/halt() after echoing the JSON.  Either of these (although halt() may be preferable in some cases).

if($config->ajax) {
  echo $couponsJSON;
  return $this->halt();
  // OR
  // exit;
}

 

[PWaddict]

@kongondo Validating coupons while browsing the site on alternate languages always return "Discount code not found" because the json on those languages is empty. Only on the default language the json is returned properly. Why is this happening???

[PWaddict]

It seems that the problem is caused by the selector: title!='' cause the title on alternate languages is actually empty.

EDIT: Removing title!='' and adding include=all now getting the proper json on all languages.

[kongondo]

I was replying as your reply came in :-). Yes, that is the issue. Is there any reason your discount page titles would be empty? I mean, would the selector still work without adding the title!=''?

[PWaddict]

13 minutes ago, kongondo said:

I was replying as your reply came in :-). Yes, that is the issue. Is there any reason your discount page titles would be empty? I mean, would the selector still work without adding the title!=''?

I had it there since the beginning where I was actually only validating the title (see first post). So removing title!='' and adding include=all does the job.