Integrate VP-ASP Cart 7.00 into WordPress site using iFrame

Integrate VP-ASP Cart 7.00 into WordPress site using iFrame


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>

NOTE : Please replace http://www.yourvpaspsite.com/ with your VP-ASP 7.00 Cart URL.

Please see the screenshot below. In this example, we put http://wp-shop.cartmonkey.com/ as the VP-ASP 7.00 Cart URL.
You can change that URL to your VP-ASP 7.00 Cart 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 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>

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

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

Please refer to the screenshot below :



19. Locate the code and remove it:

<div id="footer">
<div id="vp_footer"><%footer%></div>
</div>



20. Click Save .



21. Open your VP-ASP site file layout.css located in the "templates\default-2cols\css" folder, using notepad or text editor.
Please remove all the code inside the file layout.css.

Then open this css file in your browser : http://wp-shop.cartmonkey.com/templates/default-2cols/css/layout.css.
Please select all of the code there, copy it and paste into your layout.css file.

Note : You may need to tweak any background color and title color in the file to suit your WordPress theme color.

Once done, save the file and upload to your site.

22. Open your VP-ASP site file shop700.css located in the "templates\default-2cols\css" folder, using notepad or text editor.
Please remove all the code inside the file shop700.css.

Then open this css file in your browser : http://wp-shop.cartmonkey.com/templates/default-2cols/css/shop700.css.
Please select all of the code there, copy it and paste into your shop700.css file.

Note : You may need to tweak any background color and title color in the file to suit your WordPress theme color.

Once done, save the file and upload to your site.

23. Open your VP-ASP site file tabcontent700.css located in the "stylesheets" folder, using notepad or text editor.
Please remove all the code inside the file tabcontent700.css.

Then open this css file in your browser : http://wp-shop.cartmonkey.com/stylesheets/tabcontent700.css.
Please select all of the code there, copy it and paste into your tabcontent700.css file.

Once done, save the file and upload to your site.

24. Open VP-ASP site file tmp_default.htm located in the " templates\default-2cols\" folder and replace all the code inside the file with the code below:

<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:
http://wp.cartmonkey.com/?page_id=7

 


Times Viewed:
9748
Added By:
Wilson Keneshiro
Date Created:
12/17/2014
Last Updated:
8/15/2016