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

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…

2 weeks 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…

3 weeks 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…

2 months ago

BigCommerce + AI: Smarter Product Recommendations That Drive Conversions

Rapidly evolving changes in online customer expectations and online shopping behaviour-they would no longer like…

2 months ago

B2B Boom: How BigCommerce Streamlines Wholesale Operations

BigCommerce is not just another excellent solution for eCommerce wholesale in the B2B space. As…

1 year ago

Understanding and Leveraging Shopify’s AI for Business Growth

Success in the fast transforming world of e-commerce depends on staying ahead of the curve.…

1 year ago