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:
In wordpress go to settings > Permalinks in common settings tick Post name. It will display the blogpost by post name.
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); |
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.
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> |
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.
BigCommerce is not just another excellent solution for eCommerce wholesale in the B2B space. As…
Success in the fast transforming world of e-commerce depends on staying ahead of the curve.…
In eCommerce, the concept of "headless commerce" is gaining traction. But don't disregard it because…
Welcome to "Designing a React E-Commerce App for Digital Products," the first instalment of our…
The two main options available to eCommerce organisations today for their technology architecture are headless…
Node.js has revolutionized digital innovation since its 2009 founding. Node.js popularity has soared as more…