Different icon for Cart and Whislist

  • Posts: 8
  • Thank you received: 0
3 years 11 months 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: 81504
  • Thank you received: 13064
  • MODERATOR
3 years 11 months 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
3 years 10 months 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: 3 years 10 months ago by Philip.

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

  • Posts: 8
  • Thank you received: 0
3 years 10 months 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: 4508
  • Thank you received: 610
  • MODERATOR
3 years 10 months 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: 3 years 10 months ago by Philip.

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

  • Posts: 8
  • Thank you received: 0
3 years 10 months 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: 4508
  • Thank you received: 610
  • MODERATOR
3 years 10 months 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: 3 years 10 months ago by Philip.

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

  • Posts: 20
  • Thank you received: 0
  • Hikashop Business
4 months 2 weeks ago #357081

HikaShop Business: 5.0.1
Joomla 5.0.1

Hello

Firstly, thank you for a great product! I have been using HikaShop for MANY years now.

I have both a mini-cart module and wishlist module and would like to have different images to represent each, as well as showing the number of items in each.

I have the mini-cart module working fine by using language overrides:
CART_EMPTY="<img src='url/cart-image.jpg' />Empty"
X_ITEM_FOR_X="<img src='url/cart-image.jpg' />%s"
X_ITEMS_FOR_X="<img src='url/cart-image.jpg' />%s"

I have the Empty Wishlist image working using langguage overrides:
WISHLIST_EMPTY="<img src='url/wishlist-image.jpg' />Empty"

I tried to override the cart image that is used in the wishlist module, by specifying the icon path in the module settings, as well as in CSS background-image, but both methods give me both the cart image and the wishlist image.

If I use your suggestion above in CSS, I get the correct image, but no longer get the number of items in the wishlist:
.pl-wish-list .hikashop_small_cart_total_title{
content: url(url/wishlist-image.jpg);
}

Is there a way to have a different wishlist image shown where I also have the number of products shown.

I attach 2 images. One showing the same mini-cart image used for both, when content: url(url/wishlist-image.jpg) CSS is NOT used and a second image showing the correct wishlist image used for an empty wishlist.

(This is on a localhost machine, so cannot give access)

Many thanks.

Attachments:
Last edit: 4 months 2 weeks ago by TwoFatFingers. Reason: adding second image

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

  • Posts: 81504
  • Thank you received: 13064
  • MODERATOR
4 months 2 weeks ago #357089

Hi,

Indeed, translation overrides are not ideal as you can't have different images for the cart and the wishlist.

The CSS solution should work fine. But yes, if you directly use .hikashop_small_cart_total_title it will replace the number of items.
Instead, you could use .hikashop_small_cart_total_title:before so that you still keep the number of items.

Also, since a few releases ago, we've added an icon setting in cart and wishlist modules where you can directly enter the URL of your image and it will be added to the module. And so since you have a different module for each, you can use a different image. So that solution will also work and actually doesn't require any CSS code, view change or translation override, so that's the one I would recommend.

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

Time to create page: 0.085 seconds
Powered by Kunena Forum