I've benefited over the years from many people here and wanted to share something that we've done at SPA-MART.com that others may be interested in. I've wanted to incorporate relevant content from our blog into the product page in our Miva store for a while and yesterday decided to tackle it.
The idea is to pull a specific feed from Wordpress and then display that subset on the PROD page in Miva Merchant. I elected to use the tags functionality inside of Wordpress to segment the posts with the related products, but you could possibly use categories as well. It comes down to two things: 1) Does Wordpress have the ability to push out a feed with that segmentation type? and 2) Can that segment identifier be communicated by Miva Merchant?
In our example, we are tagging each post with the relevant ProductIDs. A post can have multiple tags, so you can tag as many products as necessary in your blog post. Once you have tagged posts, you access the segmented feed with:
http://path.toyour.blog/tag/{TAGNAME}/feed/
For example, http://blog.spa-mart.com/tag/00NN1241/feed/ is the feed for all posts that reference productid 00NN1241 in our store.
With your feed set, now you just need a way to access the feed and display it on the PROD page. Probably like most of you, we've deployed jQuery so that's where my search started. After looking at a couple of options, I settled on FeedEk. It utilizes Google's Ajax Feed Loader so you can proxy content from another domain which is especially useful to keep that Wordpress installation off of your Miva Merchant server. Without the proxy, the browser will not load external content through javascript. That brings up another point: this content is delivered through AJAX after the page loads which means most search engines will not spider the content. That said, Google is making strides at spidering AJAX content and I hope the fact we used their feed loader will eventually get the content spidered.
FeedEk is pretty straight forward. It's on github at https://github.com/enginkizil/FeedEk. As you download, you really only need the FeedEk.js and FeedEk.css, in addition to the loading graphic. You will need to edit the FeedEk.js to change the default fallback feed and location of the loader graphic. The FeedEk.css is extremely straight forward and easily changed to match your site.
Step 1: Link the CSS file
If you don't incorporate the CSS into your main file, link the CSS file.
Step 2: Include the Javascript files
Personally, I prefer these in the bottom of the body of the page instead of the head tag. Just make sure jQuery is called first. Obviously, jQuery call is not necessary if you're already loading it.
Step 3: Add the Placeholder DIV
This is the container into which the blog feed will be placed. Everything inside will be replaced.
Step 4: Call the Plugin
This needs to be under the script call to FeedEk.js. By utilitzing &mvte:product:code; each product page will dynamically pull up the specific feed. If the rss feed contains no entries, the div will be empty. The attributes in the script are configurable as shown below. There are a couple more options as well that you can check out on the FeedEk site.
If you would like to see this in action, check out the following links:
http://store.spa-mart.com/p/00NN1241...-Purifier.html
http://store.spa-mart.com/p/00GL7110...00---1-Qt.html
http://store.spa-mart.com/p/00GL7129...s---25-lb.html
Our blog is currently under-utilized so this functionality is few and far between on our site at the moment. But I know some of you are really into blogging and could deploy something like this just by going into your blog posts and adding tags. As I mentioned earlier, you can really use any of Wordpress's segmentation types. I settled on single tags for the PROD page to make it very product specific. The API also supports sending multiple tags if that is something you felt you wanted to do for possibly main product in addition to related products. Categories, authors and even full-text searches can be used to craft feeds. More information on Wordpress feeds can be found at https://codex.wordpress.org/WordPress_Feeds. I hope this helps anyone that was looking to tie their Wordpress-powered blog to their Miva Merchant store site.
The idea is to pull a specific feed from Wordpress and then display that subset on the PROD page in Miva Merchant. I elected to use the tags functionality inside of Wordpress to segment the posts with the related products, but you could possibly use categories as well. It comes down to two things: 1) Does Wordpress have the ability to push out a feed with that segmentation type? and 2) Can that segment identifier be communicated by Miva Merchant?
In our example, we are tagging each post with the relevant ProductIDs. A post can have multiple tags, so you can tag as many products as necessary in your blog post. Once you have tagged posts, you access the segmented feed with:
http://path.toyour.blog/tag/{TAGNAME}/feed/
For example, http://blog.spa-mart.com/tag/00NN1241/feed/ is the feed for all posts that reference productid 00NN1241 in our store.
With your feed set, now you just need a way to access the feed and display it on the PROD page. Probably like most of you, we've deployed jQuery so that's where my search started. After looking at a couple of options, I settled on FeedEk. It utilizes Google's Ajax Feed Loader so you can proxy content from another domain which is especially useful to keep that Wordpress installation off of your Miva Merchant server. Without the proxy, the browser will not load external content through javascript. That brings up another point: this content is delivered through AJAX after the page loads which means most search engines will not spider the content. That said, Google is making strides at spidering AJAX content and I hope the fact we used their feed loader will eventually get the content spidered.
FeedEk is pretty straight forward. It's on github at https://github.com/enginkizil/FeedEk. As you download, you really only need the FeedEk.js and FeedEk.css, in addition to the loading graphic. You will need to edit the FeedEk.js to change the default fallback feed and location of the loader graphic. The FeedEk.css is extremely straight forward and easily changed to match your site.
Step 1: Link the CSS file
If you don't incorporate the CSS into your main file, link the CSS file.
Code:
<link rel="stylesheet" href="//path.to/css/FeedEk.css">
Step 2: Include the Javascript files
Personally, I prefer these in the bottom of the body of the page instead of the head tag. Just make sure jQuery is called first. Obviously, jQuery call is not necessary if you're already loading it.
Code:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript" src="//path.to/js/FeedEk.js"></script>
Step 3: Add the Placeholder DIV
This is the container into which the blog feed will be placed. Everything inside will be replaced.
Code:
<div id="divRss"></div>
Step 4: Call the Plugin
This needs to be under the script call to FeedEk.js. By utilitzing &mvte:product:code; each product page will dynamically pull up the specific feed. If the rss feed contains no entries, the div will be empty. The attributes in the script are configurable as shown below. There are a couple more options as well that you can check out on the FeedEk site.
Code:
<script type="text/javascript">$(function () {
$('#divRss').FeedEk({
FeedUrl: 'http://path.toyour.blog/tag/&mvte:product:code;/feed/',
MaxCount: 5,
ShowDesc : true,
ShowPubDate:true,
DescCharacterLimit:200,
TitleLinkTarget:'_blank'
});
});
</script>
If you would like to see this in action, check out the following links:
http://store.spa-mart.com/p/00NN1241...-Purifier.html
http://store.spa-mart.com/p/00GL7110...00---1-Qt.html
http://store.spa-mart.com/p/00GL7129...s---25-lb.html
Our blog is currently under-utilized so this functionality is few and far between on our site at the moment. But I know some of you are really into blogging and could deploy something like this just by going into your blog posts and adding tags. As I mentioned earlier, you can really use any of Wordpress's segmentation types. I settled on single tags for the PROD page to make it very product specific. The API also supports sending multiple tags if that is something you felt you wanted to do for possibly main product in addition to related products. Categories, authors and even full-text searches can be used to craft feeds. More information on Wordpress feeds can be found at https://codex.wordpress.org/WordPress_Feeds. I hope this helps anyone that was looking to tie their Wordpress-powered blog to their Miva Merchant store site.
Comment