Skip to content
  • There are no suggestions because the search field is empty.

Showing Real-time Configuration Prices

Overview

On the Product Configuration page in the storefront, customers can see the updated Configuration Price in real-time (as they make changes to their configuration) on a 'pricing panel' that is affixed to the bottom of the page, which remains in place as they scroll up and down the configuration page. The screen shot below shows a visual example.

Article-Inline-310346.png

If you are using a responsive design on your ProductCart site, the floating price panel is also responsive. Notice how the price collapses to display only the "Price as Customized."



Check out the Pricing Panel in the following ProductCart Configurator Demo Store:

http://www.productcartdemo.com/configuratorplusv5/pc/configurePrd.asp?idproduct=418&qty=1
 

Turning the feature on and off

In ProductCart v5, the pricing panel is "on" by default. If you want to remove the pricing panel, you will need to edit the file "/pc/inc_headerV5.asp". Open it in Notepad or another editor and remove the following line:
  
    <link type="text/css" rel="stylesheet" href="css/configuratorPricingBox.css" />

Alternatively, you can use a true 'floating price bubble' that floats in the right side as the customer scrolls up and down the configuration page. The bubble is controlled by the following CSS file:
  
/store/pc/css/pcBTO.css
 

Styling the floating panel

Changing the panel's position and style
The stylesheet  configuratorPricingBox.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.

The most important elements that can be styled are the following:
 
  • #pcBTOfloatPrices - Styling for the floating panel
  • .grandTotal - Styling for the total price item
  • .defaultPrice - Styling for the default price item
  • .customizationPrice - Styling for the customizations price item
  • .discountPrice - Styling for the discount amount item (if any)
  • .additionalCharges - Styling for the additional charges item (if any)
You will find styles that define:
 
  • Background Colors
  • Text Colors
  • "Add to Cart" and "Continue" Button Styling
  • Padding