RESOLVED: Add Shopping Cart Icon & Change Styling

Hi again,

I have been searching on docs and forum without success and have the following questions:

1. I do not understand how to enable the shopping cart icon on my site. I have selected "yes" to "minicart" field in HS Cart Module settings,

and you can see my Joomla settings for same module here,

as well as my Config/Display tab settings here,

Yet, on my page:

you see only text and no cart icon. Am i misunderstanding the field "minicart"? I would like a cart icon to show when cart is empty, and possibly when cart is full if it does not take up too much space. I see on your demo page:

that you have the icon on same line as cart title regardless of whether cart is empty or full... for starters, I would like to know how to do that.

2. How can I get different cart icon options to try, and where do I make these changes... in the css? I like the icon used by the first site in your showcase forum:

as I also currently have a gray background... Do you know if it is possible to get it and where? [EDIT: OOOH SNAP! LOOKS LIKE IT IS THE HIKASHOP CART ICON, RIGHT? NO WONDER I LIKE IT! ] I have also considered using a shopping bag Icon instead, but do not know where to find them as well. Do you know source of other cart and bag icons?

3. I also like very much the existing shopping cart icon and styling in my current template:



- but it is inside a VM shopping cart module! - Is there a way for me to use this same icon graphic and similar text styling and spacing in HikaShop since I already have the graphic? How would I go about that?

Thanks again for great support.
Regards
Scott

Hi Nicolas

I need help locating the html file where I can add image to Hikashop cart.

In this picture you can see that I was able to copy cart image while in FireBug... but I can not find this same file on my server to do the same thing... I would prefer to make this same change using html, rather than doing it in a language file. What is the file name [see in firebug pics] of this html code and where is the file?



Thanks again

Regards

Scott

Hi Nicolas:

I successfully entered image into "cart" file of "Product" view as instructed... Padding was messed up so I also set padding to zero at that same point and result is first picture.

You can see in firebug that there must be other code controlling this padding :

#column_left div.moduletable div {
color: #B7A68F;
padding: 0 30px;

I can not find where this code is. I don't mind the 30px padding when the bag is empty... but when bag is full I want Left and Right padding to be around 10px. I am not sure if I can control this padding separately when bag is empty and full or if both instances are controlled from one line of code. I could live with 10px padding when bag empty if necessary to get padding fixed when bag is full. See second pic for 10px padding bag empty.



Third and Fourth pics show Bag full with existing 30px padding and when I edit it to 10px in Firebug.






Please tell me where I can make this padding change.

Thanks again
Scott

PS
I am having trouble finding these files from the information given if Firebug. I see in blue in upper right of CSS window a name that changes frequently, sometimes name of a product, othertimes checkout, othertimes listing..... so can you help me to understand how to find what file is being referenced so in future I won't have to ask?

Also, where can I change cart options to show more detail like on HS demo page?



And, where can i activate and configure the continue shopping popup like on HS demo page?

Hi again NIcolas,

1. OK, I am asking my template provider to help me find this padding code. If I get stuck, I will come back to you to see if there is a way to overide template with Hikashop views, but for now I will try to resolve with template first.
2. I have looked at cart module Hikashop Options and I do not see where to make these changes. Here is your cart:
   
   
   
   and my current cart:
   
   
   
   and here are Hikashop Options for my Shopping Bag:
   
   
   
   and I also looked in Checkout config tag:
   
   
   
   In addition to the totals, I would like to see name of each item in cart and quantity, without headings and without the remove from cart "x".
3. OK, thanks I now can see popup window..

Thanks again
Scott

Hi Nicolas

Thanks, the "mini cart" option had me confused as I initially thought it was for a cart icon... Now I can see detailed cart.

Regards
Scott
ps My template supplier helped me to resolve padding on cart so it looks better now.

I want to add an icon too! i dont know much so please let me know how I am in the cart - product - view, but is very hard to me to know where i can add the icon...

You don't need to edit that view for that.
In the Joomla module options, edit the cart module and add a suffix for this module class.

Then in css, you have to add the picture as background image.

it sounds easy, but i really dont know anything about anything, a little css just because i always enter and move things around, but for example, you say, add a suffix for this module class... what is a suffix? Can i create a suffix? How joomla would know where to look for this suffix?

Then, you say, in your css... what css?, there are hundreds in my site!

Please, could you be so kind of explain the steps, like i am DUMB, or STUPID, yes, at that level. That would help me a lot and hopefully, it will teach me to understand a little more about how things work in joomla sites.

Hi,

Then edit the Frontend default CSS file in Config > Display > CSS and add a background image to the cart module class.

To find the class, you can follow this tutorial:
www.hikashop.com/fr/support/documentatio...ize-the-display.html

The class should be "moduletable-hika_carte" if you use the same prefix as in the screenshot.

Thank you! Working on it, thank you for the detail instructions Im on it now!

Hello please i'm facing the same problem... i need to input an image or icon to enable me lunch my site as soon as possible

Please i need the line of code and how to input the code to enable no errors afterwards.... thank you in advance.......