Showing Real-time Configuration Prices

Last Updated: Nov 30, 2018 04:40PM EST

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.



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

Menu

  • Support Forums
  • Video Tutorials
  • Support Request
  • Support Policy
647e99095133bd6d1ae916f97dc7f92f@productcart.desk-mail.com
https://cdn.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete