Canvas Support

shop quick view modal carousel

9 replies · opened Jul 7, 2020

SswwammpJul 7, 2020

Hi Semicolon again,

I have another issue, it is about the modal windows of product Quick view. There is a small carousel on it but the carousel and its images don't load for quite a few seconds and it is very bad UX as users want to shop and see the product images straight. For approx 5 secs, only the top half of sale text visible but nothing else from the carousel. Pls see screenshot.
Is there any way how I could load images straight? Image sizes are reduced so should load them so fast.
Thanks,
A.

SSemicolon WebSTAFFJul 8, 2020

Hello,

This is actually the Normal Behavior of the Quick Modal as it is loaded using AJAX. So it waits for the Images to be ready and then display them. We will definitely work on improving this in the future updates. Meanwhile, you can consider using Inline Lightbox for faster display of the Image: http://themes.semicolonweb.com/html/canvas/lightbox.html .

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SswwammpJul 8, 2020

Thanks - Is there a way I can put a placeholder at the place of the carousel with a spinning icon and short text informing user to keep calm and images coming soon?
Also to ask as I did not upgrade to 6.02 yet, any change re this issue in the new Canvas version?
Thanks again,
A.

SSemicolon WebSTAFFJul 9, 2020

Hello,

This functionality is the same in the Latest version of Canvas. However, we have come up with a Simple Solution according to your suggestions:

  1. Add the following code just before the .fslider DIV in the include/ajax/shop-item.html File:
  1. Add the following code at the bottom of the Page after the js/functions.js JS File Linking in the shop.html Template:

	jQuery(window).on( 'pluginFlexSliderReady', function(){
		$('.shop-gallery-placeholder').remove();
	});

This should work well. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SswwammpJul 9, 2020

Hi
Thanks for solution.
Loader shows up nicely but unfortunately slider loads below the spinner and both become visible.
I tried to put js code where you've suggested as well as bottom of ajax file, but none of them working.
Any idea?
Thanks again :)
A.

SSemicolon WebSTAFFJul 10, 2020

Hello,

We have tested these codes before providing it to you and it worked perfectly for us. Can you please provide us with a Live URL so that we can check out the exact issue and provide you with more assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

SswwammpJul 12, 2020

Hello SemicolonWeb,

I finally made the live site for you for reproducing the problem.
I also found few other stuff that also belong to the original problem.

Live urls for the ajax shop modal are:
https://magiclub.ie/shop/test-business (2 products)
https://magiclub.ie/shop/test-coffee-shop (1 product)

Problems that I experienced:

  1. I added the code you suggested re placeholder. Unfortunately images appear below the placeholder and it does not hide. you can see on both links. (this is the original problem)

  2. If the shop page has only one product (it is 3-product layout with 1 product), the card "shrinks" when page fully loads. If you have more cards, page is OK.
    The difference between the two links is ONLY that one page has 2 cards on it, and the other one has only 1.

  3. If you load the page (try the url with one product on it) and click on the Quick view (only "Quick" is visible due to shrinkage).
    Ajax modal shows up, and loading placeholder is there for quite a while and image does NOT load in at all.
    BUT: If You make a change on the window itself that forces to redraw the elements (eg. open Developer Tools / right click and Inspect, or simply RESIZE the window ), the image shows up straight away.

If you clear the cache / do incognito and reload the page, you can reproduce the problem #3 as well.

If you have any questions re these please let me know straight.
I really hope you can have same fantastic solution for these as how fantastic Canvas itself!

p.s. Just found your Canvas youtube channel yesterday and seen couple of videos, and just to say videos are just amazing! The way how you change something in the code and show straight what/how it affects on the page, simply hilarious! Brilliant idea and tutorial!!!

Thank you very much again,
Andy

SSemicolon WebSTAFFJul 12, 2020

Hello,

Thank You so much for the Kind Words! We do feel motivated to add more Videos! ;)

  1. So we have just checked this out and it appears that you are using Old Versions of Canvas which is why this is not working for you. For this version, you will need to add the following code inside the start: function(slider) Event Callback inside the loadFlexSlider: function() Function Block in the js/functions.js File:

$('.shop-gallery-placeholder').remove();

  1. This is related to Customization! The issue is with the `` which is a direct child of the #shop DIV. It is is highly recommended to not modify the Default Structure of the Parent/Child to avoid Layout issues.

  2. This could be related to HTML Validation errors: https://validator.w3.org/nu/?doc=https%3A%2F%2Fmagiclub.ie%2Fshop%2Ftest-coffee-shop on your Page.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SswwammpJul 13, 2020

Hi Semicolon,

Thank you for the professional suggestions - I wasn't aware of these validation problems. Now they're fixed and seems to be working fine.
Re the placeholder issue, it's hiding it correctly, but unfortunately there is a small flash (approx half sec) on the modal between showing the image and removing the placeholder).
It seems to be loading the image below the placeholder, extends the modal then removes the placeholder and smallen the modal.
Any idea how we could avoid this?
Thanks again,
A.

SSemicolon WebSTAFFJul 13, 2020

Hello,

Thanks for testing this out. While we currently provide only limited support for Older Versions of Canvas, can you consider checking out the following code for the Slider in the include/ajax/shop-item.html File:


    
        
            [
![attachment](images/shop/dress/3.jpg)
](images/shop/dress/3.jpg)
            [
![attachment](images/shop/dress/3-1.jpg)
](images/shop/dress/3-1.jpg)
            [
![attachment](images/shop/dress/3-2.jpg)
](images/shop/dress/3-2.jpg)

This should work well. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard