Here's how to show Opencart products in Wordpress

Quote

Post by elastic » Fri Jul 15, 2011 10:37 pm

I wanted to show the ‘Featured’ products module that’s displayed on my Opencart homepage, on my separate Wordpress website. Also, I still wanted to administrate the module using Opencart (I wanted it to be live etc).

Here’s how I did it.

1. Create a file called curl.php

2. Paste into it the following code (and save it).

Code: Select all

<?php 
$ch = curl_init("http://www.opencartinstall.com");
$html = curl_exec($ch);
print $html;
?>
(changing ‘www.opencartinstall.com’ to the domain where you’ve installed your Opencart shop)

3. Copy your newly created curl.php file to the root of your Wordpress template folder.

4. It may well already be there, but make sure in your Wordpress template header.php file (within the <head></head> section), you’ve got a link to the latest version of jQuery. The following code will do that;

Code: Select all

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
5. In the Wordpress page template where you’d like your Opencart ‘Featured’ products to be displayed, paste in this bit of javascript;

Code: Select all

<script type="text/javascript"> 
    $("document").ready(function() {
        $("#pull-featured").load("<?php bloginfo( 'template_url' ); ?>/curl.php #featured");
});
</script>
..and after it, this div;

Code: Select all

<div id="pull-featured"></div>
6. In your Opencart’s catalog/view/theme/yourtheme/template/module/featured.tpl add in the #featured id reference by changing this;

Code: Select all

<div class="box">
  <div class="box-heading"><?php echo $heading_title; ?></div>
to this..

Code: Select all

<div class="box" id="featured">
  <div class="box-heading"><?php echo $heading_title; ?></div>
(again, replace ‘yourtheme’ above with the folder name of your Opencart theme).


basically what’s happening is that the javascript is asking curl.php to ‘load’ the homepage of the shop. Once that’s loaded, it finds within the code of that page the div that we’ve given the ID of ‘featured’ to, and pulls everything within it into the ‘pull-featured’ div in the Wordpress template.

* however *

It just loads and displays the html as is, so you’ll need to style the new #featured div with your Wordpress template’s stylesheet (easily done with css)

More importantly though is that the add to cart buttons won’t work. This is because in Opencart version 1.5 the add to cart buttons in the Featured module rely on javascript to function. The wordpress template doesn’t have that javascript as it lives on the opencart site. Potentially, we could load that javascript into Worpdress, but I ran into problems doing that, so I had to get ‘creative’ ;-) I created another add to cart button that would work outside Opencart, and hid the native Opencart button with css.

so...

1. in Opencart’s catalog/view/theme/yourtheme/template/module/featured.tpl

change:

Code: Select all

<div class="cart"><a onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button"><span><?php echo $button_cart; ?></span></a></div>
to:

Code: Select all

<div class="cart oc-addtocart"><a onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button"><span><?php echo $button_cart; ?></span></a></div>

	<div class="wp-addtocart">
<form action="http://www.opencartinstall.com/index.php?route=checkout/cart" method="post">
<input type="hidden" name="product_id" value="<?php echo $product['product_id']; ?>" />
<input type="hidden" name="quantity" value="1" />
<input type="submit" name="submit" value="ADD TO CART" class="submit" />
</form></div>
2. in your Worpress template stylesheet, add;

Code: Select all

.oc-addtocart {display:none;}
3. in your Opencart tempate stylesheet add;

Code: Select all

.wp-addtocart {display:none;}
The above hides each button depending on which site you’re on!

Hope this helps

cheers
Matt
elastic
Newbie
Posts
3
Joined
Wed Jun 22, 2011 12:17 am
Top

Re: Here's how to show Opencart products in Wordpress

Quote

Post by uGoran » Fri Oct 07, 2011 12:03 am

Hi all.

In case someone needs this variant:
I`m using ajax to populate featured product when page loads.
Roughly, it would go like this:

1. create new layout and call it "featured".
2. set route to (e.g.) product/featured
3. create new controller called "featured.php" and put it in controller/product/ folder
add something like this to featured.php:

Code: Select all

<?php 
class ControllerProductFeatured extends Controller { 	
	public function index() { 
				    	
		if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/product/featured.tpl')) {
			$this->template = $this->config->get('config_template') . '/template/product/featured.tpl';
		} else {
			$this->template = 'default/template/product/featured.tpl';
		}
		
		$this->children = array(
			'common/content_top'
		);      
	
        $json['output'] = $this->render();
        
        $this->load->library('json');

        $this->response->setOutput(Json::encode($json));
  	}
}
?>
You will notice that I`m calling "template/product/featured.tpl" file, you can call it as you like.
4. In this file, add only this (call module which is bound to content_top)

Code: Select all

