Categories: EcommerceWordpress

How to fetch WordPress feed into BigCommerce

Are you using WordPress for your blog and want to fetch it’s feed into BigCommerce? It’s simple and easy.

Follow these simple to pull the feed and display in BigCommerce footer:

1. WordPress Settings

In wordpress go to settings > Permalinks in common settings tick Post name. It will display the blogpost by post name.

2. Latest jQuery.parse

Make sure you are using latest version of jQuery file. Now after creating blog page in wordpress if you want to display it’s content in bigcommerce you must need latest jquery.parse.js file. add this js file in HtmlHead.html or footer.html

1
(function(a){a.fn.PaRSS=function(m,c,b,l,n){var i=this,g={feed_url:m,item_count:c,date_format:b,show_descriptions:l,callback_function:n};function f(){var o=new google.feeds.Feed(m);if(g.item_count){o.setNumEntries(g.item_count)}o.load(function(p){if(!p.error){d(p.feed.entries)}})}function d(o){var p="";a.each(o,function(s,t){var r="<span class='parss-title'><a href='"+t.link+"'>"+t.title+"</a></span>";if(g.date_format&&g.date_format.length>0){r+="<span class='parss-date'>"+k(t.publishedDate,g.date_format)+"</span>"}switch(g.show_descriptions){case"image":var q=h(t.content);if(q){r+="<span class='parss-image'>"+q+"</span>"}r+="<span class='parss-description'>"+t.contentSnippet+"</span>";break;case"content":r+="<span class='parss-description'>"+t.content+"</span>";break;case true:case"true":r+="<span class='parss-description'>"+t.contentSnippet+"</span>";break;default:break}p+="<li>"+r+"</li>"});$(i).empty().append(p);if(typeof n=="function"){n.call(this)}}function k(p,s){var o=["January","February","March","April","May","June","July","August","September","October","November","December"],t=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],p=new Date(Date.parse(p)),r="";for(var q=0;q<s.length;q+=1){switch(s.charAt(q)){case"d":r+=e(p.getDate());break;case"D":r+=t[p.getDay()].substring(0,3);break;case"j":r+=p.getDate();break;case"l":r+=t[p.getDay()];break;case"N":r+=p.getDay()+1;break;case"S":r+=j(p.getDate());break;case"w":r+=p.getDay();break;case"z":break;case"W":break;case"F":r+=o[p.getMonth()];break;case"m":r+=e(p.getMonth()+1);break;case"M":r+=o[p.getMonth()].substring(0,3);break;case"n":r+=p.getMonth()+1;break;case"t":break;case"L":break;case"o":case"Y":r+=p.getFullYear();break;case"y":r+=p.getFullYear().toString().substring(-2);break;case"a":r+=(p.getHours()<12)?"am":"pm";break;case"A":r+=(p.getHours()<12)?"AM":"PM";break;case"B":break;case"g":r+=(p.getHours()>12)?p.getHours()-12:p.getHours();break;case"G":r+=p.getHours();break;case"h":r+=e((p.getHours()>12)?p.getHours()-12:p.getHours());break;case"H":r+=e(p.getHours());break;case"i":r+=e(p.getMinutes());break;case"s":r+=e(p.getDate());break;case"u":r+=p.getMilliseconds();break;case"e":break;case"O":case"P":r+=p.getTimezoneOffset();break;case"T":break;case"Z":break;case"c":r+=p.toUTCString();break;case"r":r+=p.toDateString();break;case"U":r+=p.valueOf();break;default:r+=s.charAt(q);break}}return r}function j(p){var o=parseInt(p.toString().substring(p.toString().length-1));switch(o){case 1:return"st";break;case 2:return"nd";break;case 3:return"rd";break;default:return"th";break}}function e(o){var p=o.toString();if(p.length<2){p="0"+p}return p}function h(p){var o=p.match(/<img[^>+]*>/i);if(o){var q=o[0].match(/src="[^"+]*"/i),r=o[0].match(/alt="[^"+]*"/i);return"<img "+q+" "+r+" />"}return false}a.getScript("https://www.google.com/jsapi",function(){google.load("feeds","1",{callback:f})})}})(jQuery,this);

3. Create UI

Now you need to create Ul in order to display all the feed, write this code

1
<ul id="feed"></ul>

at the place where you want to display it’s content.

4. Paste this code

Now Paste this code under the jquery.parse.js file.

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">// <![CDATA[
      $(document).ready(function(){
      $("#feed").PaRSS(
      "http://blog.yourdomain.com/feed/", // rss feed url (required)
      2, // number of items (optional)
      false, // remove date
      true  // display small discription under the title in feed section
      );
});
// ]]></script>

5. Making sure ID is correct

Make sure that the ID you are giving in function and the ID you are giving in

should be same and correct.

This should display the feed as displayed in the screenshot above.

Mahek Dave

Recent Posts

Why Indian E-commerce Brands Are Moving Toward Headless Commerce

The Indian e-commerce market is developing at a striking speed. With the increasing level of…

1 week ago

AI-Powered Inventory Management: Optimizing Your Shopify Store

Ecommerce businesses have continually struggled with effectively controlling their inventory. Excess warehouse space is needed…

3 weeks ago

BigCommerce Unveils New B2B Features to Drive Sales and Efficiency

The B2B ecommerce sector is growing rapidly, and BigCommerce has responded with a powerful set…

4 weeks ago

AI-Powered WooCommerce: How Artificial Intelligence is Transforming E-commerce

Recent advances in technology are affecting the way businesses operate and communicate with their customers…

1 month ago

BigCommerce + AI: Smarter Product Recommendations That Drive Conversions

Online shopping behavior is evolving rapidly. Shoppers no longer want a basic transactional experience—they expect…

2 months ago

AI Tools for Shopify: Automate and Scale Your Store

With the faster momentum of the era of digitality, eCommerce business firms are continually seeking…

3 months ago