Adding and displaying Hika Shop Cart Module via cart icon Into the menu

  • Posts: 38
  • Thank you received: 2
5 years 2 months ago #302674

-- url of the page with the problem -- : delux.ua/
-- HikaShop version -- : 3.5.1

Hi.
1. I read some of the older topics and documentation, but still haven't understood how to visualize Hika Shop Cart Module as an icon via CSS. Maybe it's because I'm not IT specialist, but i'd really like to do it, if possible. It should look somewhat like on the screenshot, I have the svg image availible.
If I understand right I should copy this <span> code from your demo website and insert it in the product cart php file. But yet I don't see where is the line in the CSS, where I should be able to paste the path to the cart icon.
2. I don't know, if you can help me with this, but I'd like to add this cart module into the menu and for that I would need to add a specific position in my template near the position "lang". If you could advise me also on that, I would be very greatful.

Attachments:

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

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
5 years 2 months ago #302677

Hi,

1. Supposing that you want the icon to display the details of the cart when someone click on it, you want to enable the HikaShop cart module in the position of your template where you want the cart icon to display.
Then, you want to set the "mini cart" setting of the module to "dropdown cart".
And finally, you want to do a translation override in order to change the different texts displayed by the cart module 'mini' mode to display instead an image:
www.hikashop.com/download/languages.html#modify
So for example, for the "The cart is empty" message that you see when there is nothing in the cart.
You can add such translation override:

CART_EMPTY="<img src='http://mywebsite.com/link/to/empty/cart/image.png'/>"

That's it. There is no need for CSS or for PHP in view overrides.

2. I think that you should be able to use the position where the menu module displays itself. If you need to add a position to your template, the best is to check with your template provider. Now, for simple templates this method usually works:
www.balbooa.com/knowledgebase/32-documen...e-position-in-joomla

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

  • Posts: 38
  • Thank you received: 2
5 years 2 months ago #302688

Hi, Nicolas.
Thank you for your prompt answer. So I tried to do as you advised with "CART_EMPTY" state and it worked, it did display my image.

Now how can I make that when a customer adds an item to cart the image responsively shows, the quantity of items in the cart? What other translation lines should I override? I tried different overrides of the lines"X_ITEM", "X_ITEMS", as was noted in some previous topics, so that the text "X products for X UAH", when the cart is full, changes to image like with "CART_EMPTY" and shows the quantity of items.

However nothing seems to have worked.

Last edit: 5 years 2 months ago by Vlad Boch.

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

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
5 years 2 months ago #302695

Hi,

Well, you can just search for the text to find the corresponding translation line you need to change...
It actually depends on how you configured the other settings of the module, which I don't know.
Supposing that you display the quantity and the prices, it will be the translation keys X_ITEM_FOR_X and X_ITEMS_FOR_X
That you want to change in a similar manner.
And to keep the quantity displayed with the image you can just leave the first %s in the translation text after your img tag.

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

  • Posts: 38
  • Thank you received: 2
5 years 2 months ago #302723

Hi, Nicolas.
Ok I will try to do what you advise. The problem is I don't exactly know which line responds for what. As I mentioned earlier X_ITEM_FOR_X and X_ITEMS_FOR_X haven't worked out for me. Now, just in case here is a screenshot of the module settings. I like these settings a lot, they are convenient for user, the only thing that's incovinient is displaying this module as image.

Attachments:
Last edit: 5 years 2 months ago by Vlad Boch.

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

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
5 years 2 months ago #302737

Hi,

No, earlier, you talked about the translation keys "X_ITEM" and "X_ITEMS", and not the translation keys X_ITEM_FOR_X and X_ITEMS_FOR_X that I was talking about in my message.
So from what I understand you didn't change the correct translation keys and that's why it didn't work.
Please double check.

The following user(s) said Thank You: Appie Thrasher, Vlad Boch

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

  • Posts: 38
  • Thank you received: 2
5 years 2 months ago #302798

Hi, Nicolas.
This kind of worked. I hope to proceed with adding the right position for my template. Unfortunately position menu doesn't work for this module, and I can't find the exact right position of languages module in my template php layout file in order to make a similar 1 for cart. I hope our IT department can help with that.

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

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
5 years 2 months ago #302804

Hi,

