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!

0 Likes
r8r
Shopify Expert
1286 135 431

@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

Mario Rader [he] ★ If you want to achieve greatness, stop asking for permission. ★ Studio Mitte
• Meine Antwort war hilfreich? Hinterlass bitte ein Like.
• Meine Antwort hat Dein Problem behoben? Bitte akzeptiere sie als Lösung.
• Ich hab dir etwas erspart? Ich freue ich mich immer über eine kleine Aufmerksamkeit
• Ja, ich biete Shopify-Services & -Entwicklung und freue mich von Dir zu hören!
• Bitte teile einen Link zu der Seite, deren Problem Du in deinem Beitrag beschreibst!

• Yes, I provide Shopify-services & -development. Feel free to get in touch!
• Please share a link to the site, which you refer to in your problem description. This incredibly increases the chances of you receiving a useful answer!
• My answer was useful? Please leave a Like.
• My answer solved your issue? Please accept it as the solution.
• I saved you time or money? I'm always happy to receive a little thank you.
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

0 Likes
r8r
Shopify Expert
1286 135 431

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

Mario Rader [he] ★ If you want to achieve greatness, stop asking for permission. ★ Studio Mitte
• Meine Antwort war hilfreich? Hinterlass bitte ein Like.
• Meine Antwort hat Dein Problem behoben? Bitte akzeptiere sie als Lösung.
• Ich hab dir etwas erspart? Ich freue ich mich immer über eine kleine Aufmerksamkeit
• Ja, ich biete Shopify-Services & -Entwicklung und freue mich von Dir zu hören!
• Bitte teile einen Link zu der Seite, deren Problem Du in deinem Beitrag beschreibst!

• Yes, I provide Shopify-services & -development. Feel free to get in touch!
• Please share a link to the site, which you refer to in your problem description. This incredibly increases the chances of you receiving a useful answer!
• My answer was useful? Please leave a Like.
• My answer solved your issue? Please accept it as the solution.
• I saved you time or money? I'm always happy to receive a little thank you.