Profile: JRon

Hi there, I am upgrading my theme, which is based on Nop Alfresco, from 3.7 to 3.9

On my test page, if I enable "CSS bundling and minification" everything works well except for the two plugins I am using (JCarousel and Ajax Filters) no css is loaded for those, it´s like Nopcommerce doesn´t add the css to the bundle and just skips it.

Any idea why this could be happening? if I uncheck the "CSS bundling and minification" all css is loaded.

Thank you Nikola, I will add the settings and change the responsive settings, this is very much appreciated.

I fixed the thumbnail size in the carousel (just a css issue) but I can´t help to think that my code for the number of products shown in the cqarousel should be better, It´s now like this:

[{"breakpoint":3840,"settings":{"slidesToShow":3,"slidesToScroll":3,"arrows":true,"dots":false}},{"breakpoint":1024,"settings":{"slidesToShow":3,"slidesToScroll":3,"arrows":true,"dots":false}},{"breakpoint":600,"settings":{"slidesToShow":3,"slidesToScroll":3,"arrows":true,"dots":false}},{"breakpoint":400,"settings":{"slidesToShow":3,"slidesToScroll":3,"arrows":true,"dots":false}}]

I have managed to make the slides to show only 3 thumbnails by changing the setting: cloudzoomsettings.defaultresponsivebreakpointsforthumbnailscarousel to [{"breakpoint":1920,"settings":{"slidesToShow":3,"slidesToScroll":3,"arrows":true,"dots":false}},{"breakpoint":600,"settings":{"slidesToShow":3,"slidesToScroll":3,"arrows":true,"dots":false}},{"breakpoint":400,"settings":{"slidesToShow":3,"slidesToScroll":3,"arrows":true,"dots":false}}]
This works but I wonder if it could not be done better?

Anyhow, for some reason my thumbnails appear to small in my carousel, if there are only 2 pictures the thumbnails show fine (70px width and height) but if there are more pictures the thumbnails in the carousel are only 30px and there seems to be a script that sets that size and I can´t figure out where to change it, any help with this?

Thank´s for your reply, It´s working well.

How can I change the number of products displayed in the carousel, It´s set to 5 products now but I would like it to be only 3?

Hi there, is it possible for me to make the carousel vertical and displayed to the left of main image?
I am using the defaultClean theme with some modifications.

That´s great, this works fine now.
Thank you very much for your assistance :-)

Thanks for the reply but my Javascript coding skills are really very limited so I don´t know how to do that, I will check with my site  developer if he has the time to fix this for me. :-)

Hi there, I am trying to add increment and decrement buttons to the quantity box on the product page on my dev website, It´s based on the Alfresco theme but I am not using the Ajax cart plugin (due to another reason)

I am trying to implement the solution discussed here https://www.nop-templates.com/boards/topic/3052/increment-decrement-button but it´s not working for me, I am pasting my code from _AddToCart.cshtml here below, any suggestion to make this work?

<button type="button" class="minus decrease left">
    <span>-</span>
</button>
@Html.TextBoxFor(model => model.EnteredQuantity, new {@class = "qty-input left"})
<button type="button" class="plus increase left">
    <span>+</span>
</button>

<script>
    $(document).ready(function() {
        function incrementQuantityValue(event) {
            event.preventDefault();
            event.stopPropagation();
            var input = $(this).siblings('.qty-input');
            var value = parseInt(input.val());
            if (isNaN(value)) {
                input.val(1);
                return;
            }
            value++;
            input.val(value);
                
            input.trigger('input');
        }
        function decrementQuantityValue(event) {
            event.preventDefault();
            event.stopPropagation();
            var input = $(this).siblings('.qty-input');
            var value = parseInt(input.val());
            if (isNaN(value)) {
                input.val(1);
                return;
            }
            if (value <= 1) {
                return;
            }
            value--;
            input.val(value);

            input.trigger('input');
        }
        function handlePurchaseQuantityValue() {
            $(document).on('click', '.add-to-cart .increase, .cart .increase', incrementQuantityValue);
            $(document).on('click', '.add-to-cart .decrease, .cart .decrease', decrementQuantityValue);
        }
    });
</script>

I am trying to do the same on the product page to my modded Alfresco theme but it´s not working, here´s the code I have added to the _AddToCart.cshtml, what am I doing wrong?

<button type="button" class="minus decrease left">
                    <span>-</span>
                </button>
                @Html.TextBoxFor(model => model.EnteredQuantity, new {@class = "qty-input left"})
                <button type="button" class="plus increase left">
                    <span>+</span>
                </button>

                <script>
                    $(document).ready(function() {
                        function incrementQuantityValue(event) {
                            event.preventDefault();
                            event.stopPropagation();
                            var input = $(this).siblings('.qty-input');
                            var value = parseInt(input.val());
                            if (isNaN(value)) {
                                input.val(1);
                                return;
                            }
                            value++;
                            input.val(value);
                                
                            input.trigger('input');
                        }
                        function decrementQuantityValue(event) {
                            event.preventDefault();
                            event.stopPropagation();
                            var input = $(this).siblings('.qty-input');
                            var value = parseInt(input.val());
                            if (isNaN(value)) {
                                input.val(1);
                                return;
                            }
                            if (value <= 1) {
                                return;
                            }
                            value--;
                            input.val(value);

                            input.trigger('input');
                        }
                        function handlePurchaseQuantityValue() {
                            $(document).on('click', '.add-to-cart .increase, .cart .increase', incrementQuantityValue);
                            $(document).on('click', '.add-to-cart .decrease, .cart .decrease', decrementQuantityValue);
                        }
                    });
                </script>