Skip to main content

How to change style of added to cart info message

5 years 11 months ago #326578 by jeffmcbiscuit
-- HikaShop version -- : 4.4.0
-- Joomla version -- : 3.9.22
-- PHP version -- : 7.4

I'm trying to style the "X product has been added to cart" message drop down, but I can't find the CSS for it anywhere, and for some reason you've used !important for the 'color' attribute which is pretty bad practice. I can't override this in my custom.css file.


<style>
.notifyjs-metro-warning {
color: #8a6d3b !important;
background-color: #fcf8e3;
border: 1px solid #faebcc;
}

Please Log in or Create an account to join the conversation.

5 years 11 months ago #326584 by nicolas
Hi,

That CSS is not added by us. It's inside the library notify-js which HikaShop uses to display the notification boxes.
You can find it in the file media/com_hikashop/js/notify.js with the code:
Code:
addStyle("metro-lite", { html: '<div><div class="text-wrapper"><div class="title" data-notify-html="title"></div><div class="text" data-notify-html="text"></div></div></div>', classes: { error: { "color": "#a94442 !important", "background-color": "#f2dede", "border": "1px solid #ebccd1" }, success: { "color": "#3c763d !important", "background-color": "#dff0d8", "border": "1px solid #d6e9c6" }, info: { "color": "#31708f !important", "background-color": "#d9edf7", "border": "1px solid #bce8f1" }, warning: { "color": "#8a6d3b !important", "background-color": "#fcf8e3", "border": "1px solid #faebcc" }, black: { "color": "#fafafa !important", "background-color": "#333", "border": "1px solid #000" }, white: { "background-color": "#f1f1f1", "border": "1px solid #ddd" } } });
It indeed cannot be overridden in CSS.
To override it, you would have to add that same javascript modified with the colors you want in a view file used where the notification is displayed.
That way, your javascript would override the "metro" style used by notify-js with your own colors.

Please Log in or Create an account to join the conversation.

5 years 11 months ago #326651 by jeffmcbiscuit
OK thanks Nicolas.

To override it, you would have to add that same javascript modified with the colors you want in a view file used where the notification is displayed.


So I can copy / paste this into one of the Hikashop view files and change the colours to suit myself? That's fine. Do you know which view it needs to be please?

Please Log in or Create an account to join the conversation.

5 years 11 months ago #326685 by nicolas
Hi,

Which view depends on where you have the add to cart button displayed.
If it's only on the product details page, then you can add that code in the product / show.php view file.
Note that you'll need to encapsulate that code in script tags.

Please Log in or Create an account to join the conversation.

5 years 11 months ago #326688 by jeffmcbiscuit
I use custom pages for my products and have cart buttons dotted all around the site. Will I be able to tell which views if I do the 'show views on frontend' thingy from advanced config?

Please Log in or Create an account to join the conversation.

5 years 11 months ago #326706 by nicolas
Hi,

The "Display view files" setting will only work for HikaShop views.
Based on how the add to cart buttons were added to all your pages, it's possible that it won't show anything, which will mean that no HikaShop view is involved. It's worth giving it a shot though.
In case no Hikashop view file is involved, you could add the code in your template, so that it is available on all the pages.
However, you'll have to add a check on the addStyle function to run this code only if this function is present.
The following user(s) said Thank You: levelup

Please Log in or Create an account to join the conversation.

5 years 11 months ago #326737 by jeffmcbiscuit
Thanks Nicolas, I'll give it a go and let you know if I get stuck.

Please Log in or Create an account to join the conversation.

4 years 9 months ago #338676 by levelup
Hi
How can I edit the content of this notify?
i want add a button and a link to it?

Life is the unique stage of our art. Everyone sings their own song and leaves the stage. The stage is always permanent. Blessed is that song that people remember.

Please Log in or Create an account to join the conversation.

4 years 9 months ago - 4 years 9 months ago #338677 by Philip
Hello,

In order to better understand your need, can you precise the context and be more specific on your need, and so for this :
1. An url link in order to see the context
2. Describe your needs and the changes you want to make

Awaiting your returns to answer you precisely.
Regards
Last edit: 4 years 9 months ago by Philip.
The following user(s) said Thank You: levelup

Please Log in or Create an account to join the conversation.

4 years 9 months ago #338789 by levelup
I want the shopping cart notify to open as a modal and the buttons to "continue shopping" and "go to the cart".

Life is the unique stage of our art. Everyone sings their own song and leaves the stage. The stage is always permanent. Blessed is that song that people remember.

Please Log in or Create an account to join the conversation.

4 years 9 months ago #338791 by nicolas
Hi,

You want to edit the HikaShop cart notification plugin via the Joomla plugins manager.
There, you have an option where you can select the "popup" mode and it will work like what you want.
The following user(s) said Thank You: levelup

Please Log in or Create an account to join the conversation.

Time to create page: 0.074 seconds
Powered by Kunena Forum