How to add cart image with minicart

  • Posts: 2
  • Thank you received: 1
2 weeks 6 days ago #279660

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




Step 1: In the backend go to Extensions > Modules and search for Cart Display (might be different if you changed the original's name)

Step 2: In the module page make sure you assign it to a position (I chose the [menu]) and in the Hikashop tab select the Minicart [Dropdown cart] option. Depending on what you want to show in the drop down of the minicart select product image, proceed button, product name, delete button, coupon, shipping. Make sure the "Product Quantities" are set to [YES] if you want to show total number of products and not the price and the "Hide if empty" to [Default].

save and close

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=' 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"

Click Save at the top of the popup and then the green Joomla save.


Step 4: Now the most important part. Go to Components > Hikashop > Configuration > Display > Views
- In the fliter select: Product | [Your site's template] | Front End
- In the results look for the "cart.php" and edit it (when you are in the editor page the breadcrumb should be: product / cart.php)
- At the top where $tmpl and $module_id are initialized add the following:
$cartimg = 'http://website.com/path/to/empty-cart/image/empty-cart-image.png';

so it should look like:
$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';

Further down you will encounter the code for when the cart if empty:
if(empty($this->rows)) {

Below it I added the following (though I am fairly certain its not needed):
$cartimg = 'https://menestho.com/images/shopping_bag_empty.png';

and a couple of lines below change the following:
if((empty($desc) && $desc != '0') || $hidecart == 0)
		$desc = ($this->cart_type == 'cart') ? JText::_('CART_EMPTY') : JText::_('WISHLIST_EMPTY');

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

Even further down where it says:
if(!in_array($tmpl, array('component', 'ajax'))) {
?>
<div id="hikashop_cart_<?php echo $module_id; ?>" class="hikashop_cart">

change it to:
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">

We got a couple of more changes still. One is here:
if(!empty($small_cart)) {
	$price_name  = '';

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

Then comes the tricky part cause we need to make a little rearrangement. We go to the part of the code where it has the link that opens the minicart dropdown:
<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>

And we move the image tag outside of the span tag in order to be able to have it independent of the span's css:
<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>

Then its only a matter of css to make it look beautiful.

I hope someone finds this helpful. Let me know if you have any problems or if the code doesnt work for you (it should, though).

Attachments:
The following user(s) said Thank You: Philip

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

  • Posts: 59344
  • Thank you received: 8273
  • MODERATOR
2 weeks 6 days ago #279665

Hi,

Thanks for the message.
One thing though I don't understand is why not use only translation overrides ? You could have added the img tags in each translation override, added a span with a class around the %s and you wouldn't have needed any view override in that case. All that would be left would be some CSS to style the elements.
That would be more resilient for future modifications of HikaShop since it wouldn't require a view override.
But maybe I'm missing something having only a quick look at your code changes.

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

  • Posts: 2
  • Thank you received: 1
5 days 6 hours ago #280729

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.

Last Edit: 5 days 6 hours ago by jgardounis.

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

  • Posts: 59344
  • Thank you received: 8273
  • MODERATOR
4 days 10 hours ago #280787

Hi,

Thank you for your feedback. A default easy way to have an icon cart module could be good in the future yes. We'll look into it.

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

Time to create page: 0.144 seconds
Powered by Kunena Forum