Jump to content

Welcome, Guest!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

toplakd

Community-Theme-Modded

Recommended Posts

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).

  • Like 1

Share this post


Link to post
Share on other sites
Posted (edited)

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 by toplakd

Share this post


Link to post
Share on other sites
Posted (edited)
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 by toplakd
  • Like 2

Share this post


Link to post
Share on other sites

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

Screenshot_2020-05-20 Picture Frame - My Store.png

  • Like 1

Share this post


Link to post
Share on other sites

@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. 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
Posted (edited)
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 by Rhapsody
only product page cached

Share this post


Link to post
Share on other sites
Posted (edited)

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 by toplakd

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...