In this helpnote, we will show you how to integrate VP-CART 9.0 into your existing site by using iframe.
Note: This helpnote is for VPCart 9.0
If you are using VPCart 8.0 please go to this helpnote instead:
https://helpnotes.vpcart.com/kb/13-Navigation/1179-Integrate-VP-ASP-Cart-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-CART 9 into your existing site.
Please follow these steps :
1. Install VP-CART 9 first into a subfolder.
Example, if your domain is www.example.com, then please install VP-CART 9 into a subfolder first (e.g. www.example.com/shop).
Please note that VP-CART 9 requires Windows server hosting to run correctly. You can read more about the server requirements through this link: https://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-CART 9.
VP-CART provides premium Windows hosting services. Know more through the following link: https://hosting.vpasp.com/
2. After you have installed VP-CART 9.0, please login to VP-CART administration and go to : Website » Layout Manager
3. Turn OFF the following sections :
Top Navbar Header Container (Desktop)
Top Header Upper Container
Top navigation bar
Welcome bar just below the top navigation
Turn off
all the left columns and right columns, by going to:
CONTENT LAYOUT CMS FORM > under the "Default" dropdowns, then next to it a dropdowns please select "CMS Layout Edit". Click Action button.
Set both "
" and
to No and click Save Changes button.
All footers need to be turned off :
Footer ABC
Footer Container
Copyright Container.
4. Still in your V9 admin, go to top menu: Website > Template/CSS Manager.
5. In the right panel, locate "Front Template" dropdowns and select "shoppage_trailer.htm" and click Edit.
6. You should see the HTML code is loaded in the big text box. Please locate the following code:
jQl.loadjQdep('<%=generate_js_css_filestring ("plugins/products/product.js")%>');
-->
</script>
<script type="text/javascript" src="plugins/iframeresizer/iframeResizer.contentWindow.min.js"></script>
8. Click the "Save shoppage_trailer.htm" green button.
9. You should see message: Write to File Successfully!
10. Now, in your external site (non VP-CART 9), 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).
11. 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-CART 9 to show :
<iframe src="http://www.example.com/shop/default.asp" style="border: 0px solid; width: 100%; max-width: 100%" 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.example.com/shop/shopdisplaycategories.asp" style="border: 0px solid; width: 100%; max-width: 100%" seamless style="overflow: hidden;" onload="sizeFrame(); parent.scrollTo(0,0);" id="myFrame" scrolling="No" frameborder="0"></iframe>
If you are hosting your VP-CART 9 outside of your current host, you can also load it using the iframe e.g. :<iframe src="http://www.otherhost.com" style="border: 0px solid; width: 100%; max-width: 100%" seamless style="overflow: hidden;" onload="sizeFrame(); parent.scrollTo(0,0);" id="myFrame" scrolling="No" frameborder="0"></iframe>
<script type="text/javascript" src="//www.example.com/shop/plugins/iframeresizer/iframeResizer.min.js"></script>
<script type="text/javascript">
<!--//
iFrameResize({ log: false }, '#myFrame')
var w = window.innerWidth;
if( w < 800){
document.getElementById('myFrame').setAttribute('style',"width: "+w+"px; max-width: 100%;")
}
//-->
</script>
NOTE: Please change "www.example.com/shop" to your VPCart 9 site URL.
13. Go to your VPCart administration: Advanced Settings > Software Configuration > search for xquickview_enable and set to No.
Please also set config xbreadcrumbs to No if you do not wish the breadscrumbs to show inside the iframe.
14. You are done!
Now, try to preview the new page you've created (e.g. : http://www.example.com/shop.html).<iframe src="http://www.example.com/shop/shopaddtocart.asp" style="border: 0px solid; width: 100%; max-width: 100%" seamless style="overflow: hidden;" onload="sizeFrame(); parent.scrollTo(0,0);" id="myFrame" scrolling="No" frameborder="0"></iframe>
<script type="text/javascript" src="//www.example.com/shop/plugins/iframeresizer/iframeResizer.min.js"></script>
<script type="text/javascript">
<!--//
iFrameResize({ log: false }, '#myFrame')
var w = window.innerWidth;
if( w < 800){
document.getElementById('myFrame').setAttribute('style',"width: "+w+"px; max-width: 100%;")
}
//-->
</script>
NOTE: Please change "www.example.com/shop" to your VPCart 9 site URL.
4. Now, in any of your external site pages, you can insert the new menu code eg:<a href="cart.html">View Cart</a>
You can preview our test site for the View Cart: <FORM name ="itemsform" method =" post " action ="http://www.example.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.example.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.example.com/shop/shopaddtocart.asp" style="border: 0px solid; width: 100%; max-width: 100%" seamless style="overflow: hidden;" onload="sizeFrame(); parent.scrollTo(0,0);" id="myFrame" scrolling="No" frameborder="0"></iframe>
You can refer to chapter above "Creating an External Cart page using Iframe to load from VPCart shopaddtocart.asp page" on how to setup cart.html.
ReturnURL=CleanChars(request("ReturnURL"))
ReturnURL= "http://www.example.com/cart.html"
5. Save the changes and upload the file shopaddtocartnodb.asp back to your VP-CART 9 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.example.com/products.html
Please click the "Add to cart" button and check if the product can be added to your VP-CART 9 with seamless display integration in your existing site.
You can try to simulate the above in our test page below:
http://pizzahouse.cartmonkey.com/products.html
Clicking the Add to Cart button will add the static products to cart.
You can also refer to the homepage of our HTML site:
http://pizzahouse.cartmonkey.com/index.html
Scroll down to the middle of page "Selected Pizzas" you should see 4 products.
These are also static products we added ourselves. These products not exist in VPCart site as it is just static products. Please mouse over the product and click the "Add to cart" button.
It will allow to add static products to cart with your own defined products name and price.