<div class="row">
  <div class="col-sm-12">
    <h2 class="title_line"><?= $heading_title; ?></h2>
  </div>
</div>
<div class="clearfix"></div>
<br /><br />
<div class="row">
  <div class="col-xs-12">
    <div id="Occasion<?= $module; ?>__Carousel" class="owl-carousel">
      <?php foreach ($products as $index => $product) { ?>
        <div class="item product-layout product-list">
          <div class="product-thumb pb-120 pb-105_m mb-20">
            <? if ($product ['product_type']): ?>
              <? foreach ($product ['collection_color'] as $c_index => $color): ?>
                <div class="PS-<?= $product ['product_id']; ?> PS-<?= $product ['product_id'] . $color ['attribute_id']; ?> <?= ($color ['show'])? '': 'd-none'; ?> image">
                  <a href="<?php echo $color['href']; ?>" id="ProductImageCarousel__<?= $index; ?>--<?= $product ['product_id'] . $color ['attribute_id']; ?>" class="custom-0004 owl-carousel">
                    <img data-src="<?php echo $color ['image']; ?>" alt="<?php echo $color ['name']; ?>" title="<?php echo $color ['name']; ?>" class="img-responsive owl-lazy" />
                    <? foreach ($color ['images'] as $image): ?>
                      <img data-src="<?php echo $image ['popup']; ?>" alt="<?php echo $color ['name']; ?>" title="<?php echo $color ['name']; ?>" class="img-responsive owl-lazy" />
                    <? endforeach; ?>
                  </a>
                  <script>
                    jQuery (function ($) {
                      $('#ProductImageCarousel__<?= $index; ?>--<?= $product ['product_id'] . $color ['attribute_id']; ?>').owlCarousel ({
                        items: 1,
                        lazyLoad: true,
                        dots: true
                      });
                    });
                  </script>
                </div>
              <? endforeach; ?>
            <? else: ?>
              <div class="image">
                <a href="<?php echo $product['href']; ?>" id="ProductImageCarousel__<?= $index; ?>" class="custom-0004 owl-carousel">
                  <img data-original="<?php echo $product ['thumb']; ?>" src="/catalog/view/theme/deercase/image/placeholder250.png" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive lazy" />
                  <? foreach ($product ['images'] as $image): ?>
                    ss<img data-original="<?php echo $image ['popup']; ?>" src="/catalog/view/theme/deercase/image/placeholder250.png" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive lazy" />
                  <? endforeach; ?>
                </a>
                <script>
                  jQuery (function ($) {
                    $('#ProductImageCarousel__<?= $index; ?>').owlCarousel ({
                      items: 1,
                      dots: true
                    });
                  });
                </script>
              </div>
            <? endif; ?>
            <div class="custom-0007 d-none">
              <? if ($product ['product_type']): ?> 
                <div class="FlexScroller <?= (4 < count($product ['collection_color']))? '': 'justify-content-center'; ?>">
                  <? foreach ($product ['collection_color'] as $color): ?>
                    <? if ($color ['show']): ?>
                      <div class="PP__CaseCircle_Cat">
                        <a href="javascript: PS (<?= $product ['product_id'] . $color ['attribute_id']; ?>, <?= $product ['product_id']; ?>);">
                          <img src="<?= $color ['attribute_image']; ?>" alt="" />
                        </a>
                      </div>
                    <? endif; ?>
                  <? endforeach; ?>
                  <? foreach ($product ['collection_color'] as $color): ?>
                    <? if (! $color ['show']): ?>
                      <div class="PP__CaseCircle_Cat">
                        <a href="javascript: PS (<?= $product ['product_id'] . $color ['attribute_id']; ?>, <?= $product ['product_id']; ?>);">
                          <img src="<?= $color ['attribute_image']; ?>" alt="" />
                        </a>
                      </div>
                    <? endif; ?>
                  <? endforeach; ?>
                </div>
              <? endif; ?>
              <div class="caption">
                <h4>
                  <? if ($product ['product_type']): ?>
                    <? foreach ($product ['collection_color'] as $c_index => $color): ?>
                      <a class="PS-<?= $product ['product_id']; ?> PS-<?= $product ['product_id'] . $color ['attribute_id']; ?> <?= ($color ['show'])? '': 'd-none'; ?>" href="<?php echo $color ['href']; ?>"><?php echo $color ['name']; ?></a>
                    <? endforeach; ?>
                  <? else: ?>
                    <a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a>
                  <? endif; ?>
                </h4>
                <?php if ($product['price']) { ?>
                  <? if ($product ['product_type']): ?>
                    <? foreach ($product ['collection_color'] as $c_index => $color): ?>
                      <p class="PS-<?= $product ['product_id']; ?> PS-<?= $product ['product_id'] . $color ['attribute_id']; ?> <?= ($color ['show'])? '': 'd-none'; ?> price">
                        <?php if (!$color['special']) { ?>
                        <?php echo $color['price']; ?>
                        <?php } else { ?>
                        <span class="price-new"><?php echo $color['special']; ?></span> <span class="price-old"><?php echo $color['price']; ?></span>
                        <?php } ?>
                      </p>
                    <? endforeach; ?>
                  <? else: ?>
                    <p class="price">
                      <?php if (!$product['special']) { ?>
                      <?php echo $product['price']; ?>
                      <?php } else { ?>
                      <span class="price-new"><?php echo $product['special']; ?></span> <span class="price-old"><?php echo $product['price']; ?></span>
                      <?php } ?>
                    </p>
                  <? endif; ?>
                <?php } ?>
              </div>
            </div>
          </div>
        </div>
      <?php } ?>
    </div>
    <script>
      $('#Occasion<?= $module; ?>__Carousel').owlCarousel ({
        items: 4,
        autoPlay: true,
        autoPlayTimeout: 2000,
        mouseDrag: false,
        touchDrag: false,
        navigation: true,
        navigationText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>']
      });
    </script>
  </div>
</div>
<script>
  var PS = function (AttrPrd_ID, Product_ID) {
    $('.PS-' + Product_ID).addClass ('d-none');
    $('.PS-' + AttrPrd_ID).removeClass ('d-none');
$(document).scrollTop ($(document).scrollTop () + 1);
    $(document).scrollTop ($(document).scrollTop () - 1);
  };
</script>