VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: maille on December 24, 2017, 21:49:12 PM

Title: cart page not fully respoaive
Post by: maille on December 24, 2017, 21:49:12 PM
Cart page only responsive to tablet size. Will reduce to smart phone size on all pages except cart. Price columns and check out button off screen. No horizontal scroll bar so cannot get to price and checkout button.
Can use html and css. Havent a clue on php
Tried on window 7, windows 10 internet explorer 11 and mazilla firefox 57.0.2 - and before someone tells me I do us mozilla web development tools.
Running on localhost via wampserver joomla 3.8.2, Virtuemart 3.2.6, php 7.1.9, mariaDB 10.2.8
Title: Re: cart page not fully respoaive
Post by: AH on December 25, 2017, 14:25:49 PM
create overrides for the cart display items

One way is to add a class selector to the headers and the table elements,  that can then be hidden for responsive sizes.

eg

<th class="mobile-hide"> stuff </th>


<td class="mobile-hide"> stuff </td>



In your responsive css

.mobile-hide {
display:none;
}
Title: Re: cart page not fully respoaive
Post by: maille on December 26, 2017, 13:46:57 PM
Many thanks for the prompt reply. Will give it a go.
Title: Re: cart page not fully respoaive
Post by: AzMandius on March 16, 2018, 16:31:48 PM
Does this solution simply hide non responsive part of the table on smartphones?

What about a solution that would properly adapt the entire table vertically, as far as i heard, there are adaptive table css techniques.

Thanks.
Title: Re: cart page not fully respoaive
Post by: Studio 42 on March 16, 2018, 17:20:32 PM
You have to use DIV to have better render on mobile.
Eg with bootstrap 2.3(protostar)
<div class="row">
<div class="span4">My Name<br>My SKU</div>
<div class="span2">My Price </div>
<div class="span2">My Quantity</div>
<div class="span2">My Discount</div>
<div class="span2">My Total</div>
</div>
Eg with bootstrap 3(helix framework)
<div class="row">
<div class="col-sm-4 col-xs-12">My Name<br>My SKU</div>
<div class="col-sm-2 col-xs-6">My Price </div>
<div class="col-sm-2 col-xs-6">My Quantity</div>
<div class="col-sm-2 col-xs-6">My Discount</div>
<div class="col-sm-2 col-xs-6">My Total</div>
</div>
And you have to hide header on mobile
Title: Re: cart page not fully respoaive
Post by: AzMandius on March 16, 2018, 20:20:54 PM
Possible to have a bit more info on in what file, and where in it to apply this code?

Thanks.
Title: Re: cart page not fully respoaive
Post by: Studio 42 on March 16, 2018, 22:55:56 PM
It's to many work to check all changes.
But original product list is in file iYOURJOOMLA/components/com_virtuemart/views/cart/tmpl/default_pricelist.php
TO copy in YOURJOOMLA/templates/YOURTEMPLATE/html/com_virtuemart/cart/default_pricelist.php so you can continue to update Virtuemart