When I was making my first PrestaShop Theme, an idea crossed my mind (not a fresh one though): it would be great to create a mobile version of the theme besides a desktop one. At the very beginning, I was in some difficulty: it was impossible to delimit desktop and mobile PrestaShop templates. However, both our complete devotion and new possibilities of CSS 3 allow us to create unique things easily. We can improve internet sellers’ lives and display their products to customers, no matter what device they use to access the eShop.
As soon as the desktop template is ready, we create a new style sheet for small screen devices with the help of Media Queries. First, let’s set the “float: none” markup option in all the columns to destroy the habitual layout appearance. Next, let’s set the width by percent and enlarge the buttons size. After all, we have a long single column. However, the left column covers the content with products making it user-unfriendly.
To solve this problem, we use JavaScript. As of today, all smart devices are familiar with this scripting language. With the help of CSS for mobile devices, we hide the content of all the blocks in sidebars and leave the title only. We define the width of the user’s browser window in the script to ensure that the small screen device is being used and write a function that opens the hidden blocks in sidebars after pressing on the title.
To make it more convincing, we add arrows. Now users can access all the required information, hidden by our sidebars, easily.
|
1 2 3 4 5 6 |
if(bodyWidth <= 480 ){ $(".block h4").click(function(){ $(this).next('.block_content').toggle() }) } |
All we have to do is to test and perfect our new styles. Let imagination do the work or have a talk with a designer over coffee. After all, our template is ready: all new and shiny, it works impeccably. The width of the site adapts to the width of the device screen because we didn’t forget about the viewport. Finally, we test the site in Opera Mini, anticipating with exultation. But… we fail to pass the Opera test. The thing is that this browser processes all the styles mixed together, no matter how wide the screen is. What do we do now? Our heavy artillery goes into battle. On PHP, we create a module that checks if a user uses Opera Mini. If he or she does, we use our mobile styles, if doesn’t – we display a desktop version. Now everything’s OK.
Here you can download the module.
PrestaShop Extensions
Take your online store to the next level with BelVG PrestaShop extensions
Visit the store
Partner With Us
Looking for a partner to grow your business? We are the right company to bring your webstore to success.
Talk to Igor
