Scot's Blogger and the Suivant Ready Theme

Miva Merchant Modules and Development
Scot's Blogger, a Miva Merchant blogging module, default to Bootstrap CSS and page templates during install. It's easy to make the updates so your blog page looks good if you're using the Suivant Ready Theme and the steps are detailed in this post.

Scot's Blogger and the Suivant Ready Theme

This post describes how to use Scot's Blogger with the Suivant Ready Theme for Miva Merchant in three easy steps.


Scot's Blogger, a Miva Merchant blogging module, default to Bootstrap CSS and page templates during install. It's easy to make the updates so your blog page looks good if you're using the Suivant Ready Theme and the steps are detailed in this post.

by Scot Ranney • April 01, 2015

Scot's Blogger


Please go to installation page at: http://scotsscripts.com/faqs/s... for updated installation instructions and current page templates. The page template code below is out of date but is still a useful reference if you have questions.

---------------------------------------------------------

1. Create or Edit Your Blog Page

Scot's Blogger uses a store page to display blog posts, comments, and related information. This is where we'll put the base blog page template.

If you have a blog page ready to go, open that up in your Miva Merchant administration. If not, create a new page:

MENU > USER INTERFACE > +

If you are creating a new page, choose a simple page code, such as BLOG.

Replace the contents of your blog page with the template code below:

<mvt:item name="html_profile" />
<head>
<title>Scot's Miva Scripts: Miva Merchant & Miva Script News</title>
<mvt:item name="head" param="head_tag" />
<mvt:item name="scotsblogger" param="head" />
<mvt:assign name="g.screencheck" value="'BLOG,' $ g.screencheck" />
</head>
<mvt:item name="body">
<mvt:item name="hdft" param="global_header" />
<mvt:item name="scotsblogger" param="content" />
<mvt:item name="hdft" param="global_footer" />
<mvt:item name="scotsblogger" param="foot" />
</mvt:item>
</html>

If you used BLOG for your blog page code, skip to the the items section below.

If you used something else such as ARTICLES, then look for the line starting with mvt:assign just above the closing head tag and replace the value BLOG with your page code. Pay special attention to the punctuation and make sure you change nothing but the page code; the single quotes are necessary.

This is what it would look like if your blog page code is ARTICLES:

<mvt:assign name="g.screencheck" value="'ARTICLES,' $ g.screencheck" />
Items

Next, click on the ITEMS tab of the new page because some items will be missing. The following is a basic list of Suivant page items that will probably be missing.

  • toolkit
  • tokenlist
  • readytheme
  • navbar
  • ga_Tracking
  • ga_jsencode
  • cstomerlink
  • cssui_links
  • buttons
  • affiliatelink

2. Update the SCOTSBLOGGER_TEMPLATE Page

Version 1.04 - Updated: May 16, 2015

The SCOTSSBLOGGER_TEMPLATE runs the blog page. It displays posts, comments, sidebar, and takes care of all the micro and meta data. Suivant uses different CSS than the default template so we're going to update the default template to look good with Suivant.

Open the SCOTSBLOGGER_TEMPLATE page in your Miva Merchant admin then replace the template code with the code below (you can click in the code below and then use CTRL-A to select it all, CTRL-C to copy it.)

