Thumbnail previews in Checkout (Step 4)

[ginggs]

Hi guys,

Is there any quick(ish) way of doing a "mini-image management" section in step 4 of the checkout? In other words - allow people who are placing an ad to see thumbnails of the images they've placed so far and possibly delete those which they may have accidentally placed before they complete the checkout process?

I will try and do it myself in the meantime, but if anyone else has done this, or knows of a good way to do it, can they let me know?

Thanks,

George

[ginggs]

Hullo again - If anyone's interested, I've managed to setup the picture step of the checkout process to preview and delete the images if necessary during the checkout process rather than have to modify it after the fact. The code to change in usercheckout.php is basically a complete replacement of the ' case "5" ' section of the file. Actually it was a little confusing since to the user, this is step 4 of the process, but in the script it's actually step 5, so that can be a bit tricky. Anyways, here's the code for that file if anyone is interested:

The first thing you'll need to do is find this line (it's around line 20):

require_once(FILESYSTEM_PATH .'includes/classes/images/class_resize.php');

Directly below that code, insert this code as it's shown here:

require_once(FILESYSTEM_PATH .'/includes/classes/kernel/Listings.php');
$Listings=new Listings( $db );

We then need to replace the entire ' case "5" ' step to add the extra variables to the template as well as handle the deletion option:

case "5":
    //check if they want to delete a photo they've started uploading		  
	if(isset($_REQUEST['imageid']) && isset($_REQUEST['action']) && $_REQUEST['action']=="delete")
	{
	    $listingid=(int)@$_REQUEST['listingid'];
	    $imageid=(int)@$_REQUEST['imageid'];
	    
		if($Listings->removeOneImage($imageid))
		{
			header("Location: usercheckout.php?step=5&listingid=".$listingid);
			exit;
		}
		else
		{
		     echo LANG_ERROR;
		     exit;
		}
	}
      		    
	//image upload and insert
	getImageSettings();
	$listingid=(int)@$_REQUEST['listingid'];
	$upphotos=0;
	//first get image settings
	$sSQL="SELECT component,extensions,quality,maxWidth,maxHeight,maxWidthThumb,maxHeightThumb,qualityThumb,maxSize FROM ".PREFIX."image_settings WHERE id=1";
	$result=$db->query($sSQL);
	$rs=$result->fetch();
	$component=$rs['component'];
	$extensions=$rs['extensions'];
	$maxWidth=$rs['maxWidth'];
	$maxHeight=$rs['maxHeight'];
	$maxWidthThumb=$rs['maxWidthThumb'];
	$maxHeightThumb=$rs['maxHeightThumb'];
	$quality=$rs['quality'];
	$qualityThumb=$rs['qualityThumb'];
	$maxSize=$rs['maxSize'];
	$referer="usercheckout.php?step=5&listingid=".$listingid;

	//now upload it
	if(isset($_GET['upload']))
	{
	#$DMX_debug = true; //uncomment for debugging
	$ppu = new pureFileUpload();
	$ppu->path = "photos";
	$ppu->extensions = $extensions;
	$ppu->formName = "imageupload";
	$ppu->storeType = "file";
	$ppu->sizeLimit = $maxSize;
	$ppu->nameConflict = "uniq";
	$ppu->requireUpload = "true";
	$ppu->minWidth = "";
	$ppu->minHeight = "";
	$ppu->maxWidth = "";
	$ppu->maxHeight = "";
	$ppu->saveWidth = "";
	$ppu->saveHeight = "";
	$ppu->timeout = "600";
	$ppu->progressBar = "fileCopyProgress.php";
	$ppu->progressWidth = "300";
	$ppu->progressHeight = "100";
	$ppu->checkVersion("2.1.2");
	$ppu->referer = $referer;
	$ppu->doUpload();

	$sip = new resizeUploadedFiles($ppu);
	$sip->component = $component;
	$sip->resizeImages = "true";
	$sip->aspectImages = "true";
	$sip->maxWidth = $maxWidth;
	$sip->maxHeight = $maxHeight;
	$sip->quality = $quality;
	$sip->makeThumb = "true";
	$sip->pathThumb = "thumbs";
	$sip->aspectThumb = "true";
	$sip->naming = "prefix";
	$sip->suffix = "small_";
	$sip->maxWidthThumb = $maxWidthThumb;
	$sip->maxHeightThumb = $maxHeightThumb;
	$sip->qualityThumb = $qualityThumb;
	$sip->checkVersion("1.0.3");
	$sip->doResize();
	}
	//now insert it
	$rank=$_POST['upphotos']+1;
	$sSQL = sprintf("INSERT INTO ".PREFIX."prodimages (pid, title, image, rank) VALUES (%s, %s, %s, %s)",
		GetSQLValueString($_POST['listingid'], "text"),
		GetSQLValueString($_POST['title'], "text"),
		GetSQLValueString($_POST['imagename'], "text"),
		GetSQLValueString($rank, "text"));
	$db->query($sSQL);
	if($db->isError()) 
	{
		//error
		$class_tpl->assign('body','checkout/step6.tpl.php');
	}
	else
	{
		//get the product id
		$sSQL = "SELECT oPackageID FROM ".PREFIX."orders WHERE oProductID=".$listingid;
		$result=$db->query($sSQL);
		$rs=$result->fetch();
		$prodID=$rs['oPackageID'];

		//get the total number of images
		$sSQL = "SELECT images,numimages FROM ".PREFIX."cartproducts WHERE id=".$prodID;
		$result=$db->query($sSQL);
		$rs=$result->fetch();
		$images=$rs['images'];
		$numimages=$rs['numimages'];

		//get the number they have submitted
		$sSQL="SELECT id FROM ".PREFIX."prodimages WHERE pid=".$listingid;
		$result=$db->query($sSQL);
		$rs=$result->fetch();
		$upphotos=$result->size();
		
		if ($upphotos <> 0) {
			
		//Load all if any photos
		$sSQL="SELECT id, title, image FROM ".PREFIX."prodimages WHERE pid=".$listingid;
		$result=$db->query($sSQL);
 	  	    while ($rs=$result->fetch())
        {   
            $image_data = array('id'=>$rs['id'],'title'=>safeStripSlashes($rs['title']),'image'=>$rs['image']);
            
            $uploaded_images[]=$image_data;
	    }
	    
        }
        
		if($images<>"Y")
		{
			//this package doesn't allow photos. Lets redirect
			//or they have submitted the maximum number
			header("Location: usercheckout.php?step=6&listingid=".$listingid);
			exit;
		}
		else
		{
			//set placeholder count for image
	        $blank_photo = $numimages - $upphotos;
	        
			//they can add more photos.  
			//show the form again
			$placed_text=sprintf(LANG_YOU_HAVE_PLACED, $upphotos, $numimages);
			$class_tpl->assign('uploaded_images', $uploaded_images);
			$class_tpl->assign('blank_photo', $blank_photo);
			$class_tpl->assign('placed_text', $placed_text);
			$class_tpl->assign('listingid', $listingid);
			$class_tpl->assign('upphotos', $upphotos);
			$class_tpl->assign('numimages', $numimages);
			$class_tpl->assign('extensions', $extensions);
			$class_tpl->assign('maxSize', $maxSize);
			$class_tpl->assign('body','checkout/step4.tpl.php');
		}
	}
