Integrate VP-ASP Cart into your existing site using iframe

Integrate VP-ASP Cart into your existing site using iframe


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 -->




6. Click Save.



7. Now, in your current site (non VP-ASP cart), create a new page using your existing design (e.g. shop.html or shop.php etc.). This new page should use your existing header, footer or side bar (if any).

8. Edit the new page you just created in notepad or text editor and insert this new code somewhere in the file where you want the VP-ASP Cart to show :

<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>

If you want the iframe to list the categories rather than the default page, simply change the url to e.g :

<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>

If you are hosting your VP-ASP Cart outside of your current host, you can also load it using the iframe e.g. :

<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>

Note : You can adjust the width="600" and height="700" to suit your existing site layout.

9. In the same file, please insert this new javascript code before the closing </HEAD> :

<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>

10. Open VP-ASP site file layout.css located in the " templates\default-2cols\css " or " templates\default-3cols\css " folder and do changes to the below code :

Please remove this code (around line 8) :

background:#f7f7f7 url(../images/bg.gif) repeat-x;

Please remove this code (around line 46) :

width:780px;

Please remove this code (around line 140) :

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).


Adding a Product to VP-ASP Cart from an outside static or asp/php page.

If you want to add an item to the VP-ASP shopping cart from a static html or asp/php page, then there are additional steps you can follow:

1. Let's say you have a current static product page in html (e.g. http://www.testsite.com/products.html) that has two products:

Product A - Price $10
Product B - Price $20

You can insert a script into each product HTML code to create an "Add to cart" button.

The following is the sample code for 2 products as mentioned above:

<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>


Basically, you need to input a value into each of the hidden fields ("productname" and "price") for every product you have.

Also, the action url must be set to the page shopaddtocartnodb.asp with the full url of where your VP-ASP site is installed at.

The example above assumes your VP-ASP site is located in the subfolder "shop" in your current Windows hosting.

If you have your VP-ASP site installed in an external host, then you just change the full url to e.g. http://www.otherhost.com/shopaddtocartnodb.asp.

This is the preview of the abovementioned example if you insert two products into your existing page :



2. Next, you need to edit the new page (refer to step 8 of integrating VP-ASP Cart into your existing site as mentioned above) to change the iframe source from http://www.testsite.com/shop/default.asp or http://www.testsite.com/shop/shopdisplaycategories.asp to e.g. http://www.testsite.com/shop/shopaddtocart.asp.

So the complete change in the iframe code would be e.g. :

<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>

3. Download and open your VP-ASP Cart file shopaddtocartnodb.asp using notepad or text editor and locate the code below (around line 20):

ReturnURL=CleanChars(request("ReturnURL"))

4. Please replace the code above "CleanChars(request("ReturnURL"))" to use your non VP-ASP site url that has iframe in order to display VP-ASP Cart e.g :

ReturnURL= "http://www.testsite.com/shop.html"

5. Save the changes and upload the file shopaddtocartnodb.asp back to your VP-ASP site.

6. You are done. Try to preview your existing product page (see step 1 above, this is the product page that you have already updated to create Add to cart buttons) e.g. :
http://www.testsite.com/products.html

Please click the "Add to cart" button and check if the product can be added to your VP-ASP Cart with seamless display integration in your existing site.


Times Viewed:
10723
Added By:
Wilson Keneshiro
Date Created:
11/20/2014
Last Updated:
5/22/2019