Jump to content

IPhone & Android version of prestashop Feature

daYmo

By daYmo
in Core developers

 Share

Recommended Posts

  • 8 months later...
Banibooi Newbie

Banibooi

Posted
Posted

You should definitely restart that project!

The site had a few bugs and glitches.

Even some design flaws. You may however, post that source code to google code or a zip-file to the theme/module-forum!

Question:

Does the mobile version use its own database, or does it share with the "complete" site?

Great effort and I'm really interested in that!

Link to comment
Share on other sites
Nokall Newbie

Nokall

Posted
Posted

Hello :) it´s easy to do and i have in my shop :)
and don´t need to edit any code use same BD ,need only some tricks :)


look in

http://www.lojamais.pt , normal version


and now Mobi version for mobiles ,using same theme but more small (it´s possible tu use other theme)

work great in iphone and htc i have not test in other phones.

http://www.lojamais.mobi

If you need i can share tricks.

B.r

PS: Don´t make any order if you not want to buy it´s not a test site :)

Link to comment
Share on other sites
google-friend Newbie

google-friend

Posted
Posted
Hello :) it´s easy to do and i have in my shop :)
and don´t need to edit any code use same BD ,need only some tricks :)


look in

http://www.lojamais.pt , normal version


and now Mobi version for mobiles ,using same theme but more small (it´s possible tu use other theme)

work great in iphone and htc i have not test in other phones.

http://www.lojamais.mobi

If you need i can share tricks.

B.r

PS: Don´t make any order if you not want to buy it´s not a test site :)



I am very much interest to know your your tricks. Would you mind to share?
Link to comment
Share on other sites
Banibooi Newbie

Banibooi

Posted
Posted

I think getting beta-testers is the easy part of this.

We need developers. Experienced developers.

I can make an iPhone prototype design tomorrow (hopefully) as I' currently running ubuntu and I need fireworks to do that.*

*Users love when the site matches the OS gui.

Things we need to think about:

How to list the products when we have an unofficial theme installed. I am using a theme which uses a lot of modules and a weird CSS-code. Is that going to affect the site?!

Payment method:
I'm using a swedish payment method, which redirects the user from my site to their site. Sort of like the paypal method.
(no apis - yet.)

A method many store owners in sweden use is sending the users a bill together with the product. But, using that as the only option is insufficient.

Let's get the code out there and let the developers work on that.

Link to comment
Share on other sites
Banibooi Newbie

Banibooi

Posted
Posted
prestashop.png

I was goofing around in fireworks with the iPhone GUI layout and that was what I came up with.

The upper left is the logo of your store. Next to it the costumers can log in (after login it should say My account.) They can view their cart, and the search button to the right.

The image below the header is inspired by the engadget app. It's a "slider" with 3 images showing what would probably be the special offers/sales.

Below that ( the grids ), the store could list the various categories of products.

Such as
TVs
DVDs
Blu-Rays

etc.

* image used to display the slideshow http://geraimaya.com/

* grids inspired by magento iPhone site.

What are your thoughts? Anything I can add to the storefront?
Link to comment
Share on other sites
Nokall Newbie

Nokall

Posted
Posted

hello sorry for delay but to maney work :)

example:
Shop are installed in /home or /shop

Create one past (ex: mobile version) in same server that you have store ,

Copy all content from your shop to mobile version don´t need to copy admin ( if you are using URL Rewrite don´t forget to copy .htaccess and robots , this is important because when you click to buy if not have .htaccess, shop tell that product not exist any more :D )

Now the trick´s , in you past for mobile version go to past modules and delete modules that you don´t want to display.
Replace logo if you need.
If you want to use other theme replace theme (from inside mobile version) rename the name that theme are using by default (example: you upload theme xxxx to /mobile version/themes/ , you have now theme xxxx and theme prestashop , erase prestashop and replace name xxxx to prestashop :) .
Now when you insert a product in your site , the product display in mobile version but don´t have images you need to copy images from site to mobile version .

