In this Help Note, we will show you how to integrate VP-ASP Cart (v7) into a WordPress site by using iFrame.
If you are using VPCart (v8) please go to this helpnote instead :
http://helpnotes.vpasp.com/kb/20-Shopping-Cart-Display/1213-Integrate-VPCart-v8-into-WordPress-site-using-iFrame/
In the screenshot above, you can see that VP-ASP Cart is
seamlessly inserted
directly under the WordPress header template..
The yellow highlighted frame above is the VP-ASP Cart.
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 VP-ASP Cart site.
Check out our shopping cart plans and choose the appropriate plan that suits your needs if you don't have VP-ASP Cart yet.
But if you want a more complete package
(VP-ASP Cart + 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 VP-ASP Cart, 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 :
<iframe src="http://www.yourvpaspsite.com/" width="100%" scrolling="no" onload="parent.scrollTo(0,0);"></iframe>
<style>
.post-meta, #widgets, .post-title, #respond { display: none;}
#wrapper{ padding-left: 0;
padding-right: 0;
width: 779px;
}
iframe { border: 0px none;}
._blank { height: 0px}
#header { width: 779px; margin: 0px auto}
#content { margin-top: 0px;}
.post-entry p { margin-top: 0px }
iframe { overflow: hidden; margin-left: 0px }
#footer { width: 779px; }
</style>
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>
<?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 99.
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 VP-ASP Cart so that it will suit the WordPress layout.
12.
Please log-in to your VP-ASP Cart administration and go to : Website » Layout Manager
13. Turn OFF the following sections :
Header Logo Container
Header Top Right Container
Header Sub Container
.
All footers need to be turned off :
Footer ABC Product Search Container
Footer Free Text Container
Etc.
You just need to leave the center Left columns and 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.
14. Go to VP-ASP admin menu : Website » Template/CSS Manager .
In the " Front Template " dropdown menu, select " shoppage_header.htm " and click Edit .
15. 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 -->
16. Click Save .
17. On the same administration menu, in the " Front Template " dropdown menu, select " shoppage_trailer.htm " and click Edit .
18. In the big editor (please see screenshot above), locate the code :
</body>
<script type="text/javascript" src="http://wp-shop.cartmonkey.com/templates/default-2cols/js/iframeResizer.contentWindow.min.js"></script>
<div id="footer">
<div id="vp_footer"><%footer%></div>
</div>
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="prod_border_table">
<tbody><tr><td class="td1">
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="table1">
<tbody><tr><td class="td2">
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="table2">
<tbody><tr><td class="td3">
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="table3">
<tbody><tr><td class="prod_border_td">
<!--CONTENT START-->
<div>
$ <h3>[translate message]</h3>
$ <img src="[ContentImage]" align="right" alt="" class="image" />
[translate message2]
</div>
<!--CONTENT END-->
</td></tr>
</tbody></table>
</td></tr>
</tbody></table>
</td></tr>
</tbody></table>
</td></tr>
</tbody></table>
25. Save and upload the file to your VP-ASP site.
26. Log-in to your VP-ASP administration, go to : Advanced Settings » Software Configuration > search for xCheckoutIndicator.
Set to No.
27. You are done!
Below is the preview of seamless VP-ASP Cart integration with WordPress site: