How to modify cart view in the "user control panel" on small screens?

  • Posts: 14
  • Thank you received: 0
7 years 7 months ago #266704

-- HikaShop version -- : HikaShop Essential 2.6.4
-- Joomla version -- : 3.6.5
-- PHP version -- : 7.0
-- Browser(s) name and version -- : Firefox 52.0

Hello,

How can I manage it to get a mobile device friendly view of the cart when user click on "User Account" -> "View Cart"? I have attached two screenshots, one is the cart view when user clicks on the cart module (which is perfect) and the other one is the cart view when user clicks on the menu (User Account > Cart which is not perfect as shown in a row). It shows one row instead of a column. Any help would be appreciated much.

Is it possible to switch "Status" (inside cart view) off in Hikashops configuration or should I use CSS to set it to display:none?

Best wishes
Chris

Attachments:
Last edit: 7 years 7 months ago by jesterwild.

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

  • Posts: 14
  • Thank you received: 0
7 years 7 months ago #266797

I've updated to HikaShop Essential 3.0.1. today.

Any help would be appreciated!

Best wishes
Chris

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

  • Posts: 82868
  • Thank you received: 13377
  • MODERATOR
7 years 7 months ago #266708

Hi,

1. That would require custom CSS to be added to handle that, similarily to the responsive CSS used on the cart view of the checkout.
For example, here is the CSS we added to HikaShop to have the cart view responsive on the checkout:

@media only screen and (max-width:350px) {
	.hikashop_product_price_full {
		padding-top: 10px !important;
		height: 50px !important;
	}
}
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
	#hikashop_checkout_cart table,
	#hikashop_checkout_cart table thead,
	#hikashop_checkout_cart table tbody,
	#hikashop_checkout_cart table thead th,
	#hikashop_checkout_cart table tbody td,
	#hikashop_checkout_cart table thead tr,
	#hikashop_checkout_cart table tbody tr {
		display: block;
	}
	#hikashop_checkout_cart table tfoot tr,
	#hikashop_checkout_cart table tfoot td,
	#hikashop_checkout_cart table tfoot {
		display: block;
	}
	#hikashop_checkout_cart table tbody td#hikashop_checkout_cart_total2_title,
	#hikashop_checkout_cart table tbody td#hikashop_checkout_cart_shipping_title,
	#hikashop_checkout_cart table tbody td#hikashop_checkout_cart_final_total_title,
	#hikashop_checkout_cart table tbody td#hikashop_checkout_cart_coupon_title,
	#hikashop_checkout_cart table tbody td#hikashop_checkout_cart_tax_title,
	#hikashop_checkout_cart table tbody td#hikashop_checkout_cart_payment_title,
	#hikashop_checkout_cart table tbody td.hikashop_cart_additional_title {
		display: none !important;
	}
	#hikashop_checkout_cart_final_total_title { display:none; }
	#hikashop_checkout_cart table thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	#hikashop_checkout_cart table tr { border: 1px solid #ccc; }
	#hikashop_checkout_cart table tr.margin { border: 0px solid #ccc; }
	#hikashop_checkout_cart table td {
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 30%;
	}
	#hikashop_checkout_cart td.hikashop_cart_product_name_value {width: 64%}
	#hikashop_checkout_cart table td:before {
		position: absolute;
		left: 6px;
		padding-right: 10px;
	}
	#hikashop_checkout_cart table td.hikashop_cart_product_quantity_value:before { padding-top:3px }
	#hikashop_checkout_cart table td:before { content: attr(data-title); font-weight: bold; }
	#hikashop_checkout_cart .hikashop_product_price_full {
		text-align: left;
		min-height: 20px;
		padding-left: 20px;
		padding-top: 3px;
		display: inline !important;
	}
	#hikashop_checkout_cart .hikashop_product_quantity_field { margin: 0px 16px 0px 20px !important; }
	#hikashop_checkout_cart a span.hikashop_product_variant_subname img { margin-left: 10px; display: block; margin-top: 5px; }
	#hikashop_checkout_cart td.hikashop_cart_product_price_value span.visible-phone { margin-left: 5px; display:inline !important}
	#hikashop_checkout_cart tbody tr td.hikashop_cart_empty_footer { display: none !important }
}

2. I don't understand what you want to switch off. What status are you talking about ?

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

  • Posts: 14
  • Thank you received: 0
7 years 7 months ago #266855

Hello Nicolas,

Thanks for your reply. I will try this CSS later today.

Regarding 2. please forget about my question. "Status" looks very good now after the update to 3.0.1. But there seems a tiny issue with the "BACK"-Button in the cart view of the user control panel. Please see attached two screenshots. 1: Cart view after clicked on "Carts" in the user control panel. 2: When I click the "BACK"-Button I don't reach the user control panel but I reach another cart view. I would like to get back to the user control panel after clicked "BACK". How can I mange it?

Chris

Attachments:

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

  • Posts: 82868
  • Thank you received: 13377
  • MODERATOR
7 years 7 months ago #266858

Hi,

Change the code:

?>
			<td>
				<a href="<?php echo hikashop_completeLink('cart&task=listing&cart_type=' . $this->cart->cart_type); ?>">
to:
$link = hikashop_completeLink('user&task=cpanel');
	if($this->config->get('enable_multicart')) {
		$link = hikashop_completeLink('cart&task=listing&cart_type=' . $this->cart->cart_type);
	}
?>
			<td>
				<a href="<?php echo $link; ?>">
in the file "show" of the view "cart" for your frontend template via the menu Display>Views and that will fix that.
We'll add that patch too on our end for the next version.

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

  • Posts: 14
  • Thank you received: 0
7 years 7 months ago #266984

Hello Nicolas,

I've change the code as mentioned above and the BACK-Button works now. Thanks for it, Nicolas. Unfortunately the cart view, after clicked on "carts" in the user control panel, does not show the correct cart (see attached). So what to change to get the right cart back? Or did I do sth wrong?

Best wishes
Chris

Attachments:

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

  • Posts: 82868
  • Thank you received: 13377
  • MODERATOR
7 years 7 months ago #266996

Hi,

I'm not able to reproduce the problem on my end.
Please provide more details on what you click on on which page with screenshots.
Also, please provide a screenshot of the settings under the "features" tab of the HikaShop configuration.

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

  • Posts: 14
  • Thank you received: 0
7 years 7 months ago #267101

Hey Nicolas,

"screenshot of the settings under the "features"" has been the key words -> "Enable multi carts" was set to yes.

Thanks for you help
Chris

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

  • Posts: 14
  • Thank you received: 0
7 years 7 months ago #267102

Me again. The only issue I can see now is that hikashop_header_title shows "Cart" instead of "Warenkorb" (german for cart). Where can I set it?

Chris

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

  • Posts: 82868
  • Thank you received: 13377
  • MODERATOR
7 years 7 months ago #267126

Hi,

This means that the translation is missing for the German language file.
You can add it in the German language file under the Languages tab of the HikaShop configuration.
You can read more about that here:
www.hikashop.com/download/languages.html#translate

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

Time to create page: 0.070 seconds
Powered by Kunena Forum