Recipe info (ratings, prep time, etc.) on the blog index page

If you are looking to put some extra information (for example: recipe ratings, calories, prep time, etc.) on your blog index page (or anywhere else on your site where you have access to the {{ article }} object, follow this guide.

We will be taking a bit of code from the main recipekit.liquid file (which you should reference for all other information / data if you need it).

{%- assign rk_resource_id = article.id | downcase -%}
{%- assign rk_mf = article.metafields.recipekit[rk_resource_id] -%}
{%- if rk_mf != blank -%}

  {% comment %} Grab recipe rating, use with {{ rating_count }} and {{ current_rating }} in your HTML {% endcomment %}
  {%- assign current_rating = rk_mf.recipe_rating | ceil | default: 5 | at_most: 5 -%}
  {%- assign current_decimal_rating = rk_mf.recipe_rating | round: 1 | default: 5 | at_most: 5 -%}
  {%- assign rating_count = rk_mf.rating_count | default: '1' | at_least: '1' -%}

  {%- comment -%}
    Prep & Cook Time Formatting. Use with {{ rk_prep_time }} and {{ rk_cook_time }} in your HTML 
  {%- endcomment -%}
  {% assign rk_prep_time_split = rk_mf.prep_time | split: ' ' %}
  {% assign rk_prep_time = rk_prep_time_split | first %}
  {% assign rk_prep_duration = rk_prep_time_split | last %}
  {% if rk_prep_time contains '.' and rk_prep_duration == 'hours' %}
    {% assign rk_prep_hour_time = rk_prep_time | split: '.' | first %}
    {% assign rk_prep_lang_hours = rk_prep_hour_time | plus: 0 | pluralize: rk_lang_hour, rk_lang_hours %}
    {% assign rk_prep_minute_time = rk_prep_time | split: '.' | last %}
    {% assign rk_prep_lang_minutes = rk_prep_minute_time | plus: 0 | pluralize: rk_lang_minute, rk_lang_minutes %}
    {% assign rk_prep_time = rk_prep_hour_time | append: ' ' | append: rk_prep_lang_hours | append: ' ' | append: rk_prep_minute_time | append: ' ' | append: rk_prep_lang_minutes %}
  {% elsif rk_prep_duration == 'hours' %}
    {% assign rk_prep_duration = rk_prep_time | plus: 0 | pluralize: rk_lang_hour, rk_lang_hours %}
    {% assign rk_prep_time = rk_prep_time | append: ' ' | append: rk_prep_duration %}
  {% elsif rk_prep_duration == 'minutes' %}
    {% assign rk_prep_duration = rk_prep_time | plus: 0 | pluralize: rk_lang_minute, rk_lang_minutes %}
    {% assign rk_prep_time = rk_prep_time | append: ' ' | append: rk_prep_duration %}
  {% endif %}

  {% assign rk_cook_time_split = rk_mf.cook_time | split: ' ' %}
  {% assign rk_cook_time = rk_cook_time_split | first %}
  {% assign rk_cook_duration = rk_cook_time_split | last %}
  {% if rk_cook_time contains '.' and rk_cook_duration == 'hours' %}
    {% assign rk_cook_hour_time = rk_cook_time | split: '.' | first %}
  {% assign rk_cook_lang_hours = rk_cook_hour_time | plus: 0 | pluralize: rk_lang_hour, rk_lang_hours %}
    {% assign rk_cook_minute_time = rk_cook_time | split: '.' | last %}
    {% assign rk_cook_lang_minutes = rk_cook_minute_time | plus: 0 | pluralize: rk_lang_minute, rk_lang_minutes %}
    {% assign rk_cook_time = rk_cook_hour_time | append: ' ' | append: rk_cook_lang_hours | append: ' ' | append: rk_cook_minute_time | append: ' ' | append: rk_cook_lang_minutes %}
  {% elsif rk_cook_duration == 'hours' %}
    {% assign rk_cook_duration = rk_cook_time | plus: 0 | pluralize: rk_lang_hour, rk_lang_hours %}
    {% assign rk_cook_time = rk_cook_time | append: ' ' | append: rk_cook_duration %}
  {% elsif rk_cook_duration == 'minutes' %}
    {% assign rk_cook_duration = rk_cook_time | plus: 0 | pluralize: rk_lang_minute, rk_lang_minutes %}
    {% assign rk_cook_time = rk_cook_time | append: ' ' | append: rk_cook_duration %}
  {% endif %}
  {%- comment -%}
    End Time Formatting
  {%- endcomment -%}


  {% comment %} Example usage HTML that probably exists in your blog.liquid file {% endcomment %}
  <div class="card"><br>	<h1>{{ article.title }}</h1><br>	<p>Recipe rated {{ current_rating }} stars by {{ rating_count }} users</p><br>	<p>Prep: {{ rk_prep_time }}</p><br>	<p>Cook: {{ rk_cook_time }}</p><br>  </div>
{% endif %}<br>

To add the recipe stars rating to your article card, use this code:

{%- assign rk_resource_id = article.id | downcase -%}
{%- assign rk_mf = article.metafields.recipekit[rk_resource_id] -%}
{%- if rk_mf != blank -%}

  {% comment %} Grab recipe rating {% endcomment %}
  {%- assign current_rating = rk_mf.recipe_rating | ceil | default: 5 | at_most: 5 -%}
  {%- assign current_decimal_rating = rk_mf.recipe_rating | round: 1 | default: 5 | at_most: 5 -%}
  {%- assign rating_count = rk_mf.rating_count | default: '1' | at_least: '1' -%}

  <style>
    .star-rating {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .stars-container {
      display: inline-flex;
      align-items: center;
      gap: 2px;
    }
    .star {
      font-size: 24px;
      line-height: 0.7;
      display: inline-block;
      vertical-align: middle;
      position: relative;
      top: -2px;
    }
    .star-filled {
      color: #FFD700;
    }
    .star-empty {
      color: #D3D3D3;
    }
    .review-count {
      font-size: 14px;
      vertical-align: middle;
    }
  </style>

  <div class="card">
    <h1>{{ article.title }}</h1>
    <div class="recipe-rating">
      <div class="star-rating">
        <div class="stars-container">
          {% for i in (1..5) %}
            {% if i <= current_rating %}
              <span class="star star-filled">★</span>
            {% else %}
              <span class="star star-empty">☆</span>
            {% endif %}
          {% endfor %}
        </div>
        <span class="review-count">({{ rating_count }} {{ rating_count | pluralize: 'review', 'reviews' }})</span>
      </div>
    </div>
  </div>
{% endif %}