<mvt:comment>
|
| SuivantReady Theme blog template
|
| itemscope, itemtype, and itemprop are microdata entries from http://www.schema.org/Blog
|
| Use the google snippet testing tool to see microdata in action - https://developers.google.com/structured-data/testing-tool/
|
</mvt:comment>
<div class="clear"></div>
<div id="scotsblogger" itemscope itemtype="http://schema.org/Article">
<mvt:comment>
|
| load blog data
|
</mvt:comment>
<mvt:item name="scotsblogger" />
<mvt:comment>
|
| admin menu/designation, success/error messages
|
</mvt:comment>
<mvt:if expr="g.scotsblogger_success">
<div class="message message-success scotsbloggeralert"></div>
</mvt:if>
<mvt:if expr="g.scotsblogger_error">
<div class="message message-danger scotsbloggeralert"></div>
</mvt:if>
<div class="row">
<mvt:comment>
|
| search results - closing mvt:if just above the right sidebar comment below
|
</mvt:comment>
<mvt:if expr="l.settings:scotsblogger:searchresults">
<div class="column three-fourths scotsblogger-shadow bg-white">
<div id="scotsblogger-searchresults">
<h3 class="well align-center lead">Search Results</h3>
<mvt:foreach iterator="post" array="scotsblogger:searchresults">
<p><a class="scotsblogger-title maroon" href=""></a></p>
<p class="scotsblogger-subtitle black"></p>
<p class="scotsblogger-synopsis"></p>
<hr>
</mvt:foreach>
</div>
</div>
<mvt:else>
<div class="column three-fourths scotsblogger-shadow bg-white">
<mvt:comment>
|
| post display OR selected post display - 9 column row, includes comments
|
</mvt:comment>
<mvt:item name="scotsblogger" param="current post" />
<div class="scotsblogger-titlebox">
<div class="align-right scotsblogger-author text-muted"></div>
<a href="/support/scots-blogger-and-the-suivant-ready-theme-1.html" itemprop="url">
<h3 class="text-info lead scotsblogger-title maroon" itemprop="name">Scot's Blogger and the Suivant Ready Theme</h3>
</a>
<mvt:if expr="l.settings:scotsblogger:currentpost:subtitle">
<p class="scotsblogger-subtitle" itemprop="about">This post describes how to use Scot's Blogger with the Suivant Ready Theme for Miva Merchant in three easy steps.</p>
</mvt:if>
<mvt:if expr="l.settings:scotsblogger:currentpost:synopsis">
<hr>
<p class="scotsblogger-synopsis" itemprop="description">Scot's Blogger, a Miva Merchant blogging module, default to Bootstrap CSS and page templates during install. It's easy to make the updates so your blog page looks good if you're using the Suivant Ready Theme and the steps are detailed in this post.</p>
</mvt:if>
<p class="float-right scotsblogger-author">by <span itemprop="author">Scot Ranney</span> • <span class="muted" itemprop="datePublished" datetime="2015-04-01T00:22:00">April 01, 2015</span></p>
<div class="clear"></div>
</div>
<div class="breaker"></div>
<div id="scotsblogger-post" itemprop="articleBody">
</div>
<mvt:comment>
|
| post star ratings: this uses ajax to update post ratings on the page instead of reloading
|
</mvt:comment>
<div id="scotsblogger-ratings" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<div class="scotsbloggermyrating scotsbloggermyblograting" id="scotsbloggermyrating-0b867dba35">

