In this helpnote, we will show you how to integrate VP-ASP Cart into your existing site by using iframe.
Note: This helpnote is for VPCart 8.0
If you are using VPCart 9.0 please go to this helpnote instead:
https://helpnotes.vpcart.com/kb/604-Tips-and-Tricks-for-Version-8/1314-Integrate-VP-CART-9-into-your-existing-site-using-iframe/
If your current site does not have a shopping cart (and your current site could only be written in HTML pages or .ASP, .PHP, etc.) and you want to have a shopping cart feature while keeping your current design, there is a way to integrate VP-ASP Cart into your existing site.
Please follow these steps :
1. Install VP-ASP Cart first into a subfolder.
Example, if your domain is www.testsite.com, then please install VP-ASP cart into a subfolder first (e.g. www.testsite.com/shop).
Please note that VP-ASP Cart requires Windows server hosting to run correctly. You can read more about the server requirements through this link: http://www.vpasp.com/virtprog/info/faq_hosting.htm
If your current site is hosted on a Linux server, then you can purchase a new Windows hosting to host the VP-ASP cart.
VP-ASP provides premium Windows hosting services. Know more through the following link: http://hosting.vpasp.com
2. After you have installed VP-ASP Cart, please login to VP-ASP administration and go to : Website » Layout Manager
3. Turn OFF the following sections :
Header Logo Container
Header Top Right Container
Header Sub Container
Turn off
all the left columns :
Column MiniCart
Column Categories
Etc
.
All the right columns should also be turned off (if it exists).
All footers need to be turned off :
Footer ABC Product Search Container
Footer Free Text Container
Etc.
You just need to leave the center
Body columns turned ON :
Body Main Content,
Body News Links, etc. (Please see screenshot above).
To turn off the sections mentioned above, click Edit link, and set
Enable to No.
Then click Save Changes.
4. Go to VP-ASP admin menu : Website » Template/CSS Manager.
In the "Front Template"
dropdown menu, select "shoppage_header.htm" and click Edit.
5. In the big editor (please see screenshot above), scroll down and delete the code below:
<!-- HORIZONTAL MENU -->
<div id="vp_horomenu"><%horomenu%></div>
<!-- END HORIZONTAL MENU -->
<iframe src="http://www.testsite.com/shop/default.asp" width="600" height="700" seamless style="overflow: hidden;" onload="sizeFrame(); parent.scrollTo(0,0);" id="myFrame" scrolling="no" frameborder="0"></iframe>
<iframe src="http://www.testsite.com/shop/shopdisplaycategories.asp" width="600" height="700" seamless style="overflow: hidden;" onload="sizeFrame(); parent.scrollTo(0,0);" id="myFrame" scrolling="no" frameborder="0"></iframe>
<iframe src="http://www.otherhost.com" width="600" height="700" seamless style="overflow: hidden;" onload="sizeFrame(); parent.scrollTo(0,0);" id="myFrame" scrolling="no" frameborder="0"></iframe>
<script type="text/javascript">
<!--//
function sizeFrame() {
var F = document.getElementById("myFrame");
if(F.contentDocument) {
F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome
} else {
F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome
}
}
window.onload=sizeFrame;
//-->
</script>
background:#f7f7f7 url(../images/bg.gif) repeat-x;
width:780px;
background-color:#ccc;
11. Save and upload the file to your VP-ASP site.
12. You are done!
Now, try to preview the new page you've created (e.g. : http://www.testsite.com/shop.html).
<FORM name ="itemsform" method =" post " action ="http://www.testsite.com/shop/shopaddtocartnodb.asp">
<INPUT type ="hidden" name ="productname" value ="Product A" / >
<INPUT type ="hidden" name ="price" value ="10" / >
Product A $10 <INPUT name ="Quantity" type ="text" size ="3" value ="1">
<INPUT type ="submit" value ="Add to cart">
</FORM>
<FORM name ="itemsform" method =" post " action ="http://www.testsite.com/shop/shopaddtocartnodb.asp">
<INPUT type ="hidden" name ="productname" value ="Product B" / >
<INPUT type ="hidden" name ="price" value ="20" / >
Product B $20 <INPUT name ="Quantity" type ="text" size ="3" value ="1">
<INPUT type ="submit" value ="Add to cart">
</FORM>
<iframe src="http://www.testsite.com/shop/shopaddtocart.asp" width="600" height="700" seamless style="overflow: hidden;" onload="sizeFrame(); parent.scrollTo(0,0);" id="myFrame" scrolling="no" frameborder="0"></iframe>
ReturnURL=CleanChars(request("ReturnURL"))
ReturnURL= "http://www.testsite.com/shop.html"
5. Save the changes and upload the file shopaddtocartnodb.asp back to your VP-ASP site.