CSS breaks when changing from Modal Cart to Page Cart

dajper
Tourist
5 0 2

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

dajper_0-1619105382669.png

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

dajper_1-1619105478463.png

Any ideas what could be the cause for this error?

Thank you all in advance!

Replies 4 (4)

r8r
Shopify Expert
2555 327 940

@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

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
dajper
Tourist
5 0 2

@r8rthank 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

dajper_0-1619155430187.png

Line 2790 is a comment.

dajper_1-1619155506869.png

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

Screenshot 2021-04-23 at 07.29.20.pngScreenshot 2021-04-23 at 07.28.55.png

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
Tourist
5 0 2

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
Shopify Expert
2555 327 940

@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!

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte