[Addon] Show Case page for non-site members

For Articles relating to more than one ISC version
Post Reply
Snooper
Posts: 264
Joined: Sat Jun 26, 2010 9:22 pm

[Addon] Show Case page for non-site members

Post by Snooper »

Here is my ‘solution’ to wanting a sample page for products normally hidden and needing membership. Two reasons for this. 1) It shows potential buyers a sample of my stock - obviously. (I’m a wholesaler) 2) It allows search engines to find me and post my site URL to a wider public.

It was suggested that I should work backwards from what is provide by ISC, rename this and that, and finally use what ever is left without prices etc. being visible. ISC is hardly user friendly and the moment I met resistance of any sort; I side step !!

So.. Here is my approach to creating a sample page :--

1) From within ISC admin set up a product Category page and call it (say) ‘Show Case’. Add some stock to this section, but hide the page from public view.
This now provides a unique category ID and a proper link to admin so you can add and subtract images that will be used for the Show Case.

2) Now go to your database MySQL to now check your SQL Table called ‘category'. You will see under the header 'catname' the Category name 'Show Case'. and long the row under 'categoryid' header, a number. In my case this was 41.

While still viewing the MySQL..

3) Now locate SQL Table called ‘categoryassociations’ and locate or search ‘categoryid’ using (in my case) 41 (from above). What you should now see is a number of references of 41. Count them and you will see this will match the number of products you added (as asked above) to the Category section/page at set up. On the same row under ‘productid’ should be also include other numbers. Pick one (in my case 2027). Obviously, you may read differently. But note this information.

4) Locate Table ‘Product_Images’ and do another SQL local search under ‘imageprodid’ using the number 2027 (from above). This will return all images that are linked to the product we are using on sample page. It is here that you can elect to use any image, but you refer to that image by what the Table header is telling you. In my case I want only one image with zoom (no page jumping), so I used ‘imagefilethumb’. If you are using the same image used on the members site as the initial image, then you need to ensure this one is selected. ISC makes at least four images for every product uploaded. Under ‘imageisthumb’ you will be using only the images shown here as ‘1’ not ‘0’. In fact, you will see a number of zeros if your product has more than one image on public show, but only one '1' so you would maybe use images on this row.

5) Locate Table ‘product_search’. Now using 'productid' do a SQL local search for 2027. The observant of you will see that the ‘imageprodid’ (from above) will be the same as ‘productid’ in this section. Note what is the row under ‘productname’ and ‘productcode’.

So you now have a link between SQL Tables and the category and now three elements we require for our samples page. The product code and its description and the image itself.

categoryassociations categoryid = 41
product_images imageprodid links to categoryassociations productid
product_images.imageprodid links to product_search productid
product_images imageisthumb = 1


Now to assemble, take all this information and start coding...

Set up a connection to your database..

$user_name = "xxxxxxxx";
$password = "xxxxxxxx";
$database = "xxxxxxxx";
$server = "xxxxxxxx";
$db_handle = mysql_connect($server, $user_name, $password);
$db_found = mysql_select_db($database, $db_handle);


***** NOTE
This site server and ID code should be 'split' away from main body of code to be included only on page load. Simply cut away the script, name it and then within the body of the code described below, add something like include_once 'init.php'; .

6) If the database is connected, we set up the SQL search string. The isc_ reference is my database reference, yours may be different.

$result = mysql_query("$result = mysql_query("SELECT isc_categoryassociations.categoryid
, isc_categoryassociations.productid
, isc_product_images.imageprodid
, isc_product_images.imageisthumb
, isc_product_search.productid
, isc_product_search.prodname
, isc_product_search.prodcode
, isc_product_images.imagefilethumb
, isc_product_images.imagefilezoom
FROM
isc_product_images
INNER JOIN isc_categoryassociations
ON isc_product_images.imageprodid = isc_categoryassociations.productid
INNER JOIN isc_product_search
ON isc_product_images.imageprodid = isc_product_search.productid
WHERE
isc_categoryassociations.categoryid = 41
AND isc_product_images.imageisthumb = 1");
");


Readers will note I have added into the SQL a search for a products zoom image (should you want to use this)

7) We now want to show the result on screen and this will be only a limited number of images in order to ensure a tidy page. I limited this to 12 and with only 4 images per line and so three lines..

$maximg = 0;
$count = 0;
echo "<table border='0' width='162' height='250' >";

while ($row = mysql_fetch_assoc($result) and ($maximg < 12)) {

if($count % 4 == 0) echo "<tr>";
echo "<td valign='top'>";
echo "<table border='0' width='162' height='250' cellspacing='0' cellpadding='0'><tr><td>";
echo "<table border='1' bordercolorlight='#b4b4b4' cellspacing='0' cellpadding='0'><tr><td>";
echo "<img border='0' src='%%GLOBAL_ShopPath%%/product_images/". $row['imagefilethumb'] . "'></td> ";
echo "</tr></table></td></tr><tr><td height='25'";
echo "<p align='center'><font color='#808080' size='1'><b>" . $row['prodname'] . "</font></td> ";
echo "</tr><tr><td>";
echo "<p align='center'><font color='#e408c2' size='2'>Stock Code: " . $row['prodcode'] . "</font></td></tr>";
echo "</table>";
echo "<td>";

if($count % 4 == 3) echo "</tr>";
$maximg++; if ($maximg == 12) break;
$count++;
}
}
echo "</table>";