Simple :)

Link to comment
Share on other sites
Nokall Newbie

Nokall

Posted
Posted
Hello Nokall,

I think we are not talking of the same thing. I speak about a site optimized for iPhone like you can see on my link above.

But i'm interesting by your trick for hide some block on mobile version


i see your theme working it´s good :) but not forget one thing in web-commerce , must be focus in sells , costumer come customer buy and leave , and he have Nokia addicts windows mobile etc... :P it´s better to work in an universal theme and not focus only in iphone theme ;)

B.R
Link to comment
Share on other sites
Banibooi Newbie

Banibooi

Posted
Posted

I think we as developers should push forward web-standard.

By supporting engines such as Webkit or gecko - we force companies to comply with our demands.

Nokia hasn't really been pushing its browser.

I've looked for some interface guidelines to see whether or not there is something to change in order to make the site more "universal".

Link to comment
Share on other sites
  • 5 months later...
mel- Newbie

mel-

Posted
Posted

nokall,

I tried doing this, copying store to folder /mobile but I did copy the admin folder also. I log into mobile/admin not regular admin but all changes I make to modules appear in regular theme store also.

I changed the config file and copied and changed the htaccess file. is there anything else I am missing? thank you for your time if you are still around.

hello sorry for delay but to maney work :)

example:
Shop are installed in /home or /shop

Create one past (ex: mobile version) in same server that you have store ,

Copy all content from your shop to mobile version don´t need to copy admin ( if you are using URL Rewrite don´t forget to copy .htaccess and robots , this is important because when you click to buy if not have .htaccess, shop tell that product not exist any more :D )

Now the trick´s , in you past for mobile version go to past modules and delete modules that you don´t want to display.
Replace logo if you need.
If you want to use other theme replace theme (from inside mobile version) rename the name that theme are using by default (example: you upload theme xxxx to /mobile version/themes/ , you have now theme xxxx and theme prestashop , erase prestashop and replace name xxxx to prestashop :) .
Now when you insert a product in your site , the product display in mobile version but don´t have images you need to copy images from site to mobile version .

Simple :)
Link to comment
Share on other sites
mel- Newbie

mel-

Posted
Posted

on another thread, someone was working on having a button to click for a mobile user to view the mobile version of a site. I did get mine up and running but was worried about seo and my ssl working correctlly (I installed the mobile version under /mobile folder).

what I learned from that, though ,I am now applying to my normal prestashop theme. anyone using a mobile is AUTOMATICALLY given a mobile version.

this is what I have done and learned:

there is a media type in css that can be screen, print or handheld. but the iphone won't read a handheld css, some other phones read both screen and handheld css but iphone will only read the one for a screen.

so I decided to just edit the screen css. the default screen css for prestashop is global.css unless your theme calls it something else.

in the default theme prestashop, the global.css has this section:

/* Printable version */

@media print {
div#left_column, div#right_column, div#footer, a.button, span.button , .button, ul#usefull_link_block, div#header_user, #languages_block_top, #search_block_top, #currencies_block_top, ul#header_links, ul.idTabs, #availability_statut br {
display:none;
}
div#center_column {width:100%}
input.text{border:1px solid gray}
.block_hidden_only_for_screen { display:block; margin-top:1em; }
#more_info_sheets #idTab1{ width:530px; }
* {background:none!important;background-color:white!important;}
}



this is as it says on the first line for a printable version. I copied this section and modified it for mobile devices:

/* Mobile version, for screens smaller than 480px*/
@media screen and (max-width: 480px) {


div#left_column, div#right_column, div#footer, a.button, span.button , .button, ul#usefull_link_block, ul#step, div#header_user, #languages_block_top, #currencies_block_top, #search_block_top, #categoryImage, ul#header_links, ul.idTabs, #availability_statut br {
display:none;
}


