[StartGames]

если можно как то оптимизировать это, то буду благодарен):

{% for product in products %} <!-- Карточка товара -->
    <div class="product-layout product-grid grid-style col-lg-4 col-md-4 col-sm-4 col-xs-6 product-items" id="box_pro_{{ product.product_id }}c">
        <script>
        	let msd_box{{ product.product_id }} = 1;
        	$('#box_pro_{{ product.product_id }}c').mouseover(function() {
        		if (msd_box{{ product.product_id }} == 1) {
        			{% if product.video %}$('#msd_box{{ product.product_id }}_2').html('<video id="mvideo{{ product.product_id }}" width="100%" preload="none" autoplay loop muted><source src="{{ product.video }}" type="video/mp4;codecs=&quot;avc1.42E01E, mp4a.40.2&quot;"></video>');{% endif %}
        			$('#msd_box{{ product.product_id }}_3').html('<img src="{{ product.thumb2 }}" alt="{{ product.name }}" class="ani5">');
        			$('#msd_box{{ product.product_id }}_4').html('<img src="{{ product.thumb3 }}" alt="{{ product.name }}" class="ani5">');
        			$('#msd_box{{ product.product_id }}_5').html('<img src="{{ product.thumb4 }}" alt="{{ product.name }}" class="ani5">');
        			$('#msd_box{{ product.product_id }}_6').html('<img src="{{ product.thumb5 }}" alt="{{ product.name }}" class="ani5">');
        			{% if not product.video %}{% if product.thumb6 %}$('#msd_box{{ product.product_id }}_7').html('<img src="{{ product.thumb6 }}" alt="{{ product.name }}" class="ani5">');{% endif %}{% endif %}
        			msd_box{{ product.product_id }} = 0
        		}
            });
            $('#box_pro_{{ product.product_id }}c').mouseleave(function() {
                timer{{ product.product_id }} = window.setTimeout(function() {
                    $('#msd_box{{ product.product_id }}_1').addClass('active');
                    $('#msd_box{{ product.product_id }}_1').addClass('no_scale');
                    $('#msd_data{{ product.product_id }} span').removeClass('active');
                },4000);
            });
            $('#box_pro_{{ product.product_id }}c').mouseenter(function() {
            	clearTimeout(timer{{ product.product_id }});
            });
        </script>
    <div class="product-thumb pro_b2 scrollflow -slide-left -opacity {% if product.quantity == 0 %}sold_out{% endif %} kep11">
    <div class="product-item">

      <div class="image"> <!-- Блок просмотра выбранного медиа -->
        {% if product.quantity == 0 %}
        <img src="/image/catalog/site_img/sold_out.png" class="sold_out_img ani2">
        {% endif %}
        <a href="{{ product.href }}" id="gl_img_{{ product.product_id }}c">

            <span id="msd_box{{ product.product_id }}_1" class="msd_box ani5 active no_scale">
            	<img src="{{ product.thumb }}" alt="{{ product.name }}" class="ani5">
            </span>



            <span id="msd_data{{ product.product_id }}">

            {% if product.video %}
            <span id="msd_box{{ product.product_id }}_2" class="msd_box ani5"></span>
            {% endif %}

            {% if product.thumb2 %}
            <span id="msd_box{{ product.product_id }}_3" class="msd_box ani5"></span>
            {% endif %}

            {% if product.thumb3 %}
            <span id="msd_box{{ product.product_id }}_4" class="msd_box ani5"></span>
            {% endif %}

            {% if product.thumb4 %}
            <span id="msd_box{{ product.product_id }}_5" class="msd_box ani5"></span>
            {% endif %}

            {% if product.thumb5 %}
            <span id="msd_box{{ product.product_id }}_6" class="msd_box ani5"></span>
            {% endif %}

            {% if not product.video %}
            {% if product.thumb6 %}
            <span id="msd_box{{ product.product_id }}_7" class="msd_box ani5"></span>
            {% endif %}
            {% endif %}

        	</span>

        </a>
      </div> <!-- // Блок просмотра выбранного медиа -->


      <div class="ss25">
        {% if product.thumb %}
            <div>
              <img src="{{ product.thumb0min }}" alt="{{ product.name }}" class="img-responsive" id="top_img_{{ product.product_id }}c" />
            </div>
            <script>
                $('#top_img_{{ product.product_id }}c').mouseover(function() {
                    $('#msd_data{{ product.product_id }} span').removeClass('active');
                    $('#msd_box{{ product.product_id }}_1').removeClass('no_scale');
		            $('#msd_box{{ product.product_id }}_1').addClass('active');
		        });
            </script>
        {% endif %}

		{% if product.video %}
		<div class="relative" id="global_video_id{{ product.product_id }}c">
		    {% if product.poster1min %}
		        <img src="{{ product.poster1min }}" alt="{{ product.name }}" class="img-responsive" />
		    {% else %}
		        <img src="{{ product.thumb4min }}" alt="{{ product.name }}" class="img-responsive" />
		    {% endif %}
		    <div class="ad_video_icon"><i class="fa fa-play-circle" aria-hidden="true"></i></div>
		</div>

		<script>
		        $('#global_video_id{{ product.product_id }}c').mouseover(function() {
		            $('#msd_data{{ product.product_id }} span').removeClass('active');
		            $('#msd_box{{ product.product_id }}_1').removeClass('active');
		            $('#msd_box{{ product.product_id }}_2').addClass('active');
		        });
		</script>
		{% endif %}


        {% if product.thumb2 %}
            <div>
                <img src="{{ product.thumb2min }}" alt="{{ product.name }}" class="img-responsive" id="ad_img1_{{ product.product_id }}c" />
            </div>
            <script>
                $('#ad_img1_{{ product.product_id }}c').mouseover(function() {
                	$('#msd_data{{ product.product_id }} span').removeClass('active');
                	$('#msd_box{{ product.product_id }}_1').removeClass('active');
                    $('#msd_box{{ product.product_id }}_3').addClass('active');
                });
            </script>
        {% endif %}

        {% if product.thumb3 %}
            <div>
                <img src="{{ product.thumb3min }}" alt="{{ product.name }}" class="img-responsive" id="ad_img2_{{ product.product_id }}c" />
            </div>
            <script>
                $('#ad_img2_{{ product.product_id }}c').mouseover(function() {
                    $('#msd_data{{ product.product_id }} span').removeClass('active');
                	$('#msd_box{{ product.product_id }}_1').removeClass('active');
                    $('#msd_box{{ product.product_id }}_4').addClass('active');
                });
            </script>
        {% endif %}
        {% if product.thumb4 %}
            <div>
                <img src="{{ product.thumb4min }}" alt="{{ product.name }}" class="img-responsive" id="ad_img3_{{ product.product_id }}c" />
            </div>
            <script>
                $('#ad_img3_{{ product.product_id }}c').mouseover(function() {
                    $('#msd_data{{ product.product_id }} span').removeClass('active');
                	$('#msd_box{{ product.product_id }}_1').removeClass('active');
                    $('#msd_box{{ product.product_id }}_5').addClass('active');
                });
            </script>
        {% endif %}
        {% if product.thumb5 %}
            <div>
                <img src="{{ product.thumb5min }}" alt="{{ product.name }}" class="img-responsive" id="ad_img4_{{ product.product_id }}c" />
            </div>
            <script>
                $('#ad_img4_{{ product.product_id }}c').mouseover(function() {
                    $('#msd_data{{ product.product_id }} span').removeClass('active');
                	$('#msd_box{{ product.product_id }}_1').removeClass('active');
                    $('#msd_box{{ product.product_id }}_6').addClass('active');
                });
            </script>
        {% endif %}


        {% if not product.video %}
        {% if product.thumb6 %}
            <div>
                <img src="{{ product.thumb6min }}" alt="{{ product.name }}" class="img-responsive" id="ad_img5_{{ product.product_id }}c" />
            </div>
            <script>
                $('#ad_img5_{{ product.product_id }}c').mouseover(function() {
                    $('#msd_data{{ product.product_id }} span').removeClass('active');
                	$('#msd_box{{ product.product_id }}_1').removeClass('active');
                    $('#msd_box{{ product.product_id }}_7').addClass('active');
                });
            </script>
        {% endif %}
        {% endif %}



      </div>


	  <div class="button-group f33c"> <!-- Кнопки -->
      <div class="inner">
          <button type="button" data-toggle="tooltip" data-placement="top" class="button-cart" onclick="cart.add('{{ product.product_id }}');" title="{{ button_cart }}"><span>{{ button_cart }}</span></button>

          <button type="button" data-toggle="tooltip" data-placement="top" title="{{ button_wishlist }}" class="button-wishlist" onclick="wishlist.add('{{ product.product_id }}');"><span>{{ button_wishlist }}</span></button>

          <button type="button" data-toggle="tooltip" data-placement="top" title="{{ button_compare }}" class="button-compare" onclick="compare.add('{{ product.product_id }}');"><span>{{ button_compare }}</span></button>

          <button type="button" data-toggle="tooltip" data-placement="top" title="{{ text_viar }}" class="viar_cat" onclick="alert('{{ text_viar_tech }}')"></button>

          <button type="button" data-toggle="tooltip" data-placement="top" title="{{ button_quickview }}" class="button-quickview" onclick="ptquickview.ajaxView('{{ product.href }}')"><span>{{ button_quickview }}</span></button>
      </div>
      </div> <!-- // Кнопки -->

    </div>
    </div>
    </div> <!-- // Карточка товара -->
{% endfor %}