How can I style the "Product successfully added to cart" pop up.

  • Posts: 100
  • Thank you received: 0
  • Hikashop Business
6 years 8 months ago #275774

-- HikaShop version -- : 3.1.1
-- Joomla version -- : 3.7.4
-- PHP version -- : 7.0.22
-- Browser(s) name and version -- : Firefox 54.0.1

How can I style the "Product successfully added to cart" pop up.I don't like the color or the image placeholder. Where do I find the file with the code for it and the css?

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

  • Posts: 26019
  • Thank you received: 4005
  • MODERATOR
6 years 8 months ago #275775

Hello,

The system is using "vex" which is an open-source JS lib included in HikaShop.
github.com/hubspot/vex

You're free to use CSS overrides to customize it.

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

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

  • Posts: 100
  • Thank you received: 0
  • Hikashop Business
6 years 8 months ago #275871

Actually, I changed the pop up from vex to bootstrap and nothing changed. If i reset it to vex and want to edit the css, where do i find the css file?

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

  • Posts: 26019
  • Thank you received: 4005
  • MODERATOR
6 years 8 months ago #275872

Hello,

Yes, as I told you, the cart notify plugin is using the lib "vex".

So, to reformulate my previous message :
You cannot edit the vex css file because it's a core file ; but you can put some CSS override rules in your own CSS file.
www.hikashop.com/support/documentation/1...ize-the-display.html

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

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

  • Posts: 100
  • Thank you received: 0
  • Hikashop Business
6 years 8 months ago #275921

I appreciate your patience, but because the pop up disappears so quickly, I can't tell what the selector is to apply the css to. I thought if I can see the file that generates the pop up I can capture the selector that I need to change the css to. Can you tell me what the selectors are for the pop up?

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

  • Posts: 200
  • Thank you received: 75
6 years 8 months ago #275924

Hi,

you can just change the time the pop-up is visible to like a million seconds, then you can easily inspect the pop-up and its CSS in your browser developer tools. Go to Plugins -> HikaShop Cart notification Plugin and set Auto-hide delay to whatever value you need. Hope that helps.

The following user(s) said Thank You: SEKME

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

  • Posts: 26019
  • Thank you received: 4005
  • MODERATOR
6 years 8 months ago #275922

Hello,

Are you sure that you're talking about the popup and not about the "growler" ?
Because for the most I remember when I made the cart notify plugin, the popup is not made to close itself.
But the "growler" notification can :
www.hikashop.com/home/blog/367-hikashop-3-0-out.html#cart

And it's based on the lib "notifyjs" : notifyjs.com/

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

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

Time to create page: 0.075 seconds
Powered by Kunena Forum