Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

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


Recommended Posts

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

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

Link to comment
Share on other sites


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

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

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

 

 

Link to comment
Share on other sites


Guest smartcoder

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

 

 

Снимок экрана 2019-07-18 в 9.44.24.png

Link to comment
Share on other sites

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

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

 

 

Снимок экрана 2019-07-18 в 9.44.24.png

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

 

Link to comment
Share on other sites


Guest smartcoder

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

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

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

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

 

Link to comment
Share on other sites

РЕШЕНИЕ 

структура 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>

 

 

Edited by axaxaxa
Link to comment
Share on other sites


Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.