<?php echo $content_top; ?>
Assuming that you have enabled "featured module" (to content_top position) and added some products in it, you should go to step 5 if not, then this is what you have to do:

- go to admin area, find modules section and enable module called "featured"
- add some products (write in top line)
- click on button "add module" and choose location - "content_top" in my case
- edit template/module/featured.tpl if you want.


5. now check this link: http://website.com/index.php?route=product/featured
You should see json code...

Now, all you need to do is fetch that page somehow. I`m using the same call which is used to display cart:

Code: Select all

<?        
        if ( is_home() || is_front_page() ) {
            // This is a homepage
         ?> 
         
            /* Ajax Btn */
            $j.ajax({
                url: '<?=get_bloginfo('url');?>/store/index.php?route=product/featured',
                dataType: 'json',
                type: "POST",
                success: function(json) {
                    if (json['output']) {
                        $j('#FeaturedProducts').html(json['output']);
                    }
                }
            });
        
<?      } else {
            // This is not a homepage
        }
?>
Hope it`s going to help someone.
uGoran
Newbie
Posts
1
Joined
Thu Oct 06, 2011 11:44 pm
Top

Re: Here's how to show Opencart products in Wordpress

Quote

Post by readyman » Sun Nov 20, 2011 8:34 am

That's cool, well done - seems like it could work. I'm working on a PHP solution, rather than front-end.

http://www.alreadymade.com
Follow me on twitter.com/alreadymade

User avatar
readyman
Global Moderator
Posts
728
Joined
Wed May 20, 2009 5:16 am
Location - Sydney
Top

Re: Here's how to show Opencart products in Wordpress

Quote

Post by whatinspiresu » Wed Apr 11, 2012 5:42 am

i got this working with the first code, but not sure why the cURL didnt work. since the cart/wp install are on the same url, i just did it like this...

Code: Select all

		  
<script type="text/javascript"> 
              jQuery("document").ready(function() {
                  jQuery("#pull-featured").load("http://mywebsite.com/store/ #featured");
          });
</script>
    <div id="pull-featured"></div>

and added the id #featured inside the featured.tpl like in the first example here.
whatinspiresu
Newbie
Posts
3
Joined
Wed Apr 11, 2012 2:22 am
Top

Re: Here's how to show Opencart products in Wordpress

Quote

Post by webtechchick » Mon Jul 16, 2012 1:53 pm

This is excellent. Anyone modify this for Joomla?

Jen
Webtechchick.com
webtechchick
Newbie
Posts
1
Joined
Mon Jul 16, 2012 1:52 pm
Top

Re: Here's how to show Opencart products in Wordpress

Quote

Post by karunshakya » Thu Jul 26, 2012 1:42 pm

Thanks for this awesome tutorial. I got the product list displaying thanks to all of you. But I am facing one problem. When I click the "ADD TO CART" button displayed in WordPress site, it redirects to http://mysite/index.php?route=checkout/cart but the page here displays Your shopping cart is empty!. Please Help!!
User avatar
karunshakya
Newbie
Posts
2
Joined
Tue Jul 24, 2012 7:03 am
Location - Nepal
Top

Re: Here's how to show Opencart products in Wordpress

Quote

Post by seito » Sat Nov 03, 2012 1:49 am

I have same problem under openCart 1.5.2.1. When I click on ADD TO CART button in wordpress blog I get redirected to cart page, but no product gets selected. Is there any solution to this?
karunshakya wrote:Thanks for this awesome tutorial. I got the product list displaying thanks to all of you. But I am facing one problem. When I click the "ADD TO CART" button displayed in WordPress site, it redirects to http://mysite/index.php?route=checkout/cart but the page here displays Your shopping cart is empty!. Please Help!!
seito
Newbie
Posts
6
Joined
Sat Mar 24, 2012 12:12 am
Top

Re: Here's how to show Opencart products in Wordpress

Quote

Post by ibietela » Mon Sep 30, 2013 10:33 am

??? Anyone tried this with Opencart 1.5.6 and wp3.6.1??
ibietela
New member
Posts
23
Joined
Fri Nov 09, 2012 12:39 am
Top

Re: Here's how to show Opencart products in Wordpress

Quote

Post by TAC » Sun Oct 20, 2013 4:16 am

I was excited when I saw this post then got disheartened as it looks very complicated :(

So I just tried a WP plugin called 'OpenCart Product Display' and it seemed to work. However, it does not allow you to choose which products will show and it also seems all your product images must be in the /images folder.

So am still looking for an 'easy' solution :)
User avatar
TAC
Active Member
Posts
816
Joined
Sun Sep 26, 2010 1:33 am
Location - England
Top
Post Reply
Return to “Integration”
Who is online

Users browsing this forum: No registered users and 8 guests