break;

You will then need to open your template file "step4.tpl.php" in the "checkout" folder and add this code to it to display the images and options:

<table width="100%" cellspacing="0" cellpadding="5">
          <tr>
            <td class="formstrip" align="center" colspan="{$numimages}">{$placed_text}<br></td>
          </tr>

          <tr>

          <!-- Show images that are uploaded -->
          {if isset($uploaded_images)}
          {counter start=0 skip=1 print=no assign=image_count}
			{foreach from=$uploaded_images item="entry"}
			{counter}
                <td><img src="photos/{$entry.image}" border="0" width="75" /><br><div align="center"><a href="usercheckout.php?step=5&imageid={$entry.id}&action=delete&listingid={$listingid}">Delete</a></div></td>
            {/foreach}
          {/if}
          
          <!-- Show placeholders for number of images left in package -->
          {if isset($upphotos)}
            {section name=photos loop=$blank_photo}
	          <td><img src="templates/{$smarty.const.MAIN_TEMPLATE}/images/little_photo.jpg" border="0" /></td>
	        {/section}
	      {else}
            {section name=photos loop=$numimages}
	          <td><img src="templates/{$smarty.const.MAIN_TEMPLATE}/images/little_photo.jpg" border="0" /></td>
	        {/section}
		  {/if}
	      </tr>
	      
	    </table>

For anyone that needs it, I've attached the "little_photo.jpg" placeholder image to this post.

I hope that helps someone out - it definitely makes the checkout process ALOT friendlier and hopefully will help stop people backing out half way through due to frustration.

Sorry if the code looks a little weird - the post editor has spaced it out all weirdly. If you copy and paste directly from here it'll be OK

[Digbydo]

Excellent !!

Many thanks for this

[SkGold]

Very nice addition for checkout. Thanks a lot.

I have one question.
I allowed uploading 12 pictures and it makes the page very, very wide.
Is it possible to break the line and move the rest of the pictures to the next line, let say after every 4th picture? If yes, how can I do it?

Thanks in advance. Highly appreciated.

[SkGold]

Originally Posted by SkGold

Is it possible to break the line and move the rest of the pictures to the next line, let say after every 4th picture? If yes, how can I do it?

I was trying to change

{html_table_adv loop=$data cols=4 table_attr='width="100%"'}

instead of

<table width="100%" cellspacing="0" cellpadding="5">

but getting error:

Warning: Smarty error: html_table_adv: missing 'loop' parameter in ……../includes/classes/smarty/Smarty.class.php on line 1095

Could somebody please help how I can define this loop and where?

[ginggs]

Hi Sergey,

With regards to the thumbnails spilling into a new line, all I did is use a class in the stylesheet associated with my template, as follows:

.img_thumbs {
	width: 700px;
	overflow: visible;
}

You can then choose the width of your image area in pixels and any images breaking the right hand side of this area, should overflow into a new row - if you have a look at our site - www.totallyclassifieds.com.au, you'll see that in any of the listings, especially the caravan ones, there's quite often more than one row of thumbnails in the "More Images" section at the bottom of the listing.

[alangreg]

Thanks For This Mod,the thumbnail works fine accept for when you choose upload images,When Admin is set to say to allow 3 images package etc it tends to count two more and then will jump to the next step.I have tried so many ways allowing one image upload in the admin,but tthree can be uploaded and shown,finally the no image package set in admin works as it misses the step4 templateI have tried uploading all the files again but still the same i uploaded the original usercheckout.php and left step4.tpl and the images count to three then the next step works