responsive cart (make 1 column instead of 1 row)

mullu
Topic Author
Offline

11 years 5 months ago #198536 by mullu

responsive cart (make 1 column instead of 1 row) was created by mullu

-- 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.

Xavier
Offline

11 years 5 months ago #198544 by Xavier

Replied by Xavier on topic responsive cart (make 1 column instead of 1 row)

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:

Code:

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

mullu
Topic Author
Offline

11 years 5 months ago #198678 by mullu

Replied by mullu on topic responsive cart (make 1 column instead of 1 row)

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.

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

Xavier
Offline

11 years 5 months ago #198682 by Xavier

Replied by Xavier on topic responsive cart (make 1 column instead of 1 row)

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.

mullu
Topic Author
Offline

11 years 5 months ago #200015 by mullu

Replied by mullu on topic responsive cart (make 1 column instead of 1 row)

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.

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

nicolas
Offline

11 years 5 months ago #200023 by nicolas

Replied by nicolas on topic responsive cart (make 1 column instead of 1 row)

Hi,

You can add such css for that:

Code:

@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.

mullu
Topic Author
Offline

11 years 5 months ago #200089 by mullu

Replied by mullu on topic responsive cart (make 1 column instead of 1 row)

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.

mullu
Topic Author
Offline

11 years 5 months ago #200090 by mullu

Replied by mullu on topic responsive cart (make 1 column instead of 1 row)

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.

nicolas
Offline

11 years 5 months ago #200225 by nicolas

Replied by nicolas on topic responsive cart (make 1 column instead of 1 row)

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.

mullu
Topic Author
Offline

11 years 5 months ago #200386 by mullu

Replied by mullu on topic responsive cart (make 1 column instead of 1 row)

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.

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

nicolas
Offline

11 years 5 months ago #200388 by nicolas

Replied by nicolas on topic responsive cart (make 1 column instead of 1 row)

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.

lionel75
Offline

11 years 5 months ago - 11 years 5 months ago #200444 by lionel75

Replied by lionel75 on topic responsive cart (make 1 column instead of 1 row)

@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

Attachment not found

regard's

Last edit: 11 years 5 months ago by lionel75.

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

nicolas
Offline

11 years 5 months ago #200472 by nicolas

Replied by nicolas on topic responsive cart (make 1 column instead of 1 row)

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.

mullu
Topic Author
Offline

11 years 5 months ago #200509 by mullu

Replied by mullu on topic responsive cart (make 1 column instead of 1 row)

Thank you Nicolas,

Now it works:)

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

Time to create page: 0.292 seconds