Post by masterross » Fri May 17, 2019 5:35 am

Hi guys,

I'm running OC 2.3 with the default theme.
On mobile when I click on the cart, I see the table with products added is not responsive.
How to make it responsive?

Thanks in advance!

Pottery Glaze shop


New member

Posts

Joined
Mon Jan 02, 2017 7:07 pm

Post by IP_CAM » Sat May 18, 2019 10:45 am

Well, it's not so easy, especially, if Images are also part of this.
One could move the Model below the Item Title on the Cart, and
so remove a Column in the Theme '/checkout/cart.tpl ' File,
like it's beeing done here:
http://www.velomech.ch/shop/
and/or 'shorten' Product Titlenames, by limiting their Character amount
to some extend, with a limiter like this, in the corresponding
'controller/checkout/cart.php ' File:

Code: Select all

'name'        => utf8_substr(strip_tags(html_entity_decode($product['name'], ENT_QUOTES, 'UTF-8')), 0, 20) . '..',
but that's all, what can be done about, without rewriting the Theme 'Cart'
File Code, to make such look swell, regardless of Display Resolution.

Due to no pre-set SECTION Width Values, such a NAME will not break into more
than one Line, which would make it look better. The Column+Field in charge
could possibly be MAX-WIDTH Value -fixed by CSS Class Code, but I never
tried, it just came into my mind ...
Just to give you some ideas on this!
Good Luck! ;)
Ernie
PS. It's not Version related, all v.2 ++ Default Themes act the same.
And $product['name'] might also be called $result['name']
depending on the OC Version used, just to have this mentioned too.
---
And don't forget, to Change COLSPAN-Values further down in the Theme File, if
you remove a Section out of the Table, to make everything, like Cost-Estimations
and the Bottom TOTALS-Sections align correctly again ! ;)
Image

Please don't send me OC Forum Personal Messages, just contact: jti@jacob.ch
---
OC 1.5.6.5 LIGHT Test Site: http://www.bigmax.ch/shop/
OC 1.5.6.5 V-PRO Test Site: http://www.openshop.li/shop/
My Github OC Site: https://github.com/IP-CAM
2'600+ FREE OC Extensions on the World's largest Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by masterross » Wed May 22, 2019 8:18 am

Thanks mate,
Actually, I found a way to make it more view-friendly only with CSS.
cart.PNG

cart.PNG (120.26 KiB) Viewed 831 times

Maybe I could short the names but it's not necessary

Pottery Glaze shop


New member

Posts

Joined
Mon Jan 02, 2017 7:07 pm

Post by IP_CAM » Wed May 22, 2019 8:38 am

Well, I found out, that I also had it solved in a decent way,
after playing around again with one of my test sites ... :D
But it's not an OC default type Layout either, and can't just
be copied into a 'regularly styled' OC v.2 + Theme Install :'(
I also placed the 'Model' Info into the Title Section, and it
seems to 'linebreak' the title content, as seen on the image.
And the Unit Price is made HIDDEN in small resolutions.
Good Luck! ;)
http://www.bigmax.ch/shop/index.php
Ernie
Image

Please don't send me OC Forum Personal Messages, just contact: jti@jacob.ch
---
OC 1.5.6.5 LIGHT Test Site: http://www.bigmax.ch/shop/
OC 1.5.6.5 V-PRO Test Site: http://www.openshop.li/shop/
My Github OC Site: https://github.com/IP-CAM
2'600+ FREE OC Extensions on the World's largest Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by ianhaney » Sat May 30, 2020 9:16 pm

@masterross

How did you make your shopping cart table responsive as looking to do the same

Active Member

Posts

Joined
Sun Jun 24, 2012 2:30 am

Post by ianhaney » Sat May 30, 2020 9:17 pm

masterross wrote:
Wed May 22, 2019 8:18 am
Thanks mate,
Actually, I found a way to make it more view-friendly only with CSS.
cart.PNG

Maybe I could short the names but it's not necessary
How did you make yours responsive as looking to do the same

Active Member

Posts

Joined
Sun Jun 24, 2012 2:30 am

Post by ianhaney » Sat May 30, 2020 10:30 pm

Sorry sorted it now, I used the coding from here in the end http://jsfiddle.net/9k6xL0dt/

Active Member

Posts

Joined
Sun Jun 24, 2012 2:30 am

Post by masterross » Sat May 30, 2020 10:48 pm

Glad you sorted.
You can check my CSS file for more info.

Pottery Glaze shop


New member

Posts

Joined
Mon Jan 02, 2017 7:07 pm

Post by ianhaney » Sun May 31, 2020 4:14 am

masterross wrote:
Sat May 30, 2020 10:48 pm
Glad you sorted.
You can check my CSS file for more info.
Thank you appreciate it and sharing your CSS file

Active Member

Posts

Joined
Sun Jun 24, 2012 2:30 am
Who is online

Users browsing this forum: No registered users and 20 guests