This is the community forum. For a developer response use the Client Area.
Follow us on Facebook, Twitter and YouTube!

Commentics VIA Fancybox?
#1

I have very recently created an Ebay Search Script.  In the back-end is Bludit, which is a flat-flle CMS.  The script pulls the pages I create into the main.php file via  $_GET.

Code:
<?php
echo 'Hello ' . htmlspecialchars($_GET["name"]) . '!';
?>
Assuming the user entered http://example.com/?name=Hannes

https://www.php.net/manual/en/reserved.v...es.get.php

The script only consists of 2 pages really - main.php and product-details.php so the ability to call other code and text into the pages is invaluable and $_GET enables this.

When it came to a comment system I first of all used Disqus, which worked fine, but the page size increased too much for my liking, slowing down my site.  I greatly value speed so the pages are all being cached.  Once loaded and cached the pages load extremely quickly so I didn't want to lose this ability.  Again, because of the caching, incorporating a php comment system will not work.  I then considered including Commentics by using ajax include, but, again, the caching caused problems.  I had already used Fancybox on the product-detail page to create a gallery of the Ebay item pics so I thought to see whether it could be used via an iframe and Fancybox for Commentics too.  It could - and works well at that.  All I had to do was refer to the Commentics page using unique page identifiers such as ...

http://computers.searchbay.co.uk/comment...Background

Then in the Commentics page I simply added this at the top ...


Code:
<?php
session_start
$page = $_GET['page'];
?>


I was then able to use $page var anywhere I saw fit within the Commentics page.  My code for the page eventually ended up like this ...


Code:
<title><?php echo $page; ?></title>


And like this ...


Code:
<?php $page=str_replace('-', ' ', $page); ?>

<h1><?php echo $page; ?> Comments</h1>

Finally adding $page to Commentics identifier and reference ...

Code:
<?php
$cmtx_identifier = ''.$page.'';
$cmtx_reference  = ''.$page.'';
$cmtx_folder     = '/commentics/';
require($_SERVER['DOCUMENT_ROOT'] . $cmtx_folder . 'frontend/index.php');
?>

I added various styling to the page to suit my site.  This 'page' could be any of the example pages that ship with Commentics.

The link to call the Commentics page (comments.php) looks like this ...


Code:
<a data-fancybox data-options='{"type" : "iframe", "iframe" : {"preload" : false, "css" : {"height" : "100%"}}}' data-type="iframe" href="comments.php?page=<?php echo $page; ?>" class="btn btn-success">Click To Comment</a>


This set-up worked a treat.  Something else I wanted to incorporate though, was the comment number.  For this I created another file (commentno.php) which connected to the database and counted up the comments associated with each page ...



Code:
<?php

$page = $_GET['page'];

$page=str_replace('-', ' ', $page);

$login = mysqli_connect("localhost", "name", "password", "database name") or die;
$sql = mysqli_query($login, "SELECT pages.id, pages.reference FROM pages JOIN comments ON comments.page_id = pages.id WHERE pages.reference = '$page'");
$num_rows = mysqli_num_rows($sql);

?>

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
<title><?php echo $page; ?> Comment No</title>
<style>
   body {
padding: 0px;
margin: 0px;
background: #28a745;
color: white;
font-family: sans-serif;
font-size: 90%;
text-align: center;
padding-top: 9px;
   }
</style>
   </head>
   <body>
Comments No: <?php print ($num_rows); ?>
</body>
</html>

By using using an iframe in my main.php file I was able to display the number of comments on page load ...

PHP Code:
<iframe src="http://<?php echo $domain; ?>/commentno.php?page=<?php echo $page; ?>"  frameborder="0" scrolling="none" style="height: 34px; width: 130px; border-radius: 4px;"></iframe

The styling within the file copies the styling of the bootstrap css I applied to the previous link used to open the Commentics page.

Again, this worked fine, but iframe contents (comments number) was not updating on page load.  This additional script placed above the link and the link altered to suit overcame this ...


Code:
<script>
var iframeLoadCount = 0;
function reloadOnce(iframe) {
 iframeLoadCount ++;
 if (iframeLoadCount <= 1) {
   iframe.contentWindow.location.reload();
   console.log("reload()");
 }
}
</script>

And the link altered to this ...


Code:
<iframe onload="reloadOnce(this)" src="http://<?php echo $domain; ?>/commentno.php?page=<?php echo $page; ?>"  frameborder="0" scrolling="none" style="height: 34px; width: 130px; border-radius: 4px;"></iframe>


fixed the issue.

I now have a cached page with a link to  a comment script which is unaffected by caching and also the comment numbers are updated on page load.

One last thing I am attempting is to reload the parent page so the comment number is updated for the user when the Fancybox comments page is closed.  So far I haven't been able to figure this out.

A page displaying the comment system ...

http://computers.searchbay.co.uk/main.ph...h=Computer

Looks ok on mobiles too as behind everything is Bootstrap.

I like this approach a lot.  Hope you do too.

Fancybox ...

https://github.com/fancyapps/fancybox
http://fancyapps.com/fancybox/3/
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)