Variant Switching Suddenly Bugged - I cannot add different variants to cart after page fully loads

Store Design
, , , ,

Topic summary

Issue: Variant switching on a product page works correctly during initial page load but fails after the page fully loads, preventing customers from selecting different variants and adding them to cart.

Technical Error: JavaScript console shows Uncaught TypeError: $container.slick is not a function at line 1495 in the classic-sandscape file. The error occurs when setDefaultSlider function attempts to initialize a Slick carousel.

Root Cause: The Slick library (a carousel/slider plugin) is either:

  • Not loading properly before dependent code executes
  • Loading in the wrong order relative to scripts that depend on it
  • Not being initialized correctly

Error Chain: The failure cascades through multiple functions: setDefaultSlider → productPageVariant → callExternalVariantHandler → createSwatches → triggered by customer clicking variant options.

Suggested Solution: Verify that the Slick library script tag loads before any code attempting to use it in the HTML file. Check script loading order in the theme files.

Status: User seeking guidance on locating these scripts within theme folders and troubleshooting steps.

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
1

The variant switching works fine before the page fully loads. However, after the page fully loads, you are unable to choose a different variant and add it to cart.

Here is the JS error:

Uncaught TypeError: $container.slick is not a function at setDefaultSlider (classic-sandscape?variant=39868394242208:1495:20) at productPageVariant (classic-sandscape?variant=39868394242208:1431:84) at SwatchesConstructor.callExternalVariantHandler (vendor.min.js?v=158458535605940156021646383247:36:8105) at SwatchesConstructor.createSwatches (vendor.min.js?v=158458535605940156021646383247:36:5391) at SwatchesConstructor.endOfTheClickHandler (vendor.min.js?v=158458535605940156021646383247:36:6605) at o (vendor.min.js?v=158458535605940156021646383247:36:6105) at HTMLAnchorElement. (vendor.min.js?v=158458535605940156021646383247:36:6194) at HTMLAnchorElement.dispatch (jquery.min.js?v=146653844047132007351646383233:3:6466) at r.handle (jquery.min.js?v=146653844047132007351646383233:3:3241)

This is what Chatgpt is translating it as:

The error message “Uncaught TypeError: $container.slick is not a function” indicates that there is an issue with the code related to the Slick library.

In this specific case, the code is trying to call the function slick() on the $container variable, but it’s not recognized as a function. This error typically occurs when the Slick library is not properly loaded or initialized before attempting to use its functions.

Here’s a breakdown of the error stack trace:

  • setDefaultSlider function is being called on line 1495 of the classic-sandscape file.
  • setDefaultSlider function is being called from productPageVariant on line 1431 of the classic-sandscape file.
  • productPageVariant function is being called from callExternalVariantHandler on line 8105 of the vendor.min.js file.
  • callExternalVariantHandler function is being called from createSwatches on line 5391 of the vendor.min.js file.
  • createSwatches function is being called from endOfTheClickHandler on line 6605 of the vendor.min.js file.
  • endOfTheClickHandler function is being called from an anonymous function on line 6194 of the vendor.min.js file.
  • The anonymous function is being triggered by an event on an HTML anchor element.

To resolve this error, you should ensure that the Slick library is properly included in your project and that it is loaded before the code that is trying to use it. Check if you have included the Slick library script tag in your HTML file, and make sure that it is loaded before the code that is causing the error.

2

The issue is in slick library

  1. Check script loading order: Verify that the Slick library script is loaded before the script that attempts to call the slick() function. The order of script loading is important, as the code that relies on the library should be executed only after the library is fully loaded.
1 Like
3

Hello!

Thanks for your reply.

Any idea where I can find these scripts in the theme folders?

I would appreciate how to troubleshoot it also!