</div>
<div class="float-right">
<mvt:if expr="l.settings:scotsblogger:currentpost:rating:votes GT 1">
<mvt:assign name="l.settings:vote_label" value="'votes'" />
<mvt:else>
<mvt:assign name="l.settings:vote_label" value="'vote'" />
</mvt:if>
<small>
(
<span itemprop="ratingValue">
<mvt:eval expr="l.settings:scotsblogger:currentpost:rating:rating ROUND 0" />
</span>
/5, <span itemprop="reviewCount">9</span> )
</small>
my rating:
</div>

		
<div class="float-right">overall rating: </div> <div class="clearfix"></div> </div> <mvt:comment> | | post search tags - putting tag: on a search term turns it into a tag search. If you want to search for the tag "dogs" you would search for "tag:dogs" (this is just FYI) | </mvt:comment> <mvt:if expr="l.settings:scotsblogger:currentpost:taglist"> <div> <p class="align-right"> <mvt:foreach iterator="tag" array="scotsblogger:currentpost:taglist"> <a class="btn btn-default btn-xs" href="https://www.scotsscripts.com/mm9/merchant.mvc?screen=BLOG&store_code=SMS&_scotsblogger_search=tag:"></a> </mvt:foreach> </p> </div> </mvt:if> <mvt:comment> | | Comments - comments can be read by anyone but to leave a comment, customer must be logged in | DOCS comment come from l.settings:scotsblogger_currentpost:comments | </mvt:comment> <mvt:if expr="l.settings:scotsblogger:currentpost:comments_on EQ '1' AND l.settings:scotsblogger:currentpost:category:comments_on EQ '1' AND l.settings:scotsblogger:currentpost:comments"> <mvt:assign name="l.settings:scotsblogger:comments_on" value="'1'" /> </mvt:if> <mvt:if expr="l.settings:scotsblogger:comments_on"> <div id="scotsblogger-comments"> <h3 class="align-center bg-white lead well"> 1 <mvt:if expr="l.settings:scotsblogger:currentpost:totalcomments NE 1"> Comments <mvt:else> Comment </mvt:if> </h3> <mvt:foreach iterator="comment" array="scotsblogger:currentpost:comments"> <mvt:if expr="NOT l.settings:comment:censored OR (l.settings:comment:censored AND g.scotsblogger_moderator)"> <mvt:if expr="l.settings:comment:censored"> <div class="message message-danger"> <h4 class="lead">censored</h4> <mvt:else> <div class="scotsblogger-commentbox"> </mvt:if> <p class="scotsblogger-commenttitle"></p> <div class="comment"> <p> <mvt:eval expr="glosub(encodeentities(l.settings:comment:comment),(asciichar(13) $ asciichar(10)),'</p><p>')" /> </p> </div> <p class="scotsblogger-author float-right"> , <mvt:if expr="g.scotsblogger_catmoderator OR g.scotsblogger_globalmoderator OR g.scotsblogger_globaladmin"> <mvt:if expr="l.settings:comment:censored"> | <a class="scotsblogger-censor text-muted scotsblogger_confirmation" href="https://www.scotsscripts.com/mm9/merchant.mvc?screen=BLOG&store_code=SMS&scotsblogger_postid=0b867dba35&scotsblogger_commentcensorid=">uncensor</a> <mvt:else> | <a class="scotsblogger-censor text-muted scotsblogger_confirmation" href="https://www.scotsscripts.com/mm9/merchant.mvc?screen=BLOG&store_code=SMS&scotsblogger_postid=0b867dba35&scotsblogger_commentcensorid=">censor</a> </mvt:if> | <a class="scotsblogger-delete text-muted scotsblogger_confirmation" href="https://www.scotsscripts.com/mm9/merchant.mvc?screen=BLOG&store_code=SMS&scotsblogger_postid=0b867dba35&scotsblogger_commentdeleteid=">delete</a> </mvt:if> </p> <div class="clearfix"></div> </div> </mvt:if> </mvt:foreach> </div> <mvt:comment> | | Leave Comment - customer must be logged in | </mvt:comment> <mvt:if expr="g.customer:id"> <h3 class="align-center well lead">Leave a Comment</h3> <div class="row"> <div class="column whole"> <form action="https://www.scotsscripts.com/mm9/merchant.mvc?" method="post"> <div class="form-row"> <label for="commentTitle">Title</label> <input name="_scotsblogger_comment_title" type="text" class="form-control" style="font-weight: bold; font-family: arial;" id="commentTitle" placeholder="comment title" autocomplete="off"> </div> <div class="form-row"> <label for="comment">Comment</label> <textarea class="scotsblogger-commenttextarea" name="_scotsblogger_comment" rows="10" type="text" id="comment" placeholder="enter your comment here"></textarea> </div> <div class="form-row"> <input type="submit" value="Post Comment" title="Post Comment" class="float-right button button-square"> </div> <input type="hidden" name="store_code" value="SMS"> <input type="hidden" name="screen" value="BLOG"> <input type="hidden" name="scotsblogger_category_code" value=""> <input type="hidden" name="scotsblogger_postid" value="0b867dba35"> </form> </div> </div> <mvt:else> <h3 class="align-center well lead">Please log in to leave a comment.</h3> </mvt:if> <mvt:else> <h6 class="align-right">Comments Closed</h6> </mvt:if> </div> </mvt:if> <mvt:comment> | | right sidebar | </mvt:comment> <div id="scotsblogger-sidebar" class="column one-fourth"> <mvt:comment> | | Admin acknowledgment | </mvt:comment> <mvt:if expr="g.scotsblogger_admin"> <div class="row"> <p class="text-danger float-right">Blog admin: </p> </div> </mvt:if> <mvt:comment> | | search form | </mvt:comment> <form action="https://www.scotsscripts.com/mm9/merchant.mvc?" method="post" class="row column nrp" style="display: block;"> <div class="form-row"> <input type="text" name="_scotsblogger_search" value="" placeholder="Search…" class="column three-fourths"> <button type="submit" class="column one-fourth button button-square bg-white border-gray charcoal">search</button> </div> <input type="hidden" name="screen" value="BLOG"> <input type="hidden" name="Store_Code" value="SMS"> </form> <div class="breaker"></div> <div class="breaker"></div> <mvt:comment> | | categories | </mvt:comment> <mvt:item name="scotsblogger" param="categories" /> <mvt:if expr="l.settings:scotsblogger:categories"> <h4 class="lead">Categories</h4> <p> <mvt:foreach iterator="category" array="scotsblogger:categories"> <a href=""> <mvt:if expr="(g.scotsblogger_category_code EQ l.settings:category:code)"> <span class="maroon"></span> <mvt:else> </mvt:if> </a> </mvt:foreach> </p> </mvt:if> <mvt:comment> | | posts in a category | </mvt:comment> <mvt:item name="scotsblogger" param="category posts" /> <mvt:if expr="l.settings:scotsblogger:categoryposts"> <h4 class="lead"></h4> <p> <mvt:foreach iterator="post" array="scotsblogger:categoryposts"> <a href=""> <mvt:if expr="l.settings:scotsblogger:currentpost:id EQ l.settings:post:id"> <span class="maroon"></span> <mvt:else> </mvt:if> </a> </mvt:foreach> </p> </mvt:if> <mvt:comment> | | Recent posts exclude category: this gives us a list of global posts and if we're in a category it won't load any from that category | </mvt:comment> <mvt:item name="scotsblogger" param="recent posts exclude category" /> <mvt:if expr="l.settings:scotsblogger:posts"> <h4 class="lead">Recent Posts</h4> <p> <mvt:foreach iterator="post" array="scotsblogger:posts"> <mvt:if expr="(NOT g.scotsblogger_category_code OR (g.scotsblogger_category_code AND (l.settings:post:catcode NE g.scotsblogger_category_code)))"> <a href=""> <mvt:if expr="l.settings:scotsblogger:currentpost:id EQ l.settings:post:id"> <span class="maroon"></span> <mvt:else> </mvt:if> </a> </mvt:if> </mvt:foreach> </p> </mvt:if> <mvt:if expr="g.scotsblogger_publisher OR g.scotsblogger_author"> <p class="align-right"> <a href="https://www.scotsscripts.com/mm9/merchant.mvc?store_code=SMS&screen=SCOTSBLOGGER_ADMIN&scotsblogger_category_code=">authors portal</a> </p> </mvt:if> <mvt:comment> | | end sidebar | </mvt:comment> </div> <mvt:comment> | | end scotsblogger container | </mvt:comment> </div>

3. Edit The CSS

The last thing to do is add some CSS. Go to the Scot's Blogger administration and click on the CSS tab:

MENU > UTILITIES > SCOT'S BLOGGER > CSS

Save the following CSS into that spot.

.scotsblogger-titlebox {
border-bottom: 2px solid #eee;
}
.lead {
font-weight: normal;
}
.well {
background: #fafafa;
border: 1px solid #eee;
box-shadow: inset 0px 0px 2px #eee;
padding: 10px 15px;
border-radius: 4px;
}
.scotsblogger-synopsis {
font-size: 1em;
}
.scotsbloggermyblograting {
top: 5px;
}
.scotsbloggeralert {
padding: 5px;
}
.scotsblogger-search {
border-top: none;
}
.scotsblogger-shadow {
box-shadow: 2px 2px 10px rgba(0, 0, 0, .2);
}

Finished! If all went well, your blog page will look as nice as your other Suivant themed Miva Merchant pages.


overall rating:
my rating: log in to rate
The blog posts on Scot's Scripts are made using by Scot's Blogger, a full featured Wordpress replacement Miva Merchant blogging module.