Jump to content
Sign in to follow this  
KDV

Кнопка "Показать еще" для категории Opencart 3 (не AJAX)

Recommended Posts

Скрипт не AJAX.

 

Как работает:

  • При клике на кнопку в ссылку подставляется &limit=N (отрабатывает совойство location, происходит переход по новой ссылке).
  • Скролит страницу к началу добавленых товаров (если это не необходимо - удалите хвост ссылки "+ '#last-item'" на 31й строке скрипта.)
  • Дизейблит кнопку, если в категории больше нет товаров. 

 

При установке скрипта необходимо указать:

  • кол-во товаров для отображения при клике ( 20 по умолчанию )
  • класс блока обертки товаров
  • класс кнопки

 

(function () {
    // need jquery > v.3
    // add script in 'catalog\view\theme\default\template\product\category.twig' before  footer
    // productWrapperSelector -- selector of product wrapper
    // productToShow -- product`s quantity to show
    // productMoreBtnSelector -- selector of add button

    // config
    const productToShow = 20;
    const productWrapperSelector = $('.product-list');
    const productMoreBtnSelector = $('.more-product-btn');
    // config

    var moreBtn = productMoreBtnSelector;
    var totalViewOnload = productWrapperSelector.children('div');

    function getProductLimit() {
        var totalProductInCategory = {{ results }};
        var productLeft = totalProductInCategory - totalViewOnload.length;

        return productLeft;
    }

    function viewMoreProduct() {
        var loc = location.href;
        var to = loc.search(/&limit/i);
        loc = loc.substring(0, to);
        loc.length == 0 ? loc = location.href : loc = loc.substring(0, to);
        var limit = `&limit=${productToShow + totalViewOnload.length}`;
        
        location = loc + limit + '#last-item';
    }

    function setLastProductId() {
        var lastItemID = totalViewOnload.length - productToShow;
        $(totalViewOnload[lastItemID]).attr('id', 'last-item');
    }

    function moreBtnView() {
        moreBtn.text(`еще ${productToShow}`);
        getProductLimit() <= 0 ? moreBtn.attr('disabled', 'disabled') : '';
        getProductLimit() < productToShow ? moreBtn.text(`еще ${getProductLimit()}`) : '';
    }

    moreBtn.click(function (e) {
        e.preventDefault();
        viewMoreProduct();
        moreBtnView();
    });

    function init() {
        moreBtnView();
        getProductLimit();
        setLastProductId();
    }

    init();

}());

ссылка на Git

 

Edited by KDV
  • +1 1

Share this post


Link to post
Share on other sites

В отладчике ругается - unexpected token: identifier

 

 

Протестировал на Опенкарт 3 - Version 3.0.2.0 (rs.3) русская сборка

Share this post


Link to post
Share on other sites

Также в Вашем скрипте проверте кавычки

Share this post


Link to post
Share on other sites

С кавычками разобрался.

 

Скрипт рабочий, только нужно заменить строку:

 

var totalProductInCategory = {{ results }};

на

var totalProductInCategory = '{{ results }}';

Чтобы не вылетал синтаксис в ошибку. Огромная благодарность за сей скрипт.

Таже у меня работает на jquery 2.1.1. Так что можно ставить на заводской Опенкарт.

Share this post


Link to post
Share on other sites
В 09.11.2018 в 13:57, wgt сказал:

С кавычками разобрался.

 

Скрипт рабочий, только нужно заменить строку:

 

var totalProductInCategory = {{ results }};

на

var totalProductInCategory = '{{ results }}';

Чтобы не вылетал синтаксис в ошибку. Огромная благодарность за сей скрипт.

Таже у меня работает на jquery 2.1.1. Так что можно ставить на заводской Опенкарт.

Всем привет! 

А можно попросить, чуть подробнее описать? Банальной вставкой этого кода - он лезет наружу текстом (скрин)... Шаблон стандартный, OC3.0.2.0. Если можете объяснить, что куда ткнуть - буду крайне благодарен! 

Screenshot_3.png

Share this post


Link to post
Share on other sites

С фильрами ОСfilter, brainyfilter работает ?

Share this post


Link to post
Share on other sites
В 21.06.2019 в 21:57, kotus2002 сказал:

Всем привет! 

А можно попросить, чуть подробнее описать? Банальной вставкой этого кода - он лезет наружу текстом (скрин)... Шаблон стандартный, OC3.0.2.0. Если можете объяснить, что куда ткнуть - буду крайне благодарен! 

Screenshot_3.png

Нужно его в <script>..код..</script> обернуть и кнопку с классом more-product-btn сделать

Share this post


Link to post
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
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

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.