Opencart 2x, карусель рекомендуемых товаров в карточке товара

7 июля 2019

Карусель рекомендуемых товаров в Opencart 2х, адаптивный, с автопрокруткой, на базе Tiny Carousel
Делать так 

СКАЧАТЬ АРХИВ

Содержимое архива положить в корень сайта

В header.tpl вашей темы перед тегом </head> добавить

<link rel="stylesheet" href="/responsive/tinycarousel.css" type="text/css" media="screen">
<script type="text/javascript" src="/responsive/jquery.tinycarousel.js"></script>

В product.tpl темы добавить вывод карусели в нужное вам место

<?php if ($products) { ?>
    <h3><?php echo $text_related; ?--></h3>
    <div id="slider1">
        <a class="buttons prev" href="#"><span class="glyphicon glyphicon-chevron-left"></span></a>
            <div class="viewport">
                <ul class="overview">
                    <!--?php foreach ($products as $product) { ?-->
                        <li>
                            <div class="panel panel-default text-center">
                                <div class="panel-body">
                                    <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive center-block"></a></div>
                                    <div class="caption">
                                        <h4><a href="<?php echo $product['href']; ?>"><!--?php echo $product['name']; ?--></a></h4>
                                        <!--?php if ($product['rating']) { ?-->
                                            <div class="rating">
                                                <!--?php for ($i = 1; $i <= 5; $i++) { ?-->
                                                    <!--?php if ($product['rating'] < $i) { ?-->
                                                        <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span>
                                                        <!--?php } else { ?-->
                                                        <span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
                                                    <!--?php } ?-->
                                                <!--?php } ?-->
                                            </div>
                                        <!--?php } ?-->
                                        <!--?php if ($product['price']) { ?-->
                                            <p class="price">
                                                <!--?php if (!$product['special']) { ?-->
                                                    <!--?php echo $product['price']; ?-->
                                                    <!--?php } else { ?-->
                                                    <span class="price-new"><!--?php echo $product['special']; ?--></span> 
                                                <!--?php } ?-->
                                                <!--?php if ($product['tax']) { ?-->
                                                    <span class="price-tax"><!--?php echo $text_tax; ?--> <!--?php echo $product['tax']; ?--></span>
                                                <!--?php } ?-->
                                            </p>
                                        <!--?php } ?-->
                                    </div>
                                </div>
                                <div class="panel-footer">
                                    <div class="button-group">
                                        <button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>', '<?php echo $product['minimum']; ?>');"><span class="hidden-xs hidden-sm hidden-md"><!--?php echo $button_cart; ?--></span> <i class="fa fa-shopping-cart"></i></button>
                                        <button type="button" data-toggle="tooltip" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-heart"></i></button>
                                        <button type="button" data-toggle="tooltip" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-exchange"></i></button>
                                    </div>
                                </div>
                            </div>    
                        </li>    
                    <!--?php } ?-->
                </ul>
            </div>
            <a class="buttons next" href="#"><span class="glyphicon glyphicon-chevron-right"></span></a>
        </div>
    <!--?php } ?-->
    <script type="text/javascript">
        $(document).ready(function()
        {
            $("#slider1").tinycarousel({ interval: true });
            var slider1 = $("#slider1").data("plugin_tinycarousel");
        });
    </script>

В результате получится типа такого