a person using a device which is 480 px or smaller will be diverted automatically to this section. from what I read, 480px is what the iphone is right now. if the next version has a bigger screen, then that max 480px will have to change.

that line that begins with div# and ends with display:none.} that is telling prestashop what NOT to display if a person is using something with a smaller screen than 480px. so reading it, it will not display #left_column,# right_column, footer, etc.

you can see my site here:

http://tinyurl.com/ykjcse6

it still has some syntax I am working on and opera mobile 10 is rendering both the regular css plus the mobile css and I have to work on that. but I have used online simulators for iphone and it works in both landscape and portrait mode and on my samsung saga it works with opera mini. I have yet to check it on an android or blackberry but there are simulators for those I am going to download and try to get working. no online simulators for either of them. simulators I have used are testiphone.com, iphonetester.com, http://demo.opera-mini.net/ and http://www.opera.com/mobile/demo/.

the way I am setting it up though, you can also just shrink down your browser to see how the two sites compare. helps when debugging.

but other than a couple of wierd layout issues I'm very happy with what it looks like now. still trying to eliminate a couple of things like the category description from just the mobile screens but this works pretty well so far on just your regular theme by modifying the global.css.

the other thing I did was in the header.tpl I added a different header for mobile screens. I couldn't figure out any other way to render the header the way I wanted. I created an id called iphonenoshow3 and that only shows on screens LARGER than 480px (so normal computer screens) and I created an id called pdadevices and that header only shows on MOBILE screens.

I added this line to the global.css in the normal section:

#iphonenoshow3 { display: block; }


and changed the mobile section to:

/* Mobile version, for screens smaller than 480px*/
@media screen and (max-width: 480px) {


div#left_column, div#right_column, div#footer, a.button, span.button , .button, ul#usefull_link_block, ul#step, div#header_user, #languages_block_top, #currencies_block_top, #search_block_top, #categoryImage, #iphonenoshow3, ul#header_links, ul.idTabs, #availability_statut br {
display:none;
}


I then put this line in the normal global.css:

.pdadevices { display:none; }


and then defined .pdadevices in the mobile section so it is now:

/* Mobile version, for screens smaller than 480px*/
@media screen and (max-width: 480px) {


div#left_column, div#right_column, div#footer, a.button, span.button , .button, ul#usefull_link_block, ul#step, div#header_user, #languages_block_top, #currencies_block_top, #search_block_top, #categoryImage, #iphonenoshow3, ul#header_links, ul.idTabs, #availability_statut br {
display:none;

.pdadevices { display:block; }
}


my mobile device section keeps getting longer as I have to redefine more css and put in there. you can see my entire global.css at this link http://tinyurl.com/2f7e857

hope this helps someone else. if anyone has a blackberry or android I'd appreciate knowing how it looks or even screenshots. wish they had online simulators.
Link to comment
Share on other sites
MistrM Newbie

MistrM

Posted
Posted

Joël

The payment modules I have are from Klarna invoicing and Certitrade who handles credit card payment. Not the original modules from Prestashop. When these are used the customer makes a verification through a window that is this companies. I geuss this is the most commen way to handle at least credit card payment.

This is the thread where there was a comment about how iprestashop handles attributes. What do you think?

http://www.prestashop.com/forums/viewthread/58047/third_party_modules/native_iphone_ipad___android_mobile_ecommerce_builder

Link to comment
Share on other sites
  • 5 months later...
  • 7 months later...
  • 1 month later...
seldon.paul Newbie

seldon.paul

Posted
Posted

I think prestashop must initiate creating mobile version using identical database.

I vaguely remember there was announcement for mobile version, if I am not mistaken ~

 

They use all the open source material including DB and yet, they are not free ~

I recommend lower the price to 30 EURO. If the maker can appreciate all the things in

prestashop ~

Link to comment
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
 Share
Go to topic listing
×
×
  • Create New...