Ajax requests for sorting and filtering not working

[anestism]

This has been tested with latest version (OCTOBER 3.0.75 and 3.0.76 and Mall 2.0.10) On a product list, when trying to change the sorting order or filter by brand, the browser (Firefox) shows following error message: Uncaught TypeError: can't access property "hasOwnProperty", response.responseJSON is undefined I have even tried to use the Bootstrap demo theme and the OFFLINE demo theme and got the same error with both.

The error comes from following line in the component productsfilter (scripts.htm): if (response.responseJSON.**hasOwnProperty**('queryString'))

Any idea how this could be fixed? It looks like a problem with asynchronous data.

[tobias-kuendig]

Can you post a console.log(response)?

It might be that the October 3 framework no longer has the responseJSON property defined.

[anestism]

It is the same with 3.0.76 and 3.1.1 Tested with and without the new "Turbo-visit"

[tobias-kuendig]

Thank you! The Object above is just response, right? It looks like we don't the responseJSON property, then, but have to check for it to remain backwards compatible.

This has to be done accross all frontend JS blocks.

[anestism]

yes, here for your reference that part of the code $(this).request('{{ __SELF__ }}::onSetFilter', { loading: $.oc.stripeLoadIndicator, complete: function (response) { console.log(response); $.oc.stripeLoadIndicator.hide() if (response.responseJSON.hasOwnProperty('queryString')) { history.replaceState(null, '', '?' + response.responseJSON.queryString) }

[cyril-design]

Hi ! Same problem here with October v3. Here my solution in components/productsfilter/scripts.htm

if( typeof response.responseJSON !== 'undefined') {
    if (response.responseJSON.hasOwnProperty('queryString')) {
        history.replaceState(null, '', '?' + response.responseJSON.queryString)
    }
}
else if (response.queryString) {
    history.replaceState(null, '', '?' + response.queryString)
}

[anestism]

@cyril-design thanks for your suggestion, but it looks like it doesn't work on my system or at least, I have not inserted your code at the right point in that file. Could you please be a bit more specific? Today I upgraded Mall to v3 and still have the same issue. I am wondering how it can work for others. Does nobody use the sorting/filters? Am I doing something wrong? Is there something missing in my installations? Even on OctoberCMS pages Mall is tagged as working with latest version. I have tried several times to do clean installs and the problem is still there.

[tobias-kuendig]

This is fixed in version 3.0.1/2.0.12. Thank you everyone for your help!

https://github.com/OFFLINE-GmbH/oc-mall-plugin/commit/959b1542e91818fd734e3d89bd119c6de673453c

[chocolata]

Hi, I've not been able to get this working. I haven't updated to October CMS v3 yet, because it is unclear that this version is now supported? See this issue. Also, the changelog in the documentation doesn't seem to be up to date.

The strange thing is that on my development machine, I'm on October CMS v 2.2.34 in combination with OFFLINE Mall v 2.0.7 and the filters seem to work perfectly.

On my staging and production environment, I'm on October CMS v2.2.35 in combination with OFFLINE Mall v2.0.19 and over there the filters don't seem to do anything.

I'm a little worried about upgrading to October CMS v3 since it's unclear if OFFLINE Mall now officially supports it or not. Could you kindly let us know if upgrading to October CMS v3 is now the recommended way further (and that it will solve the filtering issue)?

It would be good to have the filters up and running again.

Thanks in advance for all of your great work. My clients and myself really appreciate it.

[chocolata]

Hi guys, just to let you know that in my setup above with October CMS v2.2.35 in combination with OFFLINE Mall v2.0.19 I managed to solve it by overriding the partial productsfilter/scripts.htm with the following legacy code hotfix.

{% put scripts %}
    <script>
        $(function () {
            var $propertiesForm = $('.mall-products-filter');
            var $body = $('body');

            $body.on('click', '.js-mall-filter', function () {
                var $input = $(this).find('input');
                $(this).toggleClass('mall-filter__option--selected')
                $input.prop('checked', ! $input.prop('checked'));
                $propertiesForm.trigger('submit');
            });
            $body.on('click', '.js-mall-clear-filter', function () {
                var $parent = $(this).closest('.mall-property');
                if ($parent.length < 1) {
                    $parent = $(this).closest('.mall-property-group');
                }

                $parent.find(':input:not([type="checkbox"])').val('');
                $parent.find('input[type="checkbox"]').prop('checked', false);
                $parent.find('.mall-filter__option--selected').removeClass('mall-filter__option--selected')

                var slider = $parent.find('.mall-slider-handles')[0]
                if (slider) {
                    slider.noUiSlider.updateOptions({
                        start: [slider.dataset.min, slider.dataset.max]
                    });
                }
                $propertiesForm.trigger('submit');
            });
            $body.on('change', '.js-mall-select-filter', function () {
                $propertiesForm.trigger('submit');
            });

            $propertiesForm.on('submit', function (e) {
                e.preventDefault();

                $.publish('mall.products.load.start')
                $(this).request('{{ __SELF__ }}::onSetFilter', {
                    loading: $.oc.stripeLoadIndicator,
                    complete: function (response) {
                        $.oc.stripeLoadIndicator.hide()
                        if (response.responseJSON.hasOwnProperty('queryString')) {
                            history.replaceState(null, '', '?' + response.responseJSON.queryString)
                        }
                        $('[data-filter]').hide()
                        if (response.responseJSON.hasOwnProperty('filter')) {
                            for (var filter of Object.keys(response.responseJSON.filter)) {
                                $('[data-filter="' + filter + '"]').show();
                            }
                        }
                        $.publish('mall.products.load.complete')
                    },
                    error: function () {
                        $.oc.stripeLoadIndicator.hide()
                        $.oc.flashMsg({text: '{{ 'offline.mall::frontend.search_error' | trans }}', class: 'error'})
                        $.publish('mall.products.load.error')
                    }
                });
            });

            $('.mall-slider-handles').each(function () {
                var el = this;
                noUiSlider.create(el, {
                    start: [el.dataset.start, el.dataset.end],
                    connect: true,
                    range: {
                        min: [parseFloat(el.dataset.min)],
                        max: [parseFloat(el.dataset.max)]
                    },
                    pips: {
                        mode: 'range',
                        density: 20
                    }
                }).on('change', function (values) {
                    $('[data-min="' + el.dataset.target + '"]').val(values[0])
                    $('[data-max="' + el.dataset.target + '"]').val(values[1])
                    $propertiesForm.trigger('submit');
                });
            })
        })
    </script>
{% endput %}

Just to let you guys know if anyone is struggling with this in a non-V3 context.

It still would be great to know what the official word is on October CMS v3. Thanks again.