Reviews

Description

Used On

• Bundle
• Course Landing
• Site Landing

Template Markup

TODO: Move <script> out of template

<section class="reviews {% if section.settings.background_color_preset != 'none' %}{{ section.settings.background_color_preset | append: '-section-color-preset' }}{% endif %}" data-preview-item="reviews">
  <div class="container">

    <div class="section__content">

      {% if section.settings.heading != blank %}
        <h3 class="section__heading">{{ section.settings.heading }}</h3>
        {% if section.settings.subheading != blank %}
          <h4 class="section__subheading">{{ section.settings.subheading }}</h4>
        {% endif %}
      {% endif %}

      {% if section.settings.reviews.size > 0 %}
        <div class="reviews__list">
          {% for review in section.settings.reviews %}
            <div class="reviews__list-item" data-review-id="{{ forloop.index }}">

              <span class="review__star" data-id="{{ review.rating }}">
                {% for index in (1..5) %}
                  <input type="radio" name"rating" value="{{ index }}"  />
                  {% if index <= review.rating %}
                    <i></i>
                  {% endif %}
                {% endfor %}
              </span>

              <h5 class="review__title">
                {{ review.title }}
              </h5>

              <span class="review__author">By {{ review.user.full_name }}</span>

              <div class="review__body review__body--partial">
                <p>{{ review.review_text | truncate: 250 }}</p>
                {% if review.review_text.size >= 250 %}
                  <button class="review__show-more button">
                    {{ 'liquid.views.curriculum_course_landing_page.read_more_text' | translate }}
                  </button>
                {% endif %}
              </div>

              <div class="review__body review__body--complete">
                <p>{{ review.review_text }}</p>
                <button class="review__show-less button">
                  {{ 'liquid.views.curriculum_course_landing_page.read_less_text' | translate }}
                </button>
              </div>

            </div>
          {% endfor %}
        </div>
      {% endif %}

    </div>

  </div>
</section>

<script type="text/javascript">
  $(document).ready(function() {

    var $showButton = $('button[class*="review__show-"]');

    $showButton.on('click', function(e) {

      e.preventDefault();

      var $this = $(this),
          $partial = $this.parents('.reviews__list-item').find('.review__body--partial'),
          $full = $this.parents('.reviews__list-item').find('.review__body--complete');

      if($this.hasClass('review__show-more')) {
        $full.show();
        $partial.hide();
      }
      else {
        $full.hide();
        $partial.show();
      }
    });

  });

</script>

{% style %}
...
{% endstyle %}

{% schema %}
...
{% schema %}

Style

Alignment, Layout & Style modifiers will be encapsulated with {% style %} & {% endstyle %} tags.

section.reviews {

  .section__heading,
  .section__subheading {
    text-align: {{ section.settings.heading_alignment }};
  }
}

Schema

Schema will be encapsulated with {% schema %} & {% endschema %} tags.

{
  "label": "Reviews",
  "settings": [
    {
      "label": "Headings",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": "What customers are saying"
        },
        {
          "type": "text",
          "id": "subheading",
          "label": "Subheading",
          "default": ""
        },
        {
          "type": "radio",
          "id": "heading_alignment",
          "label": "Alignment",
          "description": "Headings will inherit the same alignment",
          "default": "left",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ]
        }
      ]
    },
    {
      "label": "Reviews",
      "description": "Include reviews for this course",
      "settings": [
        {
          "type": "reviews_picker",
          "id": "reviews",
          "label": "Course Reviews",
          "default": []
        }
      ]
    },
    {
      "label": "Background",
      "settings": [
        {
          "type": "select",
          "id": "background_color_preset",
          "label": "Color Preset",
          "description": "Presets can be configured in the Colors configuration menu",
          "default": "primary",
          "options": [
            { "value": "none", "label": "None" },
            { "value": "primary", "label": "Primary" },
            { "value": "secondary", "label": "Secondary" },
            { "value": "tertiary", "label": "Tertiary" }
          ]
        }
      ]
    }
  ]
}