responsive cart (make 1 column instead of 1 row)

  • Posts: 21
  • Thank you received: 0
9 years 7 months ago #198536

-- url of the page with the problem -- : accessory.ch
-- HikaShop version -- : 2.4.0
-- Joomla version -- : 3.3.6
-- PHP version -- : 5.4.36

Hello,

Can you tell me how to make the responsive cart table for small screen applications (such as iphone)?

What I want to do is, when the screen size is small, I want to see the cart table as a single column and multiple rows (instead of single row).

Thanks

Ali

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

  • Posts: 13201
  • Thank you received: 2322
9 years 7 months ago #198544

Hi,

We recently added new css properties to improve the cart in order to be more responsive.
Please check if you have the following properties in your frontend default css file (Configuration > Display > CSS), if not so add it at the end:

#hikashop_checkout_cart table.table-striped tbody tr td.hikashop_cart_shipping_value,
#hikashop_checkout_cart table.table-striped tbody tr td.hikashop_cart_total_value,
#hikashop_checkout_cart table.table-striped tbody tr td.hikashop_cart_subtotal_value,
#hikashop_checkout_cart table.table-striped tbody tr td.hikashop_cart_coupon_value,
#hikashop_checkout_cart table.table-striped tbody tr td.hikashop_cart_tax_value,
#hikashop_checkout_cart table.table-striped tbody tr td.hikashop_cart_payment_value,
#hikashop_checkout_cart table.table-striped tbody tr td.hikashop_cart_additional_value
{
	text-align: right;
}

#hikashop_checkout_cart table.table-striped tbody tr td.hikashop_cart_empty_footer
{
	border-top: 0px solid;
	border-bottom: 0px solid;
}

#hikashop_checkout_cart table.table-striped tbody tr.row0,
#hikashop_checkout_cart table.table-striped tbody tr.row1
{
	border-bottom: 1px solid #DDD;
	margin-top: 0px;
}

@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.table-striped tbody td#hikashop_checkout_cart_total2_title,
	#hikashop_checkout_cart table.table-striped tbody td#hikashop_checkout_cart_shipping_title,
	#hikashop_checkout_cart table.table-striped tbody td#hikashop_checkout_cart_final_total_title,
	#hikashop_checkout_cart table.table-striped tbody td#hikashop_checkout_cart_coupon_title,
	#hikashop_checkout_cart table.table-striped tbody td#hikashop_checkout_cart_tax_title,
	#hikashop_checkout_cart table.table-striped tbody td#hikashop_checkout_cart_payment_title,
	#hikashop_checkout_cart table.table-striped 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 td.hikashop_cart_total_value span.hikashop_checkout_cart_final_total { padding-left: 10px; }

	#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 }

}

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

  • Posts: 21
  • Thank you received: 0
9 years 7 months ago #198678

Thank you:) it is almost perfect.

I need two more questions.

If you look at the image that I sent,

1. How can I remove the titles: "image" and "name"

2. How can I make the total cost bold (118.44 CHF) and shipping cost not bold (4.28 CHF).?

Thanks in advance.

Attachments:

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

  • Posts: 13201
  • Thank you received: 2322
9 years 7 months ago #198682

Hi,

That can be done thanks to some css properties, here is documentation about layout customisation:
www.hikashop.com/support/support/documen...ize-the-display.html :)

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

  • Posts: 21
  • Thank you received: 0
9 years 7 months ago #200015

Hello,

Can I remove the unit price, quantity or total price parts for the iphone (media) screen? (the part in the rectangle in the attachment)

If this is not possible, can I learn how to remove all the fist raw, including Image, name, unit price, quantity and total price for the iphone screen?

thank you in advance.

Attachments:

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

  • Posts: 82910
  • Thank you received: 13379
  • MODERATOR
9 years 7 months ago #200023

Hi,

You can add such css for that:

@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
#hikashop_checkout_cart table.table-striped tfoot{ display:none; }
}

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

  • Posts: 21
  • Thank you received: 0
9 years 7 months ago #200089

Hi Nicolas, Thank you for the reply but it really did not make any change. Do you have any other idea?

Best

Ali

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

  • Posts: 21
  • Thank you received: 0
9 years 7 months ago #200090

I tried the followings instead but it did not work either:

@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
#hikashop_checkout_cart table.table-striped tbody tr.row0{ display:none; }
}

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

  • Posts: 82910
  • Thank you received: 13379
  • MODERATOR
9 years 7 months ago #200225

Hi,

I checked your website but I don't see either CSS added there: take.ms/JA5Fx

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

  • Posts: 21
  • Thank you received: 0
9 years 7 months ago #200386

Dear Nicolas,

I have been working on the cart-status page and I think I came to a point that I am satisfied more or less.

There is only one last request regarding to this page.

I just want to change the order a little bit.

For media (I phone), I would like to see the total price at the very end of the page. The details of the product should come before. How can I do that?

I tried to explain in on the attached image.

Thanks in advance.

Attachments:

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

  • Posts: 82910
  • Thank you received: 13379
  • MODERATOR
9 years 7 months ago #200388

Hi,

That should normally already be the case.
This means that you have the file templates/YOUR_TEMPLATE/html/com_hikashop/checkout/cart.php on your website. Rename it to deactivate the override on that view and you should not have that problem anymore.

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

  • Posts: 846
  • Thank you received: 92
9 years 6 months ago #200444

@nicolas
I already post some information about css generate by hikashop . But does hikashop has documentation of all the css layout ( in general % px em ) use in hks and focus on php code that generate css code ( inline or not ) to the frontend ?
Does hikashop can manage many CSS framework ( boostrap , T3 ) ...i mean use switch for insert css selector specific to some CSS framework ?

here the documentation of
artister about their layout
seblod about their layout



regard's

Attachments:
Last edit: 9 years 6 months ago by lionel75.

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

  • Posts: 82910
  • Thank you received: 13379
  • MODERATOR
9 years 6 months ago #200472

Hi,

All the documentation we have regarding the customization of the display (with views and CSS) is on this page:
www.hikashop.com/support/documentation/1...ize-the-display.html
Next version of HikaShop (or maybe the one after), will have the possibility to switch between bootstrap 2, bootstrap 3 and Hikashop's own CSS classes for responsiveness. That way, you'll be able to have responsive HikaShop content even when the template doesn't use bootstrap.

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

  • Posts: 21
  • Thank you received: 0
9 years 6 months ago #200509

Thank you Nicolas,

Now it works:) :)

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

Time to create page: 0.110 seconds
Powered by Kunena Forum