Liquid, JavaScript, themes, sales channels
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!
@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
@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
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?
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
@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!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024