Ray UK

Change your file to this

Create a file in your theme directory /yourthemename/templates/catalog/listing/product-list.tpl (If it doesnt already exist) and enter the following in that file. {extends file='parent:catalog/listing/product-list.tpl'} {block name='product_list'} {include file='catalog/_partials/products.tpl' listing=$listing productClass="col-xs-6 col-lg-4"} {/block} You may need to adjust some css to suit afterwards. If for some reason you are sticking to using just the classic theme then adjust this line only in the file classic/templates/catalog/listing/product-list.tpl {include file='catalog/_partials/products.tpl' listing=$listing productClass="col-xs-6 col-lg-4"}

Hi PSAddict, I think I have it sorted now. Im a novice at jquery code but with the help of google I seem to have it working as can be seen working on this link. https://www.northwestecigs.uk/pod-style-kits/459-1227-aspire-flexus-q-kit.html I done it by using this code $( document ).on( "ajaxComplete", function() { Thanks

Im sure it is still converted to the WebP format, but still uses the .jpg extension

@elementChaosu, I dont suppose you would know how to add that listener on the ajaComplete action? As you can see above, I have somewhat got it working but its throwing up errors because of my attempt at jquery. Thanks

Hi, So whilst it is somewhat working, it seems that the code DOMSubtreeModified is not ideal for this because every time the slider moves, the content is changing and initialising the slick again so its throwing up lots of errors such as this Uncaught TypeError: e.$slides is null What would be the best on function to use instead of "DOMSubtreeModified" Thanks

ok so I have managed to get this working, but i think something may be wrong somewhere. When the page loads and it initialises the slick slider, you see the other images below the main image for a fraction of a second.. This is also causing the screen to flicker ( only noticable on mobile) when changing variants. Im not sure if this is the right way to do the jquery listeners etc. /* SLICK-SLIDE FOR Prod Carousels */ $(document).ready(function(){ // call the function on page load makeslider(); }); $('.page-content').on('DOMSubtreeModified', function(){ // call the function on variant change makeslider(); }); function makeslider() { $('.prod-thumb-carousel').slick({ useCSS: false, infinite: true, arrows: true, speed: 200, autoplay: true, slidesToShow: 1, cssEase: 'ease', slidesToScroll: 1, lazyLoad: 'progressive' }); } Any help appreciated You can see the flicker on this page when changing colours (noticable on a mobile device). https://www.northwestecigs.uk/pen-style-kits/146-621-pockex-aio-kit.html#/126-colour-red_gradient You can see the slider working here. https://www.northwestecigs.uk/refillable-pods/460-1229-aspire-gotek-x-replacement-pods-2pk.html

Hi, thanks for the advice. I gathered it would be something along those lines, however..im useless at jquery Here is what im currently trying, but its not working $('.images-container').addEventListener("onload", makeslider); function makeslider() { $('.prod-thumb-carousel').slick({ useCSS: false, infinite: true, arrows: false, speed: 200, autoplay: true, slidesToShow: 1, cssEase: 'ease', slidesToScroll: 1, lazyLoad: 'progressive' }); } it was originally this $(document).ready(function () { $('.prod-thumb-carousel').slick({ which works on page load only.

Hi, I am attempting to turn the static "main" image on the product page into a carousel by using the slick slider plugin. I have managed to get all the images for the selected variant and the slider will work on page load. This is the main image sliding to the left without user interaction. Now the problem I am facing is that when the user selects a different variant/colour, the image list is re-populated and thats when my carousel stops working. Does anybody know of a tutorial to accomplish this. Thanks in advance

You could try and disable friendly url in the seo settings, then re-enable it. The paths may be set for the old domain/path

What im looking to accomplish must be possible because I've seen modules/themes that show size cominations on the productlist. I guess its a case of making a new variable by using an override on a controller.. but I wouldnt have a clue what to put there. Any ideas? Thanks

Ok so I have got a little further. Ive got this far by doing this: I created a add-to-cart-button.tpl and Inside the miniature/product.tpl i used this {block name='product_variants'} {include file='catalog/_partials/add-to-cart-button.tpl' variants=$product.main_variants} {/block} and then used the condition {if $variants|@count >1} Now this is working, but only for products that have colour attributes. (see pic) So is there another way of calling my add-to-cart-button.tpl that will also include other combinations and not just the colours. (in the example above this would include the paper types)

Thanks for trying Dinesh, That condition is doing the same as the previous one. It looks like its just a 0 or 1. The number im really after is on the list somewhere as it is used here So the value here is 14. The 5 colours plus the other 9 Thanks

In the file variant-links.tpl there is $variants and also a span named "js-count" which shows the number of variants. Ive tried ({$variants|@count}) but thats not working. Is it because that array isnt available in the category listing page or am I doing something else wrong. When I use the above my button shows <Choose Option (0)> Thanks

Thank you, That is the closest its been. Im guessing that value will only be 1 or 0 to indicate the products has combinations. If this variable is available I think it would be perfect for this job Its just that some products may have 1 colour option (which is needed for faceted search to filter) The above image would then show 0/1 combinations which would have <ADD TO CART> so something like this which counts the number of different combinations would be perfect {if $product.id_product_attribute|@count > 1} If thats not possible then what you have already suggested will do. Thanks