JSFiddle - React, Tailwind, and code Playground

by Webdevkin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
<ul id="products"></ul>

<script id="template-product-item" type="text/template">
    <li 
        class="product <%= classAvailable %> <%= classLast %>" 
        data-id="<%= id %>"
    >
        <div class="product__title"><%= title %></div>
        <div class="product__description"><%= description %></div>
        <div class="product__price"><%= price %> руб.</div>
        <div class="product__store"><%= textAvailable %></div>

        <ul class="product__rating js-rate" data-rating="<%= rating %>">
            <% for (var i = 1; i<= maxRating; i++) { %>
                <li><%= i %></li>
            <% } %>
        </ul>

        <% if (available) { %>
            <button class="js-add-to-cart">Добавить в корзину</button>
        <% } %>
    </li>
</script>

CSS

.product {
  list-style: none;
  margin: 10px 0;
  padding: 10px 20px;
  border: solid 1px gray;
}

.product__rating {
  padding-left: 0;
  margin: 10px 0;
}

.product__rating li {
  list-style: none;
  display: inline-block;
  padding: 0 5px;
  color: white;
  background-color: orange;
  cursor: pointer;
}

.product.-last .product__price {
  color: red;
}

.product.-last:not(.-available) {
  border-color: red;
}

JavaScript

var products = [{
	id: 1,
  title: 'iphone se',
  description: 'description for iphone se',
  price: 20000,
  available: true,
  count: 8
}, {
	id: 2,
  title: 'iphone 7',
  description: 'description for iphone 7',
  price: 100000,
  available: true,
  count: 3
}, {
	id: 3,
  title: 'ipad',
  description: 'description for ipad',
  price: 25000,
  available: false,
  count: 0
}];

function getDataForProductItemTemplate(product) {
    var isLast = product.count <= 5,
        price = isLast ? Math.round(product.price * 0.8) : product.price,
        classAvailable = product.available ? '-available' : '',
        classLast = isLast ? '-last' : '',
        textAvailable = product.available ? 'В наличии' : 'Нет в наличии';

    return {
        id: product.id,
        title: product.title,
        description: product.description,
        available: product.available,
        rating: product.rating,

        price: price,
        classAvailable: classAvailable,
        classLast: classLast,
        maxRating: 5,
        textAvailable: textAvailable
    }
}

var templateProductItem = document.getElementById('template-product-item').innerHTML,
    compiled = _.template(templateProductItem),
    html = products.map(function(product) {
        return compiled(getDataForProductItemTemplate(product));
    }).join('');

$('#products').append(html);