Recently Viewed items - Anyone??

Hi worldofrugs,
  OK - Here's my starter for ten. You need to customise smallRecentProducts.asp
On line 74 :
<div style="clear:both; padding-bottom: 5px;">
Change this to read something like :-

<div id="recPrdHz">

Then in pcStoreFront.css add something like :
#recPrdHz {
 float:left;
 padding: 5px;
 border: 1px dotted orange;
}

The border is just there to help see what's going on & can be dropped/changed etc.
You may also want to do something with the DIV just after the two FOR loops end (Next statements).

HTH
 

I'll try it over the weekend.. I'll keep you posted.. Thanks all!

As a follow up for future troubleshooting: when the clear list link disappears to "show recent products,"  check "languages.asp" file to make sure it is current with the product cart version you are running.

Thanks Dan!

Scarlett 

Hi Hamish,
Again thanks so much for helping me to get it horizontal... I assume you like to look into it to see if we're able to center it on the page... (why else would you ask for my address?)

I'm currently working on the shop. Changing layouts, colors, etc....
I send you the link via PM..

The recently viewed items will be at the bottom of the page.

Lemme know what you find out....

Have you received an answer on this?

What I encountered on smallrecentproducts.asp (V3.12) is that the CSS div "recentprds" was undefined in the CSS, so I made my own. Next thing I decided to change was to present the product list as an unordered list.

I stripped out all the embedded styles like "<div style="margin-bottom: 10px;">" because using <ul> styling I can automatically take care of the spacing.

This code also has a custom div to align the "Clear List" link to the right, another change to use the same image for each item (we have wide variety of product image dimensions and using an image for the <li> would have broken the consistent look), and another to add the tooltip, but hopefully you can see how/where to add the UL/LI tags
"
                                        'Show SKU?
                                        pcIntShowSKU = 0
                                        
                                   %>

                                   <% 'CW added ul ,changed class to small, added <<>> %>
                                        <ul>
                                             <li class="small">
                                        <% if pcvStrSmallImage <> "hide" then 'CW added tooltip and changed image to use checkmark due to prd image size issues%>
                                             <a href="viewPrd.asp?idproduct=<%=tmpVPrdArr(0,tmpIndex)%>"><img src="../../ImagesSite/CheckmarkOrangeYellow.gif" alt="Bullet" align="left" style="border:none; padding-top: 2px; padding-bottom: 5px; padding-right: 4px;"></a>
                                        <% end if %>
                                        <a href="viewPrd.asp?idproduct=<%=tmpVPrdArr(0,tmpIndex)%>" <%if scStoreUseToolTip="1" then%>onmouseover="javascript:document.getPrd.idproduct.value='<%=tmpVPrdArr(0,tmpIndex)%>'; sav_callxml='1'; return runXML1('prd_<%=tmpVPrdArr(0,tmpIndex)%>');" onmouseout="javascript: sav_callxml=''; hidetip();"<%end if%>><%=ClearHTMLTags2(tmpVPrdArr(1,tmpIndex),0)%></a></li>
                                        </ul>
                                        <% if pcIntShowSKU=1 then%><span class="smaller"><%=pcvStrSku%></span><%end if%>
                                        </div>
                                        <%exit for
                                   end if
                              Next
                         Next
                         'CW inactivated <div style="clear:both; text-align: right; margin: 5px;">, added <<>>, and div-class
                         %>
                         <div id="alignRight" class="small"><a href="javascript:ClearViewedPrdList();"><< <%=dictLanguage.Item(Session("language")&"_viewProducts_2")%> >></a> </div>
"

This is the CSS we currently use for left/right columns that controls the unordered list for recentprds
"
#pcLeft ul, #pcRight ul {
     margin: 0 0 0px 7px;
     padding: 0 5px;
     color:#999999;
}

#pcLeft li, #pcRight li {
     list-style-type: none;
     margin: 2px 0 0 0;
     border-bottom:1px solid #CCCCCC;
     padding: 0 5px;
     border-left:2px solid #F47400;
     border-right:1px solid #CCCCCC;
}
"

You can see it at http://www.constructionlifters.com.

You'd have to create your own ul/li definitions for recentprds. Be careful about how many products you display horizontally.

There are several different ways to center <ul>s, take a look at the following for some clues

http://css.maxdesign.com.au/listutorial/horizontal_master.htm
http://matthewjamestaylor.com/centered-menus/
http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

Christie Mason