AbanteCart Community

Shopping Cart Operations => Support => General Support => Topic started by: AVS on November 03, 2017, 05:22:32 AM

Title: Quantity Column Missing in mobile view _BUG REPORT
Post by: AVS on November 03, 2017, 05:22:32 AM
Hi,
Please see that after adding to cart the page goes to www.example.com/store/index.php?rt=checkout/cart.
In this page, it is showing Product name, Unit price, Total and Remove columns. Quantity column is missing in mobile phone. Customers will not be able to change quantity and update it in view cart page. To cross check if my files on my server are corrupted, I logged into your AC DEMO version after activating personal demo account. Your website also not showing quantity column in mobile.  It shows properly in Computer desktop.  Please check. I request you to kindly resolve it soon, and let customers don't ace any issues. Thanks.

 :)
Title: Re: Quantity Column Missing in mobile view _BUG REPORT
Post by: Basara on November 03, 2017, 05:44:38 AM
Hi.

If mobile screen too small some columns are hidden
Title: Re: Quantity Column Missing in mobile view _BUG REPORT
Post by: AVS on November 03, 2017, 06:00:49 AM
Hi.

If mobile screen too small some columns are hidden

Yeah. But it is not small mobile and other carts display well. I think it is a Bug  to be fixed...
Please do resolve
Thanks  :)
Title: Re: Quantity Column Missing in mobile view _BUG REPORT
Post by: Basara on November 03, 2017, 06:19:19 AM
Hi.
What is your device screen resolution?
Title: Re: Quantity Column Missing in mobile view _BUG REPORT
Post by: AVS on November 03, 2017, 07:38:27 AM
Hi.
What is your device screen resolution?
Hi
I have tested in my two mobiles. One is Samsung Galaxy J7 Nxt that has 5.5 inch screen with 720x1280 pixels resolution. Another mobile is Moto G4 Play which is 5 inch screen with 720 x 1280 pixels resolution.  In both these mobiles, the Quantity column not displaying. I went to other websites shopping cart for testing, all show quantity box with ability to update it. In AC it is not showing. Please check and arrange to fix it at the earliest. Thanks.  :)
Title: Re: Quantity Column Missing in mobile view _BUG REPORT
Post by: Geoffrey on November 03, 2017, 04:01:51 PM
I fixed this with css. 

style.css:

For the .quantitybox variable around line 1590, add:
Code: [Select]
min-width: 250px;
In the bootstrap overwrite section around line 2600, I added new variables:
Code: [Select]
form#product {
margin: 10px 10px 10px 0px;
}

#product_quantity.form-control, .alert {
width: 55px;
}

For the .mt20 variable about line 110, I changed the value from 20px to 0px. 
This last bit is more of a spacing preference than a requirement for keeping the quantity box in view on mobile screens. 

I'm pretty sure that's all I did. 

Try it and see if it works. 
If it doesn't, then maybe there is one more change I overlooked for this post, but it should be easy to figure out with CSS Inpsector.

Let me know if it works for you. 
Title: Re: Quantity Column Missing in mobile view _BUG REPORT
Post by: AVS on November 04, 2017, 12:13:59 AM
I fixed this with css. 

style.css:

For the .quantitybox variable around line 1590, add:
Code: [Select]
min-width: 250px;
In the bootstrap overwrite section around line 2600, I added new variables:
Code: [Select]
form#product {
margin: 10px 10px 10px 0px;
}

#product_quantity.form-control, .alert {
width: 55px;
}

For the .mt20 variable about line 110, I changed the value from 20px to 0px. 
This last bit is more of a spacing preference than a requirement for keeping the quantity box in view on mobile screens. 

I'm pretty sure that's all I did. 

Try it and see if it works. 
If it doesn't, then maybe there is one more change I overlooked for this post, but it should be easy to figure out with CSS Inpsector.

Let me know if it works for you.
Hi
I did all steps you mention in Style.css and added the codes including making .mt20 to 0 px.
But in bootstrap.css, I am not sure of which lines exactly must be over writtren around line 2600. So I added the additional variable you mentioned  form#product and #product_quantity.form-control, .alert at the last line of the bootstrap css file. Just checked it and still quantibox not visible in mobile. Please tell me which line in bootstrap to be over written by this code:
Code: [Select]
form#product {
margin: 10px 10px 10px 0px;
}

#product_quantity.form-control, .alert {
width: 55px;
}
Thank you very much for your reply for fixing this. Expecting your reply again with this updated query. Thanks :)
Title: Re: Quantity Column Missing in mobile view _BUG REPORT
Post by: Geoffrey on November 04, 2017, 11:49:05 AM
Hi, all of the changes I described above should be made to the style.css file.  Do not make any changes to the bootstrap.css file. 

