Advanced Integration with HTML & CSS

Live Demos of HTML Integration

• Basic Example
• Blogger Example

Placing the cart controls on your site

Without advanced integration, ChargeWell places a positionally fixed grey bar at the bottom of the browser window. That bar is called the "Cart Bar". It's a container for the basic cart information, like the number of items and price total. This bar also contains the "Checkout" button.

You can move the contents of the Cart Bar directly into the layout of your site by pasting the following code snippet into the HTML of your site.

<!-- ChargeWell.com -->
<div id="chargeWellCartControlsDiv"></div>
<!-- END ChargeWell.com -->

You'll now see the contents of the cart bar directly in the layout of your site.

Adjusting position and style of controls with CSS

You'll probably need to modify the layout and style of the cart controls to match your site. You can do this will simple CSS.

There are four DIV containers for the controls, that are all inside the "chargeWellCartControlsDiv". They are the "chargeWellCartTotalDiv", "chargeWellItemsCountDiv" "chargeWellCheckoutButtonDiv" and "chargeWellPageProductDiv". Here's a visual aid to understand the cart controls hierarchy.

Image #1: Cart Controls Container Hierarchy

You can manipulate the layout and style of these DIV containers by including CSS in your site's HTML. Here are two examples that layout the controls horizontally and vertically. Put this CSS direclty on your site with a <style> tag, or use a <link> tag to include the CSS from a separate file.

#chargeWellCartControlsDiv {
 
  background-color: #eeeeff;
  padding: 10px;
  margin: 20px;
  text-align: left;
  width: 450px;
}

#chargeWellCartControlsDiv div {
	margin: 0px 10px;
}

#chargeWellPageProductDiv {
	float: left;
}

#chargeWellItemsCountDiv {
	position: absolute;
	right: 220px;
	top: 12px;
	
}

#chargeWellCartTotalDiv {
	position: absolute;
	right: 110px;
	top: 12px;
	
}

#chargeWellCheckoutButtonDiv {
	float: right;
}

#chargeWellCartControlsDiv {
 
  background-color: #eeeeff;
  padding: 10px;
  margin: 20px;
  text-align: left;
}

#chargeWellCartControlsDiv div {

}

#chargeWellPageProductDiv {

}

#chargeWellItemsCountDiv {

}

#chargeWellCartTotalDiv {
	margin-top: 1em;
	
}

#chargeWellCheckoutButtonDiv {
	margin-top: 1em;

}