CSS breaks when changing from Modal Cart to Page Cart

[dajper]

Hello!

I am getting this weird error. We are using the Cart Modal but want to switch to Cart Page instead. Before the change everything is fine. When changing to Page Cart I suddenly get this css error

When opening the editor and scrolling to line 2542 i find nothing regarding the variable $supportOrangeLight

Any ideas what could be the cause for this error?

Thank you all in advance!

[r8r]

@dajper – as a quick and dirty fix, you can add the line

$supportingOrangeLight: #fed8b1;

somewhere near the top in your assets/theme.scss.liquid file. That should get rid of the error. All in all, this seems to be indicative of some other problem with your codebase.

I’d be curious to read whether this made a difference!

Mario

[dajper]

@r8r thank you for your answer!

We already have it as a variable used elsewhere in our css with everything working as expected before the switch to Cart page.

/*============================================================================
  Ajaxify Colours
  Add your theme colors in here, or create new styles.
    - If creating new styles, you may have to restyle text, headers and links
==============================================================================*/
$colorBody: {{ settings.color_body_bg }};
$colorTextBody: {{ settings.color_body_text }};
$colorBorder: {{ settings.color_borders }};

$primaryColorDarker: #38A899;
$supportingOrangeLight: #EBCDC6;
$mobileNavTextColor: #7F807F;

If I replace all occurences of $supportingOrangeLight with the hex code I get this error

Line 2790 is a comment.

Continuing to do so until $primaryColorDarker, $supportingOrangeLight and $mobileNawTextColor are removed fixes the css error but some styles are broken. Following shows the quantity component before and after switching to Page Cart

It seems to render ajax-cart-template.liquid when Modal cart is active and plain cart.liquid when switched Page cart

Also, the quantity component is changed not only in our cart page, but in our product page as well.

Any ideas?

[dajper]

I got around the css error by moving the custom variables ($primaryColorDarker, $supportingOrangeLight and $mobileNawTextColor) below the ajaxify section of the css file ?‍

The problem with the weird looking component still stands. Will update on progress

[r8r]

@dajper sounds like there’s already a few landmines (hello spell check!) in that source code. I’d recommend you let a developer go through and potentially refactor the code!