Announcement:Materials and articles for ProductCart 5 can be found at our brand new support center.

Create an account to edit articles | See Formatting Syntax for Wiki syntax | We look forward to your contribution!

BTO Tips: Showing configuration prices in a floating panel

Overview

In ProductCart v4.0 SP3 and above you can easily turn on a feature that allows you to show prices on the configuration page in a floating panel, which “follows” the user as they scroll down the configuration page. The screen shot below shows a visual example, and you can see this feature at work:

Showing configuration prices in a floating panel

Turning the feature on and off

The code in the product configuration pages in version 4.0 SP3 has been updated so that it is ready for you to turn this feature on at any time. There is no setting to change, but rather just some additional “styles” to upload to your storefront. The styles are contained in a new CSS document that you will add to the CSS documents already used by your store design.

To do so, follow these steps:

  • Download this Cascading Style Sheet: CSS document used for floating price panel
  • Unzip it and upload it to the “pc” folder in your storefront
  • Download header.asp from the “pc” folder
  • Make a backup of the file, then open it in Notepad or your favorite HTML editor
  • Add the following reference to the CSS file you just uploaded to your store. This line of code must be placed in the <head> section of the page. For example, you can place it right before the closing </head> tag.
    <link type="text/css" rel="stylesheet" href="pcBTO.css" />

  • Save header.asp and upload it back to the Web server

If you wish to turn off this feature, and have prices display at the bottom of the configuration pages, simply remove the following lines of code from header.asp:

<link type="text/css" rel="stylesheet" href="pcBTO.css" />

Styling the floating panel

Changing the panel's position and style

The Cascading Style Sheet pcbto.css contains many comments that will indicate what each section does. The comments are self-explanatory. Open the file in Notepad or your favorite HTML editor and you will see how you can change the positioning and the look of the floating panel.

Here is a graphical reference for the most important elements:

The most important elements are the following:

#pcBTOfloatPrices {
  position: fixed;
  margin-left: 690px; /* change this value depending on the width of the area where ProductCart code is loaded */
  top: 250px; /* sets the distance from the top of the area where ProductCart code is loaded */
  width: 220px; /* sets the width of the floating element: it might need to be changed depending on font size */
  background-color: #EDF0F4; /* sets the background color of the floating element, which is also affected by the transparency settings below */
  padding: 5px;
  border: 2px solid #999;
}

You will also find style that define:

  • Transparency
  • Rounded corners (not supported by Internet Explorer as of April 2010)
  • Shadow (not supported by Internet Explorer as of April 2010)

Using a dark background

If you are using a dark background for the floating panel, you will want to “activate” the styles that affect the font color used for the text displayed in the panel. To do so, you need to edit the following lines by adding a closing comment tag.

Locate:

/* IF using a dark background, change font color

Replace with (notice the last two characters added to the line, which “close” the comment):

/* IF using a dark background, change font color */

QR Code
QR Code BTO Tips: Showing configuration prices in a floating panel (generated for current page)