8) Have we completed presenting or page ?..

mysql_close($db_handle);

9) Save the PHP code as (say) show.php.

10) You now set up a 'web page' from within admin and also call this Show Case. From within webpage admin you can add some HTML to introduce the Show Case. This now provides a public page and is what we require. It is outside of logon or membership requirement.

You have two display options at this point, depending on your site and server abilities. The first is to 'Parse' PHP through the HTML using server support.

11) Add (or change) the top of .htaccess two lines that set the server to ‘execute’ HTML script as if they were PHP. If you don’t have a .htaccess file, set one up!!

AddType x-mapp-php5 .php
AddType x-mapp-php5 .html .htm


***** NOTE
The direct reference to the version level/version of PHP used.

A .htaccess (hypertext access) file is a directory-level configuration text file used by several web servers, and allows for decentralized management of a servers configuration. This file sits in the /Root directory and effectively becomes a sub-set of the host servers configuration.

12) Within the code I present below for the <iframe> you could replace the line..

<iframe src="%%GLOBAL_ShopPath%%/show.php" width="725" height="320"></iframe>

with...

<p>%%Include.http://www.xxxxxxxx.com/show.php%%</p>

If you are not able to use .htaccess (for what ever reason) or simply don't want to extend your web page size so you keep a uniform appearance. The second display option is to use <iframe> within HTML to attached the PHP script. This will make the PHP sit in the 'background' and you will need to adjust the width and height in order to stop the horizontal slider bar from appearing, as well as the width to ensure all products for show case are visible and the vertical slider is free from the direct edge (frame) of any image:-

<table style="width: 97%;" border="0">
<tbody>
<tr>
<td width="127"><br /></td>
<td><iframe src="%%GLOBAL_ShopPath%%/show.php" width="725" height="320"></iframe> <br /><br /><span style="color: #0000ff;">Non-Members should <strong>[<a href="%%GLOBAL_ShopPath%%/login.php?action=create_account">SET UP AN ACCOUNT</a>] </strong>that will be verified to view our product and pricing range.</span><br /><br />Members should use their registered <strong>Email address</strong> and personal <strong>Password</strong> to [<strong><a href="%%GLOBAL_ShopPath%%/login.php"><span style="color: #000000;">LOGON</span></a></strong>] to use this service.</td>
</tr>
</tbody>
</table>


To view a working example based on parsing - http://www.kdklondon.com/pages.php?pageid=26

The script (above) can be downloaded from here - http://www.ihost4u.co.uk/inter/show.zip

The next stage will be to resolve how to add a roll over zoom to the images.
Last edited by Snooper on Fri Dec 20, 2013 4:09 pm, edited 3 times in total.
ISC 5.5.4 Ultimate : Being used here -- http://www.kdklondon.com
Snooper
Posts: 264
Joined: Sat Jun 26, 2010 9:22 pm

[Addon] Show Case page for non-site members PT2

Post by Snooper »

We could perhaps use the Zoom script already installed with ISC (assuming you have this ability)

Or..

We can alternatively start by downloading a .ZIP file that contains two folders, /css and /scripts respectively. The scripts folder holds two .JS scripts from the JQuery project and one CSS script. I made a slight mod to one JS script however.

1) Download the .ZIP file from my server – http://www.ihost4u.co.uk/inter/folders.zip

2) Now going either through ‘Design mode’ within Admin or an alternative, you need to add to the following three ‘pointers’ above your web page </head> –

<script src='%%GLOBAL_ShopPath%%/XXXX/scripts/jquery-1.5.1.js' type='text/javascript'></script>
<script src='%%GLOBAL_ShopPath%%/XXXX/scripts/jquery.jqzoom-core.js' type='text/javascript'></script>

<link href='%%GLOBAL_ShopPath%%/XXXX/css/jquery.jqzoom.css' rel='stylesheet' type='text/css' />
<script type='text/javascript'>
$(document).ready(function () {
$('.MYCLASS').jqzoom();
});
</script>


You would change the XXXX references to the folder/location where you will hold the CSS and Scripts.

Now to deal with the roll over, come zoom function. In my case I can not allow my customers to have full direct view of a product. We lose income by having styles copied !
So while the idea is to allow potentially new customers get a feel of what we are about, a compromise is to use a zoom constraint. And its this mod made to one of the JS scripts I refer to as ‘innerzoom’.

3) What we shall do next is locate from show.php (above) the line –

echo "<img border='0' src='%%GLOBAL_ShopPath%%/product_images/". $row['imagefilethumb'] . "'>";

and replace this with –

echo "<a class='MYCLASS' href='%%GLOBAL_ShopPath%%/product_images/" . $row['imagefilezoom'] . "'>
<img src='%%GLOBAL_ShopPath%%/product_images/". $row['imagefilethumb'] ."'></a></td>";


You can now either save the file back as show.php and in turn this file into the folder now holding the CSS and JS scripts or leave where placed originally.

And finally remember to change the line within the web page itself (if required)–

<p>%%Include.http://www.xxxxxxxx.com/show.php%%</p>

There is scope in the script to modify it to your requirements. I have only made a few minor changes to the above myself before deploying, otherwise it is a complete or at least working example of a product show case for non-members that can be updated regularly via admin.. Oh and I added a no right mouse click in my version - Obviously !!! :roll:
ISC 5.5.4 Ultimate : Being used here -- http://www.kdklondon.com
Post Reply