{"id":11125,"date":"2024-08-20T12:37:41","date_gmt":"2024-08-20T12:37:41","guid":{"rendered":"https:\/\/spreecommerce.org\/?post_type=cpt_integrations&#038;p=11125"},"modified":"2024-08-21T13:25:45","modified_gmt":"2024-08-21T13:25:45","slug":"buttercms-and-spree-integration","status":"publish","type":"cpt_integrations","link":"https:\/\/spreecommerce.org\/integrations\/buttercms-and-spree-integration\/","title":{"rendered":"ButterCMS and Spree integration"},"content":{"rendered":"\n<p><a href=\"https:\/\/buttercms.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">ButterCMS<\/a>&nbsp;is a&nbsp;<a href=\"https:\/\/spreecommerce.org\/headless-ecommerce\/\" target=\"_blank\" rel=\"noreferrer noopener\">headless<\/a>&nbsp;content management system that boasts an easy-to-use marketing dashboard and blazing fast content API for modern apps. By using ButterCMS, you can give your sales and marketing team full control creative control of even the most complex, segmented content.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The benefits of using ButterCMS for your ecommerce business<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Using ButterCMS, you can have separate interfaces for your marketing staff and store admins.<\/li>\n\n\n\n<li>Global content API that integrates into any tech stack.<\/li>\n\n\n\n<li>With a headless CMS, you don\u2019t need to worry about the database and infrastructure behind your blog.<\/li>\n\n\n\n<li>Easily migrate your blog to any other solution in the future without losing content or data.<\/li>\n\n\n\n<li>Scaling, maintenance, and security are all handled by the ButterCMS team.<\/li>\n\n\n\n<li><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to integrate ButterCMS with Spree<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">CREATING A SKELETON FOR THE BLOG PAGES<\/h3>\n\n\n\n<p>Before modifying the website layout and adding a link to the blog, we have to generate the Spree views:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>docker-compose run web bash<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>rails g spree:frontend:copy_storefront\n<\/code><\/pre>\n\n\n\n<p>The above command populated the app\/views\/spree directory with the platform views.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CREATING THE CONTROLLER<\/h3>\n\n\n\n<p>Create the new controller file for our blog:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>touch app\/controllers\/blogs_controller.rb\n<\/code><\/pre>\n\n\n\n<p>The controller will consist of two actions: index and show. The index action will be used to display all blog posts and the show action to render specific blog posts.<\/p>\n\n\n\n<p>Open the previously created controller file and put the following contents in there:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class BlogsController &lt; Spree::StoreController\n def index\n\n end\n\n def show\n\n end\nend<\/code><\/pre>\n\n\n\n<p>Notice that we inherit from the Spree::StoreController, not ApplicationController. Thanks to this, the blog page is an integral part of the platform.<\/p>\n\n\n\n<p>You can start with the blank pages, add a link to the layout, and hook up Butter CMS when the navigation works properly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CREATING VIEWS<\/h3>\n\n\n\n<p>The controller definition is ready, so you can add blank views:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>mkdir app\/views\/blogs\/<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>touch app\/views\/blogs\/index.html.erb<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>touch app\/views\/blogs\/show.html.erb\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">UPDATING ROUTES<\/h3>\n\n\n\n<p>The blog pages are not yet reachable, so you have to update the routes configuration. Open the config\/routes.rb file and add the following line:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>resources :blogs, only: %i&#91;show index], path: 'blog'\n<\/code><\/pre>\n\n\n\n<p>The path \u201cblogs\u201d looks slightly weird, so I passed the path option with the custom singular name.<\/p>\n\n\n\n<p>Now, you can access&nbsp;<a href=\"http:\/\/localhost:3000\/blog\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/localhost:3000\/blog<\/a>&nbsp;and&nbsp;<a href=\"http:\/\/localhost:3000\/blog\/not-existing-post\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/localhost:3000\/blog\/not-existing-post<\/a>, and you will see blank pages in the platform layout. You are now ready to put some content there.<\/p>\n\n\n\n<p>The last step regarding blog accessibility is to add a link to the menu. Open \/app\/views\/spree\/shared\/_main_nav_bar.html.erb and add the new element to the menu list:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;li&gt;\n&lt;%= link_to \"Blog\", blogs_path, class: 'nav-link main-nav-bar-item main-nav-bar-category-button' %&gt;\n&lt;\/li&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">CONFIGURING YOUR BUTTER CMS ACCOUNT<\/h3>\n\n\n\n<p>Visit&nbsp;<a href=\"https:\/\/buttercms.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/buttercms.com\/<\/a>&nbsp;and create a new account if you don\u2019t have one. Sign in and visit the settings page \u2013&nbsp;<a href=\"https:\/\/buttercms.com\/settings\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/buttercms.com\/settings\/<\/a>.<\/p>\n\n\n\n<p>The \u201cRead API token\u201d is the only thing you need to effectively connect Butter CMS with your Spree platform. Having that token, we can now install the Butter CMS gem in our application.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">INSTALLING THE BUTTER CMS GEM<\/h3>\n\n\n\n<p>Run the following command to add the gem to the Gemfile and install it in your system:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>docker-compose run web bash<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>bundle add buttercms-ruby\n<\/code><\/pre>\n\n\n\n<p>You need an initializer file that will save our Butter CMS API key at the application start. Create it:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>touch config\/initializers\/butter_cms.rb<\/code><\/pre>\n\n\n\n<p>Put the following contents there:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ButterCMS::api_token = \"YourToken\"\n<\/code><\/pre>\n\n\n\n<p>Replace the \u201cYourToken\u201d placeholder with the API key present in the settings tab of your ButterCMS account. Remember not to store this token in the repository. It should be a secret credential not visible anywhere on the internet. One of the best ways to handle such sensitive data is to store them in the environment variables. For this article\u2019s purpose, I will put the API key directly in the initializer.<\/p>\n\n\n\n<p>You are now ready to add the blog listing page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">BLOG LISTING PAGE<\/h3>\n\n\n\n<p>Open BlogsController and add the following code to the index action so we can pull all posts from ButterCMS and pass them to the view:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@posts = ButterCMS::Post.all\n<\/code><\/pre>\n\n\n\n<p>Now, open app\/views\/blogs\/index.html.erb and display the post titles along with the link to the specific blog post:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"container mb-3 d-md-flex\"&gt;\n &lt;div class=\"col-md-12 col-lg-9\"&gt;\n &nbsp; &lt;div class=\"row\"&gt;\n &nbsp; &nbsp; &lt;% @posts.each do |post| %&gt;\n &nbsp; &nbsp; &nbsp; &lt;div class=\"col-sm-4 col-6 mb-3 mb-md-4 pr-sm-0 pr-md-0 pl-md-4 pl-sm-4\"&gt;\n &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=\"product-component-name\"&gt;\n &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;%= post.title %&gt;\n &nbsp; &nbsp; &nbsp; &nbsp; &lt;\/div&gt;\n &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=\"product-component-price\"&gt;\n &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;%= link_to('Read more', blog_path(id: post.slug)) %&gt;\n &nbsp; &nbsp; &nbsp; &nbsp; &lt;\/div&gt;\n &nbsp; &nbsp; &nbsp; &lt;\/div&gt;\n &nbsp; &nbsp; &lt;% end %&gt;\n &nbsp; &lt;\/div&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Feel free to add your own styles to make the blog listing page look even better.<\/p>\n\n\n\n<p>The last step is to implement a single blog post page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">BLOG POST PAGE<\/h3>\n\n\n\n<p>Open the show action in the BlogsController and add the following line:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@post = ButterCMS::Post.find(params&#91;:id])\n<\/code><\/pre>\n\n\n\n<p>You can now access the post object in the view and display it the same way we would show records in an ordinary Ruby on Rails application.<\/p>\n\n\n\n<p>Open app\/views\/blogs\/show.html.erb view and add the following code there:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"container pt-4 product-details\"&gt;\n &lt;div class=\"row\"&gt;\n &nbsp; &lt;div class=\"col-12 col-md-5\"&gt;\n &nbsp; &nbsp; &lt;div id=\"product-description\"&gt;\n &nbsp; &nbsp; &nbsp; &lt;h1 class=\"mt-3 mt-md-0 text-center text-md-left product-details-title\"&gt;\n &nbsp; &nbsp; &nbsp; &nbsp; &lt;%= @post.title %&gt;\n &nbsp; &nbsp; &nbsp; &lt;\/h1&gt;\n &nbsp; &nbsp; &lt;\/div&gt;\n &nbsp; &lt;\/div&gt;\n &nbsp; &lt;div class=\"pb-4 pt-md-5 row\"&gt;\n &nbsp; &nbsp; &lt;%= @post.body.html_safe %&gt;\n &nbsp; &lt;\/div&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>To be more consistent with the platform style we can also add breadcrumbs at the top of the page:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"container\"&gt;\n &lt;nav id=\"breadcrumbs\" class=\"col-12 mt-1 mt-sm-3 mt-lg-4\"&gt;\n &nbsp; &lt;ol class=\"breadcrumb\"&gt;\n &nbsp; &nbsp; &lt;li class=\"breadcrumb-item\"&gt;\n &nbsp; &nbsp; &nbsp; &lt;%= link_to('\/') do %&gt;\n &nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt;Home&lt;\/span&gt;\n &nbsp; &nbsp; &nbsp; &lt;% end %&gt;\n &nbsp; &nbsp; &nbsp; &lt;span itemprop=\"item\" itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/Thing\" itemid=\"\/\"&gt;&lt;\/span&gt;\n &nbsp; &nbsp; &lt;\/li&gt;\n &nbsp; &nbsp; &lt;li class=\"breadcrumb-item\"&gt;\n &nbsp; &nbsp; &nbsp; &lt;%= link_to(blogs_path) do %&gt;\n &nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt;Blog&lt;\/span&gt;\n &nbsp; &nbsp; &nbsp; &lt;% end %&gt;\n &nbsp; &nbsp; &nbsp; &lt;span itemprop=\"item\" itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/Thing\" itemid=\"\/\"&gt;&lt;\/span&gt;\n &nbsp; &nbsp; &lt;\/li&gt;\n &nbsp; &nbsp; &lt;li class=\"breadcrumb-item\"&gt;\n &nbsp; &nbsp; &nbsp; &lt;%= link_to(blog_path(id: @post.slug)) do %&gt;\n &nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt;&lt;%= @post.title %&gt;&lt;\/span&gt;\n &nbsp; &nbsp; &nbsp; &lt;% end %&gt;\n &nbsp; &nbsp; &lt;\/li&gt;\n &nbsp; &lt;\/ol&gt;\n&lt;\/div&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>ButterCMS&nbsp;is a&nbsp;headless&nbsp;content management system that boasts an easy-to-use marketing dashboard and blazing fast content API for modern apps. By using ButterCMS, you can give your sales and marketing team full control creative control of even the most complex, segmented content. The benefits of using ButterCMS for your ecommerce business How to integrate ButterCMS with Spree [&hellip;]<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":true,"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":""},"cpt_integrations_category":[985],"class_list":["post-11125","cpt_integrations","type-cpt_integrations","status-publish","hentry","cpt_integrations_category-marketing-tools"],"acf":[],"_links":{"self":[{"href":"https:\/\/spreecommerce.org\/wp-json\/wp\/v2\/cpt_integrations\/11125","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spreecommerce.org\/wp-json\/wp\/v2\/cpt_integrations"}],"about":[{"href":"https:\/\/spreecommerce.org\/wp-json\/wp\/v2\/types\/cpt_integrations"}],"wp:attachment":[{"href":"https:\/\/spreecommerce.org\/wp-json\/wp\/v2\/media?parent=11125"}],"wp:term":[{"taxonomy":"cpt_integrations_category","embeddable":true,"href":"https:\/\/spreecommerce.org\/wp-json\/wp\/v2\/cpt_integrations_category?post=11125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}