mobile products page

[djhht]

I just enabled the mobile options and have most of it working, however, the Product pages are not appearing full width on the mobile device. The View Cart page is fine and a content page is fine, however the Product pages are half width on the top menu bar.

Can you take a look at our site www.homehealthtesting.com on a mobile device and see if you know why some pages are not full screen, but the Contact and View Cart pages are fine?
thanks

[ShopSite Lauren]

The mobile pages are working correctly. however, the issue that is coming up is that on many of your pages and your product pages you have added tables or images into the text fields that push the content way wider than it should be. Also, some of the product images are pushing the pages too wide. Make sure you are using smaller images for the mobile pages (Preferences > Mobile).

[djhht]

is there any way to suppress the wide images without having to change the underlying content?

[ShopSite Lauren]

Change the dimensions on the images to be something like

style="width: 100%; max-width: 100%;"

that way, the images should shrink to fit within the area provided (this should work for page graphics or graphics in text fields, but for product images youw ill want to select a smaller size image under Preferences > Mobile). For tables, you will need to have those be flexible, or have them not show up in mobile, because there isn't a real easy way to shrink the width of those.

[djhht]

I removed the banner image from my home page at www.homehealthtesting.com, but the page is still not rendering full width on mobile. Is it the Quantity Pricing box making it happen, if so where is that on a page? I see it on the Product and have it on which it needs to be, but it doesn't need to be on the page

[Jim]

Looking at your site on my Android phone, I would suggest that for the mobile product template you put the quantity fields below the image instead of to the right of it. That would make it all fit on my phone (Samsung Galaxy S) You might also set some styles on the font to make it slightly smaller and maybe do that on the Add To Cart button also.

[djhht]

Thats a good idea, but I don't understand where the code is for the products in the list on a page. I can cleary see the code on the Product template and move the elements around, but I don't see how the products are listing on a Page or where that code is, where do I find the code to move the price below the image?

[Jim]

What template do you have set for the "Product Template:" on Preference > Mobile?
That would be the template that you would need to change. I took a look at the default mobile template mb_MobileDefaultProduct.sst and it is pretty complex with lots of IF, Else, Else IF code. So it may not be an easy fix but here is what I would try

find the lines

Code: Select all

[-- ELSE_IF PRODUCT.QuantityPricing --]
  [-- PRODUCT.QuantityPricing --]

and replace them with
[code[-- ELSE_IF PRODUCT.QuantityPricing --]
</td></tr><tr><td[-- PRODUCT.QuantityPricing --]][/code]

That should close any open <tr and <td tags above the quantity pricing table and then open a new table row so the table will start in the first cell of the row. If Quantity pricing isn't enabled then the code won't be executed so the flow should remain as it was before.

I didn't actually try that but give it a try and see if that fixes the problem.

[djhht]

I tried that code and it didn't work exactly because it left the word "code" in the mobile display. However, it did help me learn where the code was and I just removed the Quantity Pricing line and like the results better. I was confused as to why the code that controls the Page display was on the Product Template, but I can see that it is above where the Product Template actually starts. Thanks for your help.

[Jim]

The Page template has a section that calls the product template. It looks like

Code: Select all

 [-- Loop Products --]
 [-- product --]
[-- end_loop products --]

That section calls the product template for each product assigned to the page and outputs the product information using the template that is assigned to the products. So the page template is controlling where the products display but he actual look of the products is defined in the product template.
Sorry about the typo in the last post. I evidently put the content I wanted you to see one character before where it should have been. It should have looked like this.

Code: Select all

[-- ELSE_IF PRODUCT.QuantityPricing --]
</td></tr><tr><td[-- PRODUCT.QuantityPricing --]

In the forum you can add sections of code by clicking the Code button just above the edit box and it puts in the special tags that make the code display differently. I put the text just before the closing ] for the first tag instead of between the two tags.

[djhht]

Thanks for all your help last week in the forums getting my mobile site working!

You mentioned this
"For tables, you will need to have those be flexible, or have them not show up in mobile"

Is there a tag to put around a table that would prevent it from showing up in mobile. Some of our product pages have tables on them and I would like for the table to not show up on mobile, but do show up if viewed on a computer. Is that possible?

[ShopSite Lauren]

I sometimes do that with CSS. Give your table a class, such as <table class="nomobile"> then in your mobile template, in the css, add .nomobile {display: none;}. For your regular pages, this new class won't have any effect, but in mobile, the new class will tell the table to not be displayed.

[Jim]

The mobile pages us a different template than the regular pages, so as long as you don't include the table in the mobile template it won't display.
So if you don't want the quantity pricing table to display on mobile screens you will need to remove the tags that display it.
In my previous post I showed you what to do to put the quantity pricing table on a separate table row. All you should need to do to remove it entirely would be to edit the mobile product template and in this section

Code: Select all

[-- ELSE_IF PRODUCT.QuantityPricing --]
[-- PRODUCT.QuantityPricing --]

and remove the tag

Code: Select all

 [-- PRODUCT.QuantityPricing --]

or if you have added the code as I suggested previouisly you would need to remove the added tags that close the table and open it again

Code: Select all

</td></tr><tr><td[-- PRODUCT.QuantityPricing --]

[djhht]

I sometimes do that with CSS. Give your table a class, such as <table class="nomobile"> then in your mobile template, in the css, add .nomobile {display: none;}. For your regular pages, this new class won't have any effect, but in mobile, the new class will tell the table to not be displayed.

I think this solution will work for me and I understand the code to add to my table, however I have no idea how to do this
"in your mobile template, in the css, add .nomobile {display: none}

I know where my mobile template is, but where do I put this... where is the css?
.nomobile {display: none}

[ShopSite Lauren]

If you are using the ShopSite default mobile templates, you can make a copy of the ShopSite template (Merchandising > Page/Product Templates > Copy ShopSite Template, the mobile template starts with mb_) and name it whatever you want. Then if you view/edit the template, the CSS is directly in the code for the page. You can add the line of CSS, then save changes. Last, go to Preferences > Mobile, and select your modified page template rather than the default page template.