Click to closeup and thumbnail scroller not working

[lesliekirk]

I can't find why both the click to close and the thumbnail scroller are not working here:

http://www.leedsworldrefill.com/p_6760-61.html

I did move the thumbnails from the side to the bottom but I changed the scripts.js file vertical to false. I've got the js-main-image and js-thumbnails in place


The site is using version 9.5. If I try to use the scripts.js file from 9.6 it breaks a number of other things.

Something is not firing and my javscript foo is weak

[Matt Zimmermann]

Hi Leslie,

I'm not sure what is happening. If I initiate the functions from the web developer panel in the browser, they work as expected. There may be something that is failing silently which is causing an issue. I would recommend contacting professional services to have one of the developers take a look at this, as well as the other 9.5/9.6 scripting issues.

[lesliekirk]

Hi Leslie,

I'm not sure what is happening. If I initiate the functions from the web developer panel in the browser, they work as expected. There may be something that is failing silently which is causing an issue. I would recommend contacting professional services to have one of the developers take a look at this, as well as the other 9.5/9.6 scripting issues.

Do I open a support ticket?

[Matt Zimmermann]

Hi Leslie,

Support might be able to assist, or they might kick it over to professional services [[email protected]].

[lesliekirk]

Hi Leslie,

Support might be able to assist, or they might kick it over to professional services [[email protected]].

Yeah...not sure if kicking it over them is in the budget...

[AHerb]

Leslie, looks like there are more js edits than you said in the first post. Did you paste some extra code?

    jsPROD: function () {
        // ---- Remove Item From Basket (Compatible down to IE6) ---- //
        $('.remove-item').on('click', function () {
            $(this).children('input').prop('checked', 'checked');
            if ($(this).children('input').is(':checked')) {
                $('#js-bask-form').submit();
            }
        });

        // ---- Estimate Shipping Function ---- //
        function estimateShipping () {
...............................
..............................
     },

now you have 2 functions with the same name "jsPROD"


Most likely this is why the code fails to work

[AHerb]

Yeah, that is it. Woks when additional code is removed.

[lesliekirk]

Leslie, looks like there are more js edits than you said in the first post. Did you paste some extra code?

jsPROD: function () {
// ---- Remove Item From Basket (Compatible down to IE6) ---- //
$('.remove-item').on('click', function () {
$(this).children('input').prop('checked', 'checked');
if ($(this).children('input').is(':checked')) {
$('#js-bask-form').submit();
}
});

// ---- Estimate Shipping Function ---- //
function estimateShipping () {
...............................
..............................
},

now you have 2 functions with the same name "jsPROD"


Most likely this is why the code fails to work

Yes, I'm trying to figure out the errors in the 9.5 version by trying to replace them with sections of a 9.6 file. This was not one that I added. I suspect it was already there. There are some real differences between the 9.5 version and the 9.6 version that prohibit me from just outright replacing the entire file

[lesliekirk]

I'm looking at the 9.6 version of the scripts.js file and it has those lines of code in it too.

[Matt Zimmermann]

Hi Leslie,

As AHerb mentioned, you have two calls to the jsPROD function in your scripts.js file; the default one and one which has been added after the jsBASK function. If you remove the second one, your thumbnails and close up should work as expected.

[lesliekirk]

Okay, I rolled back to a copy from the dev site - it did have a a duplicate set of this code in it

jsPROD: function () {
        // ---- Remove Item From Basket (Compatible down to IE6) ---- //
        $('.remove-item').on('click', function () {
            $(this).children('input').prop('checked', 'checked');
            if ($(this).children('input').is(':checked')) {
                $('#js-bask-form').submit();
            }
        });

        // ---- Estimate Shipping Function ---- //
        function estimateShipping () {
            function resetFields () {
                $('#js-shipping-estimate-state-select').prop('selectedIndex', 0);
                $('#js-shipping-estimate-country').val('US');
                $('#js-shipping-estimate-state, #js-shipping-estimate-zip').val('');
            }

            $('#js-show-shipping-estimate').on('click', function (e) {
                e.preventDefault();
                $('#js-shipping-estimate-dialog').fadeToggle();
                resetFields();
            });

            $('#js-shipping-estimate-recalculate').on('click', function (e) {
                e.preventDefault();
                $(this).hide();
                $('#js-shipping-estimate-results').fadeOut(function () {
                    $('#js-shipping-estimate-fields').fadeIn();
                }).empty();
            });

            $('#js-shipping-estimate-form').on('submit', function (e) {
                e.preventDefault();
                if ($(this).data('formstatus') !== 'submitting') {

                    var form = $(this),
                        formData = form.serialize(),
                        formUrl = form.attr('action'),
                        formMethod = form.attr('method');

                    form.data('formstatus', 'submitting');
                    $('#js-processing-request').show();
                    $.ajax({
                        url: formUrl,
                        type: formMethod,
                        data: formData,
                        success: function(data, textStatus, jqXHR) {
                            $('#js-shipping-estimate-fields').fadeOut(function () {
                                $('#js-shipping-estimate-results').html(data).fadeIn();
                                $('#js-shipping-estimate-recalculate').fadeIn();
                            });
                            resetFields ();
                            form.data('formstatus', 'idle');
                            $('#js-processing-request').hide();
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            console.log(errorThrown);
                            form.data('formstatus', 'idle');
                        }
                    });
                }
            });
        }
        estimateShipping();

    },

So now you are saying that I need to remove this code too? What happens to the shipping estimator? Or is this why the shipping estimator was intermittent when pulling in shipping rates?

Also when I did a test of removing this code, (after removing the duplicate), the slider would work until you tried changing the color of the product:

http://www.leedsworldrefill.com/p_3251-99.html


I couldn't leave the script.js file with the both sets of this code removed because of this (and the CSS tweaking I need to do to place the arrows to the left & right instead of top & bottom).

[Matt Zimmermann]

HI Leslie,

When you create custom code for a page, you can include it in the existing page function. In your case, you can take the code you added to the second jsPROD function for the shipping estimator and add it to the code jsPROD function.

[lesliekirk]

HI Leslie,

When you create custom code for a page, you can include it in the existing page function. In your case, you can take the code you added to the second jsPROD function for the shipping estimator and add it to the code jsPROD function.

Okay, now I'm back to not quite following you. I didn't add any sort of custom functions, but I'm not sure how the duplicated one wound up on the scripts.js. I may have to go back and do a fresh install of the 9.5 version to get a clean copy of the scripts.js file for this version of Levels.

[lesliekirk]

So here is what I have done. I installed Levels version 9.5 in a dev store, I copied the scripts.js file from there, uploaded it as scripts9_5.js and adjusted the path accordingly. The closeup image works as needed, but the thumbnail slider only works when you first load the page:

http://www.leedsworldrefill.com/p_6760-61.html

If you click on the attribute color swatch the slider disappears (stops working). Why?

[Matt Zimmermann]

Hi Leslie,

Looking at the version of the scripts file you have on the site, it looks like you have an earlier version of 9.5. Try using the script file I have attached and see if it helps; you will need to change the file extension from TXT to JS.