Community-Theme-Modded

[funnycamel]

I've been using this because it seems like the quickest way to getting ThirtyBees working in a mobile friendly way. It's really great work and has saved me an enormous amount of time. My focus has been on the checkout, because this is where small issues can scare customers away.

Here I would like to share some small but important issues I had that are related to checkout and the ways I resolved them. I am not sure if these issues are caused due to my inexperience and whether or not my fixes are correct, as I'm new to ThirtyBees. It's for reference only.

1. In the checkout, if the customer forgets to tick the Terms and Conditions box, the error notice displayed in the fancybox doesn't fit on the screen on certain mobile displays (e.g. iPhone X). To fix it, I changed the white-space from nowrap to normal by adding this CSS:

.fancybox-error {
    white-space: normal;
}

2. When the user clicks "Read the terms of service" (once again this is using iPhone X), not all of the text can be seen (some words are cut off at the right of the box). To fix it, I changed min-width from 360px to 280px as follows:

#cms.cms.cms-3.cms-terms-and-conditions-of-use.show-left-column.hide-right-column.content_only.touch {
    min-width: 280px;
}

3. When you use the native PayPal module and have Website Payment Standard enabled, the positioning of the text "Pay with your card or your PayPal account" looks a bit horrible on mobile, as it's on the right of the Paypal graphics and doesn't fit very well. To fix this, I did an override of the PayPal module's template file express_checkout_payment.tpl and added a line break just before the line of code {l s='Pay with your card or your PayPal account' mod='paypal'}. In this way, the text displays nicely under the Paypal graphics.

There was one other small thing not related to checkout. The Store Information was duplicated in the footer. This is fixed disabling the custom HTML block" Store Information" in the footer (BO -> HTML Block -> Customs Blocks).

[toplakd]

Mentioned things were not yet touched, but will be soon.

Store information is normally in the footer, and the one on slideout menu is there for showcase and one can alter that menu template to own liking and needs, as , header menu is currently only visible on devices with screen width of max 767px

 

Edited May 20, 2020 by toplakd

[toplakd]

3 hours ago, funnycamel said:

2. When the user clicks "Read the terms of service" (once again this is using iPhone X), not all of the text can be seen (some words are cut off at the right of the box). To fix it, I changed min-width from 360px to 280px as follows:

Changes are made in new global.css file, lines 31-32 fix that issue, and nowrap is added by the end of the file

https://github.com/toplakd/thirtybees-modifications/blob/master/community-theme-modded/themes/community-theme-modded/css/global.css

 

Edited May 20, 2020 by toplakd

[toplakd]

Testing use stock thumbnail slider for showing pictures on product page, without additional thumbnails at the bottom, with swipe on mobile.

[Rhapsody]

@toplakd - I am having an issue that I believe is cache driven.  The search on mobile doesn't always display the block category.  It seems to work when logged in, but only displays the categories on the sliding window when not logged in if I open a product.  Do you have suggestions on how I might troubleshoot this further? I am using full page cache with APCu cache. 

[toplakd]

Yes, disable all the cache wherever possible and you will live happily ever after 😎

[Rhapsody]

7 hours ago, toplakd said:

Yes, disable all the cache wherever possible and you will live happily ever after 😎

🥴I would love to do that but because I have two products with 7 dropdown selections (6 with 4 options, 1 with 2 options) that take forever to load unless I use full page cache. If there were a way around that I would.  Here is the example product link.

Ok - only product is set to cache so now fixed 😀

Edited May 21, 2020 by Rhapsody
only product page cached

[toplakd]

Sorry, I don't know how full page cache works, so cant help you there.

You can also check group access for enabled modules.

 

Edited May 21, 2020 by toplakd

[Rhapsody]

46 minutes ago, toplakd said:

Sorry, I don't know how full page cache works, so cant help you there.

You can also check group access for enabled modules.

 

I figured it out.  The cache needed to be built using the phone, not desktop.  I cycled through all the products on the phone and then it all works fine.

[AndyC]

I thought full page cache didn't work...Or am I wrong

[Rhapsody]

I'm finding it isn't working reliably!

[AndyC]

2 minutes ago, Rhapsody said:

I'm finding it isn't working reliably!

we were advised a long time ago to disable it wasn't working ,which is why I was surprised you were using it

 

[x97wehner]

This is looking slick

 

[VinceMax]

On 4/13/2020 at 12:54 AM, Rhapsody said:

Vince,

The attached zip file has all the hide quantity mods in a directory structure that includes overrides and modified Community Theme template files.  Looking at the files, I did not mod the shopping cart templates listed above as I thought.

You'll need to use phpMyAdmin to add the field hide_qty to the product table.  Make it field type TINYINT with a field length 1

Make sure you clear the cache and delete the cache file class_index.php

all_files_hide_qty_mod.zip 24.53 kB · 1 download

THANK YOU. 3 years late... but it's better than none :)

Actually I was away because of the pandemic.

[Obi]

Nice one VinceMax! (I'm 3 years too late as well)

Sorry if this seems like a stupid question, but I've run into issues where changing themes destroys the configuration information of the previous theme (which means you can't go back without re-configuring everything), so the question is - can I install this theme to test it and then revert back the previous theme (I have a modded version of community-theme) just as it was?

[PeterPan]

is there a link to github @toplakd ?

is it planned to implement this as the new default community-theme?

[toplakd]

Hi. Sorry, there is no link to github.

I maintain very stripped down version of this theme for my own needs, and my own version will therefore not work for 99% of the users as it's not compatible with lots of modules (even many native TB ones as I don't use them)