How to add cart image with minicart

  • Posts: 8
  • Thank you received: 4
6 years 5 months 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: pprle, Wella, Philip

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

  • Posts: 81361
  • Thank you received: 13035
  • MODERATOR
6 years 5 months 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: 8
  • Thank you received: 4
6 years 5 months 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: 6 years 5 months ago by jgardounis.

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

  • Posts: 81361
  • Thank you received: 13035
  • MODERATOR
6 years 5 months 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.

  • Posts: 158
  • Thank you received: 8
6 years 2 months ago #285437

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.

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

  • Posts: 15
  • Thank you received: 0
5 years 10 months ago #292182

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

. But when is empty i get only zero . Show i wonder why it is not working when the cart is empty. Also i want same guides in order to change the counter position and style.

Attachments:

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

  • Posts: 8
  • Thank you received: 4
5 years 10 months ago #292196

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"

The following user(s) said Thank You: Philip

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

  • Posts: 15
  • Thank you received: 0
5 years 10 months ago #292199

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.

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

  • Posts: 4486
  • Thank you received: 609
  • MODERATOR
5 years 10 months ago #292364

Hello,

Can you provide an Url link in order to see by ourself your result, so far it's hard to see what can be the root issue.
Awaiting news from you.

Regards

Last edit: 5 years 10 months ago by Philip.

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

  • Posts: 15
  • Thank you received: 0
5 years 10 months ago #292383

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

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

  • Posts: 12953
  • Thank you received: 1778
5 years 10 months ago #292393

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"


Can you show us a screenshot of where you have added that line ?

Thank you.

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

  • Posts: 15
  • Thank you received: 0
5 years 10 months ago #292429

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.

Attachments:

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

  • Posts: 25994
  • Thank you received: 4004
  • MODERATOR
5 years 10 months ago #292436

Hello,

1 - You have spaces in the "src".
2 - You are using double quotes for the "height" and "width" when you MUST use single quotes to not break the language override.

CF : www.hikashop.com/download/languages.html#modify

The translations are enclosed in double quotes. You should keep them while translating and not add double quotes in the string when modifying a translation as that would break the file.


Regards,


Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

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

Time to create page: 0.135 seconds
Powered by Kunena Forum