Товары в слайдер(бестселлеры, недавно просмотренные, рекомендуемые) для мобильных телефонов

[axaxaxa]

Доброго времени суток,

помогите пожалуйста разобраться как сделать, что бы при определенных breikpoint допустим для недавно просмотренные товары(которые в карточке) после >1200 товары уже были в слайдере, на главную у меня выведены бестселлеры, мне нужно что бы после >768 было в слайдере(в идеале по 2), а после >544 по одному....

[Гість smartcoder]

https://getbootstrap.com/docs/3.4/css/

[axaxaxa]

15 часов назад, smartcoder сказал:

https://getbootstrap.com/docs/3.4/css/

да... лучше тогда наверное slick js... я думал может есть нормальное решение для Opencart...

И как быть если для ПК товары в колонках рядах например(бестселлеры), его скрывать для мобильных и делать для мобильных в слайдере?

 

 

[Гість smartcoder]

В документации по ссылке все написано.

 

 

[axaxaxa]

24 минуты назад, smartcoder сказал:

В документации по ссылке все написано.

 

 

я бутстрап знаю, я думаю что есть какое то лучше решение

 

[axaxaxa]

и не хочется грузить на странице 2 одинаковых блока  

[Гість smartcoder]

@axaxaxa , если вы хотите показать в мобильной версии в одном месте блок, в компьютерной версии в другом месте - то можно сделать проверку js на наличие блока.

if ($('.yourblock').length > 1) {
	$("div.yourblock").first().removeClass('hidden-xs');
}

Ваши блоки соответственно назвать

<div class="hidden-xs yourblock">
<!-- Содержимое блока -->
</div>

 

[axaxaxa]

РЕШЕНИЕ 

структура twig

Спойлер

<div class="row_recently_view">
<h3 class="block_title" style="text-align: left;margin-bottom: 35px;">{{ heading_title }}</h3>
<div class="row">
  <div class="swiper-viewport swiper-products">
        <div class="swiper-pagination slides-bestseller{{ module }}"></div>
        <div id="bestseller{{ module }}" class="swiper-container col-sm-12">
            <div class="swiper-wrapper">
 {% for product in products %}
 <div class="swiper-slide">
  <div class="product-layout ">
    <div class="product-thumb transition">
            <div class="image"><a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></a></div>
            <div>
              <div class="caption">
                 {% if product.price %}
                <p class="price"> {% if not product.special %}
                  {{ product.price }}
                  {% else %} <span class="price-new">{{ product.special }}</span> <span class="price-old">{{ product.price }}</span> {% endif %}
                  {% if product.tax %} <span class="price-tax">{{ text_tax }} {{ product.tax }}</span> {% endif %} </p>
                {% endif %}
                <h4 class="product-href-title"><a href="{{ product.href }}">{{ (product.name|length > 35 ? product.name|slice(0,35) ~ '...' : product.name) }} ({{ product.model }})</a></h4>
                <!-- Убрали description с карточки в категориях <p>{{ product.description }}</p> -->               
                {% if product.rating %}
                <!-- убрали рейтинг с карточки в категориях <div class="rating"> {% for i in 1..5 %}
                  {% if product.rating < i %} <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span> {% else %} <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>{% endif %}
                  {% endfor %} </div> -->
                {% endif %} 
              </div>
<!--   ублал кнопри купить сравнить понравившееся             <div class="button-group">
  <button type="button" onclick="cart.add('{{ product.product_id }}', '{{ product.minimum }}');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ button_cart }}</span></button>
  <button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i></button>
  <button type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-exchange"></i></button>
</div> -->
          </div>
        </div>
      </div>
    </div>
  {% endfor %}
</div>
</div>
<div class="swiper-pager slide-bestseller{{ module }}">
            <div class="swiper-button-next next-bestseller{{ module }}"></div>
            <div class="swiper-button-prev prev-bestseller{{ module }}"></div>
        </div>
    </div>
  </div>
</div>

 

подключить в controller

Спойлер

 static $module = 0;
 $this->document->addStyle('catalog/view/javascript/jquery/swiper/css/swiper.min.css');
 $this->document->addStyle('catalog/view/javascript/jquery/swiper/css/opencart.css');
 $this->document->addScript('catalog/view/javascript/jquery/swiper/js/swiper.jquery.js');
]]>

 

Добавить скрипт в конце модуля twig

Спойлер

<script><!--
    $('#bestseller{{ module }}').swiper({
        mode: 'horizontal',
        grabCursor: 'false',
        slidesPerView: 5,
        pagination: '.slides-bestseller{{ module }}',
        paginationClickable: true,
        swiperPager: '.slide-bestseller{{ module }}',
        nextButton: '.next-bestseller{{ module }}',
        prevButton: '.prev-bestseller{{ module }}',
        spaceBetween: 12,
        autoplay: 4000,
        autoplayDisableOnInteraction: true,
        loop: false,
        loopAdditionalSlides: 0,
        breakpoints: {
            1200: {
                slidesPerView: 5,
                spaceBetween: 12
            },
            992: {
                slidesPerView: 4,
                spaceBetween: 12
            },
            768: {
                slidesPerView: 3,
                spaceBetween: 12
            },
            420: {
                slidesPerView: 2,
                spaceBetween: 12
            }
        }
    });
--></script>

 

 

Змінено 19 липня 2019 користувачем axaxaxa