Yes, don't hesitate to also ask your template provider as they know best how to add positions to their template.

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

  • Posts: 38
  • Thank you received: 2
5 years 1 month ago #303441

Hi, Nicolas!
We managed to create position cart for our cart module. How can I correctly add text "Cart is empty" at "Cart_Empty" line for it to be displayed right under the image. Which lines should I add to the code? Please, help me, if you can.

Attachments:

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

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
5 years 1 month ago #303444

Hi,

In your translation override you have something like that:
CART_EMPTY="<img src='my image url'/>"
What you want is something like that:
CART_EMPTY="<img class='my_class_for_cart_empty_img' src='my image url'/><span class='my_class_for_cart_empty_text'>The cart is empty</span>"

Then, in your CSS, you can use the classes my_class_for_cart_empty_img and my_class_for_cart_empty_text in order to style the image and the text how ever you want.

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

  • Posts: 38
  • Thank you received: 2
5 years 1 month ago #303475

The main problem with that is the image begins to float around and I just want it to stay in it's position and the text to be displayed just like it is on my 3rd screenshot, only the image has to stay where it is and maybe not use the font I used in the image.

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

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
5 years 1 month ago #303482

Hi,

I'm sorry but I don't understand what the problem is ?
First, an image has no font. Second, the image tag and the span tag with the text inside have different classes. So with CSS code, you can style them completely separately.
And you can force the position of the image with the proper CSS.
As as far as I can see, my solution should still meet your needs provided that you add the correct CSS to go with it based on your needs.

Please undertand that this is customization work, not user support. I've given you the necessary hints to do it. If you need someone to help you further with that customization and do it for you, you can contact our partners and request a quote:
www.hikashop.com/home/our-partners.html

The following user(s) said Thank You: Vlad Boch

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

  • Posts: 38
  • Thank you received: 2
5 years 1 month ago #303509

Hi,
Ok thanks for all your support. I definetly appreciate all the hints you've given to me.
As for image, you might have misunderstood me, I tried to add different image that already had the text "Cart empty" with a specific font for CART_EMPTY line, but it didn't work out very well. Sorry if I might have misconstruded my request. A thank you well deserved.

So could you give me one more little hint? Should the CSS be edited in my template files, or via Hika Shop configuration?

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

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
5 years 1 month ago #303518

Hi,

Either way is fine. If you do it in the template, you need to make sure that you won't loose your changes when you update the template in the future. Some template provide a way to do that. You should check with the support of your template provider.
If it's your own template, then in the CSS of the template is the best.
If you do it in the HikaShop configuration, it's best to do it in the styles setting rather than the frontend setting so that you won't have any missing new CSS when you update your HikaShop in the future.

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

  • Posts: 38
  • Thank you received: 2
5 years 1 month ago #303610

Hi, Nicolas.
We decided to stop on using a slightly different image for empty cart for now/ It is more fitting and much more good looking than displaying the text. Thanks again for providing all the necessary hints that helped us to come up with the best suitable decision!

Attachments:

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

  • Posts: 454
  • Thank you received: 35
4 years 2 weeks ago #316534

Hi Nicolas,
Are you sure that the Languages string can be used ?!? Let me say:

I set CART_EMPTY as green icon
I set X_ITEM_FOR_X as blue icon
I left X_ITEMS_FOR_X as default

If I'm not logged: I add one item to the cart > the icon change color: ok / I add more items to the cart > the icon disappear: ok
If I click on cancel products icon from cart > the green appear > but an alert message where the CART_EMPTY language string is called = this is not good

If I'm logged: I add one item to the cart > the icon change color: ok / I add more items to the cart > the icon disappear: ok
If I click on logout > the green icon appear > but an alert message where the CART_EMPTY language string is called = this is not good

here a video

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

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
4 years 2 weeks ago #316537

Hi,

Yes I'm sure.
The issue you have is just that you're using the same translation key for the green message which appears when the cart is emptied by the customer, and the text inside the cart module when the cart is empty.
In the settings of the HikaShop cart module, that you can edit via the Joomla modules manager, you can change that empty message. So just enter another translation key there, and use that translation for your green icon and remove your translation override for the other translation key so that the empty message can display properly.

The following user(s) said Thank You: joomleb

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

Time to create page: 0.088 seconds
Powered by Kunena Forum