REsponsive checkout

  • Posts: 188
  • Thank you received: 7
  • Hikashop Business
4 years 11 months ago #306644

-- HikaShop version -- : 4.1.0
-- Joomla version -- : 3.9.6
-- PHP version -- : 7.1

Hello i have a problem with responsive checkout .... (see url in private)
i actived bootstrap design but no solved ...
any idea ?
regards

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

  • Posts: 81539
  • Thank you received: 13069
  • MODERATOR
4 years 11 months ago #306657

Hi,

It would be great if you could say what problem you have ?
You have several steps on your checkout so maybe we're not looking at the same page...
On the first page of your checkout, the only issue I see is that the cart view product table does switch to the responsive mode. And that's because the "frontend CSS" of your HikaShop configuration has been customized based on the 2.6.3 which doesn't include all the new CSS of HikaShop 3, including the responsive CSS for the cart view.

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

  • Posts: 188
  • Thank you received: 7
  • Hikashop Business
4 years 11 months ago #306660

hello i mean with the products list with quantity and total
=> how i can implement cart css easly ?

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

  • Posts: 81539
  • Thank you received: 13069
  • MODERATOR
4 years 11 months ago #306661

Hi,

You could try adding that CSS:

@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 {
		min-height: 25px;
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 30% !important;
	}
	.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 span.hikashop_checkout_cart_subtotal,
	.hikashop_checkout_cart span.hikashop_checkout_cart_shipping,
	.hikashop_checkout_cart span.hikashop_checkout_cart_final_total,
	.hikashop_checkout_cart span.hikashop_checkout_cart_coupon,
	.hikashop_checkout_cart span.hikashop_checkout_cart_additional,
	.hikashop_checkout_cart span.hikashop_checkout_cart_taxes,
	.hikashop_checkout_cart span.hikashop_checkout_cart_payment,
	.hikashop_checkout_cart span.hikashop_checkout_cart_final_total {
		padding-left: 20px;
	}

	.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 }
}
However, this might not work totally correctly, especially if you have a view override of the show_block_cart view file.

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

  • Posts: 188
  • Thank you received: 7
  • Hikashop Business
4 years 11 months ago #306714

Merci !

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

Time to create page: 0.065 seconds
Powered by Kunena Forum