Integrate VPCart (v9) into WordPress site using iFrame

Integrate VPCart (v9) into WordPress site using iFrame

In this helpnote, we will show you how to integrate VPCart (v9) into a WordPress site by using iFrame .

If you are using v7, please go to this helpnote instead :
http://helpnotes.vpasp.com/kb/30-Miscellaneous-VP-ASP-Facilities/1180-Integrate-VP-ASP-Cart-700-into-WordPress-site-using-iFrame/

If you are using v8, please go to this helpnote instead :
https://helpnotes.vpcart.com/kb/20-Shopping-Cart-Display/1213-Integrate-VPCart-v8-into-WordPress-site-using-iFrame/



In the screenshot above, you can see that VPCart is seamlessly inserted directly under the WordPress header template..
The yellow highlighted frame above is the VPCart.

Please note that you must have both a WordPress account and a working WordPress URL before you can even begin the integration process.So if you haven't registered yet, you may sign up at: https://en.wordpress.com/signup/

In addition, you must also have an existing VPCart site. Check out our shopping cart plans and choose the appropriate plan that suits your needs if you don't have VPCart yet.

But if you want a more complete package (VPCart + Hosting plan), you may choose from our Business Ready Plans instead.

Now, if you've already set up both your WordPress URL and a working VPCart, you may now start the integration process by following the steps below:

1. Log-in to your WordPress admin.

2. In the left panel., go to : Pages and click Add New button.



3. Enter the new page title (e.g. Shop)



4. Then enter the following code into the big editor, directly under the page title :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="http://wp.cartmonkey.com/wp-content/themes/spasalon/iframeResizer.min.js" type="text/javascript"></script><iframe id="demo900frame" src="http://www.yourvpcartsite.com" name="demo900frame" width="100%" height="150" style="border: 0px none;" scrolling="no"></iframe><script type="text/javascript">// <![CDATA[
$(document).ready(function(){
$('#demo900frame').iFrameResize();
})
// ]]></script>
<style type="text/css">#respond,#widgets,.footer-blank,.post-meta,.post-title{display:none}#footer,#header,#wrapper{width:779px}#wrapper{padding-left:0;padding-right:0}iframe{border:0;overflow:hidden;margin-left:0}._blank{height:0}#header{margin:0 auto}#content,.post-entry p{margin-top:0}</style>

NOTE : Please replace http://www.yourvpcartsite.com/ with your VPCart URL.

Please see the screenshot below. In this example, we put http://wp-shopv9.cartmonkey.com/ as the VPCart URL.
You can change that URL to your VPCart URL.

5. In the bottom right panel, under Page Attributes, locate Template dropdown, and choose : fullwidthpage.
NOTE : fullwidthpage
template is available for selected themes only. In this example, we are using Spasalon theme that already has the fullwidthpage template file.

You can browse WordPress Full Width Themes to get a full width theme you like.



6. In the top right panel, click Publish.



7. In the left panel, go to Appearance > Editor.



8. In the right panel, click fullwidthpage Page Template.



9. In the big editor, locate the code below :

<h2 class="blog_detail_head"><?php the_title(); ?></h2>

10. Please replace with :

<?php if($_GET['page_id'] != xx):?>
<h2 class="blog_detail_head"><?php the_title(); ?></h2>
<?php else: ?>
<?php endif; ?>

Note : Please replace xx with the new page ID you have created in Step 2 until 6 above.

10a. You can get the new page ID by going to left panel : Pages > Locate your new page > Click Edit.



10b. Your new page ID should be the permalink mentioned below the title:



In the example above, your new page ID is 171.

10c. Now if you look back at Step 10 above, your complete code would be like the example below :



11. Click Update File button.



Now the WordPress settings are completely done. All you have to do now is to configure your VPCart so that it will suit the WordPress layout.

12. Please log-in to your VPCart administration and go to : Website » Layout Manager

13. Turn OFF the following sections :

Top Header Container (Desktop)
Top Header Upper Container
Top Slider Banners Container
Header Sub Container



You may also turn off the following Body Blogs section as Wordpress basically have these feature already:
Body Blog Links



All footers need to be turned off :
Footer ABC Product Search Container
Footer Container
Copyright Container



To turn off the sections mentioned above, click Edit link, and set Enable to No .
Then click Save Changes.

14. For Left and Right column you can turn them OFF (optional).



15. Go to VPCart admin menu : Website » Template/CSS Manager .
In the " Front Template " dropdown menu, select " shoppage_trailer.htm " and click Edit .



16. In the big editor (please see screenshot above), locate the code :

</body>

Insert the new code below just before the </body>:

<script type="text/javascript" src="http://wp-shopv9.cartmonkey.com/templates/default/js/iframeResizer.contentWindow.min.js"></script>

Please refer to the screenshot below :



17. Locate the code below and remove it:

<%'2019.06.10 - Bug Fix All footer disabled from Layout Manager and footer should be without grey background%>
<div id="vp_footer" class="footer <%footerhide_class%>">
<%footer%>
<div id="vp_copypower" class="container">
<%copypower%>
</div>
<noscript>
<h5 class="notification">JavaScript is Disabled</h5>
</noscript>
</div>



18. Click Save .



19. Log-in to your VPCart administration, go to : Advanced Settings » Software Configuration > search for xCheckoutIndicator.
Set to No.

20. You are done!

Below is the preview of seamless VPCart integration with WordPress site:
http://wp.cartmonkey.com/?page_id=171

 


Times Viewed:
1459
Added By:
Wilson Keneshiro
Date Created:
2/25/2021
Last Updated:
2/25/2021