Styling Recent Products Layout

[graphicz]

Please can developers or someone post an 'idiots guide' to styling the recent product layout?

One of the great strengths of Sellerdeck is that it gives designers great flexibility.

So far I have been unable to fathom the recent product layout other than the references in the style sheet. I would like to make it a <div> layout rather than a <table> layout and to be able to style the boxes to match other section and product boxes in a site.

Where does the actual layout reside?

Clients want the recent products display to look like the rest of their site, not like something bolted on.

Thank you!

[peblaco]

The default layout for recent products in SellerDeck 2013 is Horizontal Sliding Recent Products List, which contains the table tags. You can adjust the code there or change the CSS style sheet.

[NormanRouxel]

The tabular layout is designed to create a multi-row table where the image, names, prices and delete icon are all within separate rows. This keeps them all nicely lined up regardless of the variations in size of the actual items. Unfortunately, as these are built and altered at page view time via JavaScript, the code is much more complex than in a normal layout.

If you can live without the sideways scrolling list with Prev / Next buttons then there is an alternative layout Regular Recent Products List that uses much simpler code with no tables. Choose via Settings / Site Options / Layout / Recent Products / Recent Products Display.

If tinkering with Regular Recent Products List (best copy it and tweak the copy), leave the <div id="recentstlist"> ..... </div> in place as it's used as a place-marker for the generated HTML. The bit between <div id="recenthtitem"> and the following </div> is what lays out each item and is where to tweak. This area is a pseudo HTML template where bits like _NAME_ get replaced with the appropriate content via client-side JavaScript.

[graphicz]

Thank you Louise and Norman.

[graphicz]

In case this helps anyone along:
In the Actinic stylesheet (Elegance in the default site) delete or comment out all the recent product stuff BUT leave this one entry:

/* Recently Viewed Products List styles ------------------------------------ */

#rphtml {
	display: none; 
	visibility:hidden;
	} /* Used internally - do not delete */

Add styling for .recent-products and #recenthtitem

/* Recently Viewed Products List styles ------------------------------------ */

#rphtml {
	display: none; 
	visibility:hidden;
	} /* Used internally - do not delete */

.recent-products {
	width:100%;
	margin:0;
}
#recenthtitem {
border:1px solid #c0c0c0;
margin: 0 10px 10px 0;
text-align:center;
float:left;
width:31%
}

These are my examples, you can style to your taste.

Make a recent products list layout like this:

 <div class="recent-products">
<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%27Checkout%20Page%200%27%20AND%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%27Checkout%20Page%201%27%20AND%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%27Checkout%20Page%202%27%20AND%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%27Checkout%20Page%203%27%20AND%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%27Receipt%27%20AND%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%27Login%27%20AND%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%27Signature%27%20AND%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%27Bounce%20Page%27" >
<!-- TEXTAREA contains all our HTML fragments do not delete 
format: 
**JavaScriptVariable1Name** HTML1 
**JavaScriptVariable2Name** HTML2
-->
<div class="recenththeader">
<h2><actinic:variable name="RecentlyViewedProductsHeading"></h2>
</div>
<textarea disabled id="rphtml">

**sRecentPrefix**				<!-- Prefix to simple horizontal recent item list HTML -->

**sRecentItem**				<!-- The simple product details -->

<div id="recenthtitem">
	<a rel="nofollow" _HREF_="_SSURL_?PRODREF=_PID_&NOLOGIN=1<actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e">&SHOP=<actinic:variable name="ShopID" /></actinic:block>" >
 		<h3>_NAME_</h3>
		
	</a>
	
	<a rel="nofollow" _HREF_="_SSURL_?PRODREF=_PID_&NOLOGIN=1<actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e">&SHOP=<actinic:variable name="ShopID" /></actinic:block>" >
		<img border="0" src="_THUMB_" width="100%" alt="_NAME_" title="_NAME_" />
	</a>
	
		<actinic:block if="%3cactinic%3avariable%20name%3d%22RecentlyViewedListShowFullRetailPrice%22%20%2f%3e">_PRICE_</actinic:block>

	<p><a href="javascript:DeleteRecent('_PID_');"><img src="xit.jpg" border="0" /></a></p>
</div>
	

**sRecentSuffix**				<!-- Suffix to simple horizontal  recent item list HTML -->


**sRecentEmptyList**			<!-- Code for empty list -->

</textarea>						<!-- end of variable and HTML definitions -->

<div id="recentstlist">
<script type="text/javascript">
	// Set globals
	var ssURL = '<actinic:variable name="SearchCGIURL" encoding="perl" selectable="false" />';
	var catalogDir = '<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Brochure%22"><actinic:block if="%3cactinic%3avariable%20name%3d%22IsBrochureHomePage%22%20%2f%3e" ><actinic:variable name="CatalogDirectory" />/</actinic:block></actinic:block>';
	// extract JavaScript variables and HTML snippets from textarea
	var rpbits = document.getElementById('rphtml').value.split('**');
	for ( i=1; i<rpbits.length; i+=2) eval('var ' + rpbits[i] + ' = rpbits[i+1];');
	// call the display routine
	DisplayRecentProducts();
</script>
</div>

<actinic:variable name="SaveRecentProductsCondition" />
</actinic:block>
</div>

I would have liked to have a separator with a conditional if the list index is 3, but the listindex variable does not work in this layout. Also, it helps if all the images are square otherwise you can get into height issues.

In the layout I have given the image a width of 100% so it should be responsive.

Please feel free to add alter change and amend.

It would be nice to be able to add custom variables such as 'Short Description' but that may be a bridge too far.

Thank you.

[peblaco]

You may want to edit the CSS and add a semi colon after your width specification, it may work okay but missing these can cause a problem with other styles working. The code <div id="recenthtitem"> for multiple items on a page it should use a class <div class="recenthtitem"> and CSS as .recenthtitem but that is not your code it is in the default SellerDeck code.

[NormanRouxel]

I would have liked to have a separator with a conditional if the list index is 3

Try editing recentproductsupport.js and look for:

		for (var i=0; i<aRecentViewed.length; i++)
			{
			sHTML += ReplaceVariables(sRecentItem, aRecentViewed[i]);
			}

and above sHTML += ReplaceVariables(sRecentItem, aRecentViewed[i]);
add something like:

			if ( (i % 3) == 0 ) sHTML += '<br />';

[graphicz]

Thank you Norman, cracking proof reading Louise!

J