I should have made my language more clear:  "around line 2600" is the "bootstrap overwrites" section of style.css.

After you save all these changes to style.css, clear your browser cache and see if it works. 





Title: Re: Quantity Column Missing in mobile view _BUG REPORT
Post by: AVS on November 04, 2017, 12:47:29 PM
Hi, all of the changes I described above should be made to the style.css file.  Do not make any changes to the bootstrap.css file. 

I should have made my language more clear:  "around line 2600" is the "bootstrap overwrites" section of style.css.

After you save all these changes to style.css, clear your browser cache and see if it works.
Hi
Thank you for clarifying the bootstrap over writes. I added everything in style.css and undone changes made to bootstrap.css. But still not working. I have attached the screenshot, Please see.
Title: Re: Quantity Column Missing in mobile view _BUG REPORT
Post by: Geoffrey on November 06, 2017, 12:46:46 PM
Sorry!  My mistake.  I thought you were asking about quantity display on Product pages. 

I discovered that quantity display broke at certain resolutions on my Product page.
Everything I mentioned above was how I fixed that problem on Product pages. 

I understand now that you are talking about the Cart page. 

On your phone, go to my site and add something to the cart and look at my cart page.  www.inspired-designco.com.

Basara's 1st answer was the correct answer: you can only fit so much stuff on a small screen. 

But I agreed with your idea that Quantity was important to display in the table. 
To me, Quantity was more important to display than Total, because the Total value is available elsewhere on the same page.

My solution:
1 - Recognize that small screens only allow small amount of data displayed.
2 - Do not try to crowd more data into the table.
3 - Instead, change which data is displayed in the table. 

Look at about line 4325 in the AC stylesheet.  You will see this:
Code: [Select]
.cart-info.product-list table tr td:nth-child(1), .cart-info.product-list table tr th:nth-child(1),
.cart-info.product-list table tr td:nth-child(3), .cart-info.product-list table tr th:nth-child(3),
.cart-info.product-list table tr td:nth-child(5), .cart-info.product-list table tr th:nth-child(5),
.invoice_products.table tr td:nth-child(2), .invoice_products.table tr th:nth-child(2),
.invoice_products.table tr td:nth-child(3), .invoice_products.table tr th:nth-child(3) {
display: none !important;
visibility: hidden !important;
}

These rules are hiding certain values on small screens.  The values to be hidden are defined by
Code: [Select]
nth-child(x).

If you change both (1) values to (2), and change both (5) values to (6), this will change which values are selected to be hidden on small screens, and your cart table will look like my cart table instead of the default AC cart table. 

Hope this helps.
Title: Re: Quantity Column Missing in mobile view _BUG REPORT
Post by: AVS on November 07, 2017, 04:43:27 AM
Basara's 1st answer was the correct answer: you can only fit so much stuff on a small screen. 

But I agreed with your idea that Quantity was important to display in the table. 
To me, Quantity was more important to display than Total, because the Total value is available elsewhere on the same page

Look at about line 4325 in the AC stylesheet.  You will see this:
Code: [Select]
.cart-info.product-list table tr td:nth-child(1), .cart-info.product-list table tr th:nth-child(1),
.cart-info.product-list table tr td:nth-child(3), .cart-info.product-list table tr th:nth-child(3),
.cart-info.product-list table tr td:nth-child(5), .cart-info.product-list table tr th:nth-child(5),
.invoice_products.table tr td:nth-child(2), .invoice_products.table tr th:nth-child(2),
.invoice_products.table tr td:nth-child(3), .invoice_products.table tr th:nth-child(3) {
display: none !important;
visibility: hidden !important;
}

These rules are hiding certain values on small screens.  The values to be hidden are defined by
Code: [Select]
nth-child(x).

If you change both (1) values to (2), and change both (5) values to (6), this will change which values are selected to be hidden on small screens, and your cart table will look like my cart table instead of the default AC cart table. 

Hope this helps.

Hi
You have solved the issue. Thanks a lot. It worked for me perfectly fine. Now Quantity box value displays in small screen.
Only thing is that I had to change in another place also around line 3812 and add one more line with particular value. Because in that line also nth child(x) display none code is there. Initially it did not work. After I changed values in this place also, it worked. You showed me the correct way of doing it. Thanks again for great help.  :)
Title: Re: Quantity Column Missing in mobile view _BUG REPORT
Post by: Geoffrey on November 07, 2017, 03:22:33 PM
Glad it helped. 

Good job spotting the other rule that needed to be changed. 
On the unmodified AC stylesheet as of today, that's line 3788. 

I had made the same change in my own stylesheet, forgot to mention it.  Glad you caught it.