How to add cart image with minicart

Disclaimer: First I would like to say that if the inclusion of parts of code is a problem for the Hikashop creators, I apologize and I will remove it promptly. Just let me know.


Hello everyone,

I would like to help those who might be looking for it and can only find scattered pieces of info around here but not a specific solution to the problem of adding an image to the minicart with a total number of items showing, as in the image

CART_EMPTY="<img src=' http://website.com/path/to/empty-cart/image/empty-cart-image.png '  width="40" height="40" /><br/>%s"
X_ITEM_FOR_X="<br/>%s"
X_ITEMS_FOR_X="<br/>%s"
TOTAL_IN_CART_X="<br/>Total : %s"

$cartimg = 'http://website.com/path/to/empty-cart/image/empty-cart-image.png';

$tmpl = JRequest::getWord('tmpl', '');
$module_id = (int)$this->params->get('id', 0);
$cartimg = 'http://website.com/path/to/empty-cart/image/empty-cart-image.png';

if(empty($this->rows)) {

$cartimg = 'https://menestho.com/images/shopping_bag_empty.png';

if((empty($desc) && $desc != '0') || $hidecart == 0)
		$desc = ($this->cart_type == 'cart') ? JText::_('CART_EMPTY') : JText::_('WISHLIST_EMPTY');

if((empty($desc) && $desc != '0') || $hidecart == 0)
		$desc = ($this->cart_type == 'cart') ? JText::sprintf('X_ITEM_FOR_X', '0') : JText::_('WISHLIST_EMPTY');

if(!in_array($tmpl, array('component', 'ajax'))) {
?>
<div id="hikashop_cart_<?php echo $module_id; ?>" class="hikashop_cart">

if(!in_array($tmpl, array('component', 'ajax'))) {
$cartimg = 'http://website.com/path/to/full-cart/image/full-cart-image.png';
?>
<div id="hikashop_cart_<?php echo $module_id; ?>" class="hikashop_cart">

if(!empty($small_cart)) {
	$price_name  = '';

if(!empty($small_cart)) {
    $cartimg = 'http://website.com/path/to/full-cart/image/full-cart-image.png';
	$price_name  = '';

<a class="hikashop_small_cart_checkout_link" href="<?php echo $link; ?>"<?php echo $extra_data; ?>>
		<span class="hikashop_small_cart_total_title"><?php echo $text; ?> 
                      <img src="cant-remember-what-was-here" >
                </span>
	</a>

<a class="hikashop_small_cart_checkout_link" href="<?php echo $link; ?>"<?php echo $extra_data; ?>>
        <img src="<?php echo $cartimg ?>" width="40" height="40">
		<span class="hikashop_small_cart_total_title"><?php echo $text; ?></span>
	</a>

Thank you for checking it. Originally I went through the override, adding span, as it was proposed in another thread. The problem was that it forced the icon of the cart to the dimensions of the span of the number of cart items (i.e. very small) so I checked it with firefox and tried a number of css stuff (even with !important) to make the cart icon resume its set size, but to no avail.

So as I was playing around with the code in firefox I dragged and dropped the image tag outside of the span and thus the extend of the override. It worked like a charm. It was then that I realized that I the image would need to be completely out of the influence of the span in order to be displaying properly.

In all honestly I hope this feature (or the ability to show the minicart in the same form as my modifications allow) will be one of the options in Hikashop in the future.

Note#1: In the future perhaps through the configuration menu I could have an option to select our cart images and the path to replace the $cartimg.

Note#2: I even managed to make the cart be drag-and-droppable around the page through javascript. Still I doubt it looks as good in desktop site, as it would look in mobiles and I have yet to delve into how to code mobile touchscreen interaction.

Hello nicolas,

I can only confirm that I would also like to see this as native display option.
+ a setting to define the cart/bag image path in the hikashop cart module settings.

It is a must-have.

Hello,
I have use this guides and i make the cart show the image i want when is full

Hi arisdra,
it would seem like the path for the empty cart might not be set. Have you done step 3 in my post?

Step 3: Time to change the texts for the various cart states. Go to Hikashop > Configuration > Languages and edit the each of the languages you use to append the following (IMPORTANT NOTE: do NOT change the .ini files themselves, instead use the override which is in the lower part of the language popup editor):

CART_EMPTY="<img src=' website.com/path/to/empty-cart/image/empty-cart-image.png ' width="40" height="40" /><br/>%s"
X_ITEM_FOR_X="<br/>%s"
X_ITEMS_FOR_X="<br/>%s"
TOTAL_IN_CART_X="<br/>Total : %s"

Hello jgardounis,
i have make all the steps as you say. I have copy and paste the step 3 in the override i have change the image path, i have diferent image for empty and full cart but when is empty i take only zero.

Hello,
Here is the url in order to see what i say before: Looukou

Hello,

That's weird, you shouldn't have that issue if you have properly added this line through your language file :

CART_EMPTY="<img src=' website.com/path/to/empty-cart/image/empty-cart-image.png ' width="40" height="40" /><br/>%s"

Hello,
i have attache the photo. I believe i have put in the right way. I have also try anther compassion and still not working when the cart is empty.