Different icon for Cart and Whislist

  • Posts: 8
  • Thank you received: 0
  • Hikashop Business
1 week 4 days ago #319416

-- url of the page with the problem -- : rockandrocks.com
-- HikaShop version -- : Business 4.3.0
-- Joomla version -- : 3.9.18.
-- PHP version -- : 7.3
-- Browser(s) name and version -- : Google Chrome v. 81.0.4044.138 (Build oficial) (64 bits)

Hello again.
Sorry in advance, I don't like to ask, but in the 14 pages about Whislist I have not found the solution. It could be due to an override of mine.:blush: :blush:
I have made a Cart module and another Wishlist module.
When empty, the icons are what they should be, but when adding products the two modules present the same icon.
I have created a class in the .CSS and it works, but the case is that I don't know how to integrate it, since the Cart and the Whislist share some parameters; like this one specifically, I think.
I send you a pic of everything empty, another one with everything full, and another one of how I would like it to be shown with the DevTools screenshot showing the .CSS class.
The class is very simple: Only chages the background pic:

.hikashop_small_cart_checkout_link2,.hikashop_small_cart_clean_link2,.hikashop_small_cart_total_title2 span,.hikashop_small_cart_total_title2 span span,.hikashop_small_cart_total_title2 span span span {
/*Información Wishlist Arriba Izquierda*//*Wishlist Llena*/
color: #38661f!important;
font-size: 18px;
font-weight: bold;
text-decoration: double underline #000000!important;
background-image: url(/images/wishlist_llena.png);
background-repeat: no-repeat;
background-padding:100px;
background-color: transparent;
height: 80px;
padding: 0px 0px 0px 90px !important;
margin-bottom:0px;
/*display:inline;*/display:inline-block;
zoom:1;
cursor: pointer;
}
Thank you very much in advance.

Attachments:

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

  • Posts: 69451
  • Thank you received: 10401
  • MODERATOR
1 week 3 days ago #319419

Hi,

To be able to check on the situation, we need to be logged in. Could you provide a user account so that we could login ?

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

  • Posts: 8
  • Thank you received: 0
  • Hikashop Business
1 week 3 days ago #319451

Of course!

Joomla

This message contains confidential information


FTP
This message contains confidential information


If you need something more, tell me.
Thanks.

[Moderator : Next time for you own safety, use our Contact Us form to provide access and references]

Last edit: 1 week 3 days ago by Philip.

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

  • Posts: 8
  • Thank you received: 0
  • Hikashop Business
1 week 3 days ago #319465

O.K., thanks.
I wanted to follow the same thread so that you would know why I was sending you my data.
Anyway, if I did it right, they were encrypted, right?
Thanks again.

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

  • Posts: 2481
  • Thank you received: 333
  • MODERATOR
1 week 2 days ago #319469

Hello,

First, I see that you add your whishlist image in the "Empty message" input, so that this image disappear when the whishlist is fill is normal.
If I understand your needs, all you want is to add your image in your whishlist module (empty or not) and same idea for your cart module, right ?
I have a suggestion for you, first define a good selector for each of your module cart & whishlist, like :
.modul_cart_class div.html_class & .modul_whishlist_class div.html_class

Then use this kind of command :
content: url(url/image.jpg);

To get this :
.modul_cart_class div.html_class {content: url(url/cart_image.jpg);}
.modul_whishlist_class div.html_class {content: url(url/whishlist_image.jpg);}

Have a look on this tutorial to see how to add your custom css, we recommend to add it at the end of your style.css.
Have your custom at the end of the file make it more easy to find and increase your code priority.

Hope this will help you to achieved your request

Regards

Last edit: 1 week 3 days ago by Philip.

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

  • Posts: 8
  • Thank you received: 0
  • Hikashop Business
1 week 2 days ago #319509

Hi, again.

First, I see that you add your whishlist image in the "Empty message" input, so that this image disappear when the whishlist is fill is normal.

Yes, because I want this picture for empty Whislists.
And I put another one as empty message for the cart.
But my idea is they change with people add a product.

If I understand your needs, all you want is to add your image in your whishlist module (empty or not) and same idea for your cart module, right ?

I want different pics for empty and plenty cart, and two other ones for empty and plenty wishlist.
When cart is empty shows the image I put in empty cart message at the module. When whislist is empty shows the image I put in empty whislist message at the module.
This is all right.
When cart have products shows another image, that is what I want.
But my problem is when wishlist have products shows the same image than the cart with products. And I want the heart without barbed wire, I send you in the pic.

Summarizing:
Empty cart image is O.K. (An empty Cart)
Cart with products image is O.K. (Cart with a stone inside)
Empty wishlist image is O.K. (Heart with barbed wire)
Whislist with products shows the same image than the cart with products:(Cart with a stone inside) Not O.K. Must be the heart without barbed wired.
I tried what you send me in the frontend_default.css and in the style_default.css, but nothing changes...

Sorry by my English, I'm Spanish. I hope you can understand me. :side: :side:

Thank you very much for your time.

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

  • Posts: 2481
  • Thank you received: 333
  • MODERATOR
1 week 2 days ago #319522

Hello,

Okey, I understand better now, follow me step by step :
1. As you did previously add your image directly in "Empty message" input
Results : see screenshot



2. And when your Cart/Whishlist is fill with product the <p></p> is replace by <a></a>
<a class="hikashop_small_cart_checkout_link" href="..." return false;">
<span class="hikashop_small_cart_total_title">1 item for 19,00 €</span>
</a>


From this, use my previous trick with this kind of command :
.modul_cart_class div.html_class a.cart_link {content: url(/url/full_cart_image.jpg);}
.modul_whishlist_class div.html_class a.cart_link {content: url(/url/full_whishlist_image.jpg);}


If you understand me well, this last 2 images will be displayed only when product is in the module and otherwise only you will have 2 images from "Empty message" input.
From this you will have for each of your module a image for empty and full module different picture.

Hope this will meet your needs.
Regards

Last edit: 1 week 2 days ago by Philip.

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

Time to create page: 0.073 seconds
Powered by Kunena Forum