Integrate VP-CART 9 into your existing site using iframe

Integrate VP-CART 9 into your existing site using iframe

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>



7. BELOW it, please insert this new code:

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

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

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

We have setup a test store using HTML files and integrated the above steps to the site:
http://pizzahouse.cartmonkey.com/shop.html


Creating an External Cart page using Iframe to load from VPCart shopaddtocart.asp page

You may want to have a menu or link somewhere in your external site called eg "View Cart", this when clicked will load the V9 cart page but still integrated with your current external site layout.

1. In your external site (non VP-CART 9), create a new page using your existing design (e.g. cart.html.). This new page should use your existing header, footer or side bar (if any).

2. Edit the new page you just created eg cart.html in notepad or text editor and insert this new code somewhere in the file where you want the VP-CART 9 cart page to show :

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

NOTE: Please change "www.example.com/shop" to your VPCart 9 site URL.

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

<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:
http://pizzahouse.cartmonkey.com/cart.html

Basically, if you have other VPCart page you wish to be a menu in your external site, just follow the above steps and just change the shopaddtocart.asp to any other V9 page you want.
Example, you also want to have a menu called "My Account" in your external site, then follow the same steps as above, change the shopaddtocart.asp to shopcustadmin.asp.


Adding a Static Product to VP-CART 9 from an external static html/asp/php page.

If you want to add an item to the VP-CART 9 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.example.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.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>


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-CART 9 site is installed at.

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

If you have your VP-CART 9 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 above mentioned example if you insert two products into your existing page :



2. Next, you will need to create the new page in the root used for showing cart page eg cart.html (similar to the step 10 above) using iframe and have it load from VPCart 9 cart page e.g. http://www.example.com/shop/shopaddtocart.asp.

The iframe code would look like e.g. :

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

3. Download and open your VP-CART 9 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"))" with the url to your cart.html e.g :

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.


Times Viewed:
3314
Added By:
Wilson Keneshiro
Date Created:
5/22/2019
Last Updated:
6/25/2019