The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
Closed Thread
 
Thread Tools Display Modes
  #1  
Old 01-01-2014, 02:04 AM
JCT's Avatar
JCT is offline
Senior Member
 
Join Date: Jan 2011
Posts: 117
Default

Facebook App Help


Following recently setting up ecwid Facebook app, here are some concerns/questions:


1) Currently using custom html method due to requiring a custom default category. Is there a way to use the default method rather than custom html and still change the default category. At this time, the selection box in the ecwid app settings are not showing any options for changing this.

2) Our Facebook store loads very slowly. Is there any particular reason and/or fix for this.

3) Some images including background images and custom buttons are not displaying.

4) Minicart is not displaying similar to site, only a text link following adding an item to cart.

5) Custom text changes are not applied to Facebook store.

Thank you.
  #2  
Old 01-04-2014, 10:59 AM
Lanna's Avatar
Lanna Lanna is offline
Ecwid Team
 
Join Date: Jan 2011
Posts: 2,677
Default

Hi,

Quote:
1) Currently using custom html method due to requiring a custom default category. Is there a way to use the default method rather than custom html and still change the default category. At this time, the selection box in the ecwid app settings are not showing any options for changing this.
If you need to show a specific category on the Facebook store, you can use an in-built setting. Please refer to this article for directions:
How to choose a hidden category for a Facebook store

Quote:
2) Our Facebook store loads very slowly. Is there any particular reason and/or fix for this.
3) Some images including background images and custom buttons are not displaying.
Please let us know a link to your Facebook store, we'll look into these issues. Make sure your Facebook page is published so that we could access the storefront and check it.

Quote:
4) Minicart is not displaying similar to site, only a text link following adding an item to cart.
At present Facebook app has two views of the shopping bag:
- normal view, which is shown when categories menu is enabled
- miniview displayed when categories are disabled

You can switch between these views by changing setting "Categories menu widget":
- open apps.facebook.com/ecwid-shop/, enter "Settings"
- under "Your Facebook store layout", select Categories menu widget mode. If to choose "Hide", the bag will be displayed in miniview. If to select to show the menu, there will be normal view of the bag.

As I understand right now your store shows the minivew cart. You can still change the bag position via CSS, and make it changed only to Facebook storefront (how to apply CSS to Facebook only).

Quote:
5) Custom text changes are not applied to Facebook store.
A method to change/translate texts in Ecwid is described in this article: http://kb.ecwid.com/w/page/22978888/...inmystorefront However, this technique is only applicable when you have an access to the source code of the store page. If you run your Ecwid store on Facebook using our official app, unfortunately, you are not allowed to change its source code. A workaround is to use Custom HTML tab where you can embed Ecwid widgets and append extra Javascript/HTML codes.

Please, mind, however, when you switch to the custom HTML tab, it will mean you won't be using our official application for Facebook anymore, it will be a custom install of Ecwid. With this regard, we can't guarantee that it will work flawlessly - we developed the app to make it meet all specific Facebook functions. So we would recommend keeping the application (i.e. switch to "Catalog" option in the app settings). We're planning to improve the custom HTML tab.
__________________
Lana W.
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

⬇ Please click Thanks if my reply helped you.

Thank Ecwid team on Twitter
The Following User Says Thank You to Lanna For This Useful Post:
JCT (01-15-2014)
  #3  
Old 01-06-2014, 07:00 AM
JCT's Avatar
JCT JCT is offline
Senior Member
 
Join Date: Jan 2011
Posts: 117
Default

Thank you for your prompt reply. At this time, custom HTML tab is best for what we are wanting to accomplish.

1) Resolved with provided answer. Thank you.

2) Facebook page here, though this has been resolved after changing our protocol relative URLs to absolute URLs by adding http: therefore it does not try loading https which will fail due to using free cloudflare since facebook is attempting to load on https:.

3) Upon inspecting the image element using firebug I was able to check into this further and it appears to do with using protocol relative URLs as well. Once changed in ecwid custom css images are now loading. Is there a better solution than changing the protocol relative URLs?

4) Resolved with provided answer. Thank you.

5) Managed to get this to work by manually copying from our configured js file into custom HTML tab, but is it possible to load our already configured js file as it did not work even when using absolute URL. What are the projected plans for improvement with the custom HTML tab for purposes of revisiting this in the future? What main features are lacking using custom HTML tab that we should be concerned with compared to the official app for facebook.

New Questions:

Noticed, when using custom HTML tab, 'Your Account' and 'Sign Out' is present, but both are not available when using catalog as default. Is this normal?

Is there an easy way to change the font size in facebook app without several changes to custom css? Perhaps a base font size? It currently appears to be slightly larger than the website for some reason and affects the desired layout.

Tried adding div.ecwid_facebook_app .ecwid a using !important to custom css to decrease size of account/sign out button, but it appears to not work?

Also, upon attempting to checkout we noticed the email and create password options are display:none. Is this because of utilizing facebook login info?

We hide our payment checkout block as we only ship to verified billing address only and use the default shipping address for this purpose along with the automatically selected 'same as shipping address' Pseudobutton (hidden) on the payment address form. We do not want to change this, but this method appears to not work the same through the ecwid facebook app as the pseudo button is not selected by default. How do we change this?

On the PayPal payment page, the cancel and return to website function for ecwid facebook app returns to facebook to a blank page with URL https://s-static.ak.facebook.com/pla..._proxy.php?v=5. Any ideas?

Again, many thanks.

Last edited by JCT; 02-08-2014 at 04:37 AM.
  #4  
Old 01-14-2014, 07:10 PM
Lanna's Avatar
Lanna Lanna is offline
Ecwid Team
 
Join Date: Jan 2011
Posts: 2,677
Default

Hi,

Quote:
3) Upon inspecting the image element using firebug I was able to check into this further and it appears to do with using protocol relative URLs as well. Once changed in ecwid custom css images are now loading. Is there a better solution than changing the protocol relative URLs?
As I see, the images won't load because their URLs were specified with http:// whereas Facebook run under https - browsers may refuse to display the content loaded from http resource if the site is under https. You have two options to handle it:
- to store your images on a hosting that can provide https direct links to the pics
- to enter the images URLs in the custom CSS theme without http:// prefix

Quote:
5) Managed to get this to work by manually copying from our configured js file into custom HTML tab, but is it possible to load our already configured js file as it did not work even when using absolute URL.
You can do the same on Facebook if you insert the js file in custom HTML tab. What code did you use for that? Can you copy it here?

Quote:
What are the projected plans for improvement with the custom HTML tab for purposes of revisiting this in the future? What main features are lacking using custom HTML tab that we should be concerned with compared to the official app for facebook.
One of the major issues with use of custom HTML tab is the one you reported: the return from payment gateway doesn't work and customers may be redirected to a blank page like https://s-static.ak.facebook.com/pla..._proxy.php?v=5
It's because the apps on FB are in iframes: to put it simply the browser doesn't know to which element within the page you're referring to on returning from outside site. We developed our official app for FB in a way to overcome this.
We're thinking to change the custom HTML tab to a simple option to append extra HTML/Javascript to Ecwid app. So you'll still be using the application and apply, e.g., translations.

Quote:
Noticed, when using custom HTML tab, 'Your Account' and 'Sign Out' is present, but both are not available when using catalog as default. Is this normal?
When you enabled 'Catalog' option in the FB store settings, you're using our official app. It is, sort of, synced with Facebook:
Ecwid is able to get the user's profile info and authenticate you automatically. We designed the app this way.
Once you switch to 'custom HTML tab', this feature is no longer there. Hence the storefront has its own sign in/registration separated from Facebook.

Quote:
Is there an easy way to change the font size in facebook app without several changes to custom css? Perhaps a base font size? It currently appears to be slightly larger than the website for some reason and affects the desired layout.

Tried adding div.ecwid_facebook_app .ecwid a using !important to custom css to decrease size of account/sign out button, but it appears to not work?
This is the right way to add specific CSS only to Facebook:
How can I apply CSS changes only to my store on Facebook and keep another design on the site?

Could you add your code back so that we test it?

Quote:
Also, upon attempting to checkout we noticed the email and create password options are display:none. Is this because of utilizing facebook login info?
Yes, if you're using the application, the email/password box isn't needed since the information is taken from Facebook profile (yet you should allow Ecwid app to access the information, more details here)

Quote:
We hide our payment checkout block as we only ship to verified billing address only and use the default shipping address for this purpose along with the automatically selected 'same as shipping address' Pseudobutton (hidden) on the payment address form. We do not want to change this, but this method appears to not work the same through the ecwid facebook app as the pseudo button is not selected by default. How do we change this?
As I see, you hid the billing address form. We recently made it possible to disable/enable billing address right in the control panel: System Settings>General>Cart, setting "Ask for a billing address during checkout". You can hide it here and the store will continue functioning as usual.


As a side note, I've noticed the content of the shopping bag is overlapping a little, screenshot: http://d.pr/i/HiAT This container has a fixed width of 170px, here's the code from your CSS custom theme:
Code:
div.ecwid-minicart-mini-rolloverContainer {
    display: block;
    width: 170px !important;
    height: 57px !important;
    z-index: 10;
}
If you change the width property to auto (width: auto, the div will be auto resized, it should look better. Please check.
__________________
Lana W.
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

⬇ Please click Thanks if my reply helped you.

Thank Ecwid team on Twitter
The Following User Says Thank You to Lanna For This Useful Post:
JCT (01-15-2014)
  #5  
Old 01-15-2014, 12:10 AM
JCT's Avatar
JCT JCT is offline
Senior Member
 
Join Date: Jan 2011
Posts: 117
Default

3) Not sure I follow as we have changed to absolute URLs using non-secure protocol in ecwid custom CSS and it appears to work on our end. Can you provide an example where it is currently not working as we checked a couple another facebook store as shown on the ecwid app and see they are using non-secure protocol too.

5) <script type="text/javascript" src="http://www.domain.com/dir/file.js"></script> is what is entered through the custom HTML tab for ecwid app and upon checking with firebug it appears to be loaded just not working properly as it does not change our text. Our file is currently entered in custom HTML tab for loading to our facebook store for checking.

The ideas for the custom HTML tab sound like a better solution and should work for our requirements too. Is there a projected time for this update yet? Keep up the good work.

CSS for facebook app, here is what we added to ecwid custom CSS:
div.ecwid_facebook_app .ecwid a, div.ecwid_facebook_app .ecwid a:active, div.ecwid_facebook_app .ecwid a:visited {
font: normal .9em arial, helvetica, sans-serif !important;
color: #666666;
background-color: transparent;
text-decoration: none;
}

Thank you for note about minicart, however we currently have this set to avoid conflicts with the minicart position on the website though we should be able to resolve this issue on facebook store after figuring out how to correctly change font-size.

Last edited by JCT; 01-15-2014 at 12:20 AM.
  #6  
Old 01-16-2014, 01:25 PM
Lanna's Avatar
Lanna Lanna is offline
Ecwid Team
 
Join Date: Jan 2011
Posts: 2,677
Default

Hi,

Quote:
3) Not sure I follow as we have changed to absolute URLs using non-secure protocol in ecwid custom CSS and it appears to work on our end. Can you provide an example where it is currently not working as we checked a couple another facebook store as shown on the ecwid app and see they are using non-secure protocol too.
You were right about using relative URLs, I forgot about it completely. In custom CSS theme you should use absolute URLs for images. Still browser may warn about insecure elements being used on HTTPS site and sometimes refuse to show them.
For example, I open your FB store in Chrome and see a grey shield in the address bar, screenshot: http://d.pr/i/VqrB
If to check 'inspect element'->Console, there are warnings, screenshot: http://d.pr/i/ZOQ4

Quote:
5) <script type="text/javascript" src="http://www.domain.com/dir/file.js"></script> is what is entered through the custom HTML tab for ecwid app and upon checking with firebug it appears to be loaded just not working properly as it does not change our text. Our file is currently entered in custom HTML tab for loading to our facebook store for checking.
It should work. Yet if the source link is http, probably it doesn't work because of this: the same issue as explained above. If you do have http in src="http://www.domain.com/dir/file.js", try changing it to src="//www.domain.com/dir/file.js".

Quote:
The ideas for the custom HTML tab sound like a better solution and should work for our requirements too. Is there a projected time for this update yet? Keep up the good work.
Thank you. We don't have any ETA as of yet, sorry.

Quote:
CSS for facebook app, here is what we added to ecwid custom CSS:
div.ecwid_facebook_app .ecwid a, div.ecwid_facebook_app .ecwid a:active, div.ecwid_facebook_app .ecwid a:visited {
font: normal .9em arial, helvetica, sans-serif !important;
color: #666666;
background-color: transparent;
text-decoration: none;
}
Thank you. I got it. I should have guessed at first place. The div div.ecwid_facebook_app is appended by our application. When you switch to custom html tab, the div is no longer there, hence the CSS rule is nowhere to apply to.
You may want to pick up a font that would look OK on both storefronts.
__________________
Lana W.
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

⬇ Please click Thanks if my reply helped you.

Thank Ecwid team on Twitter
The Following User Says Thank You to Lanna For This Useful Post:
JCT (01-17-2014)
  #7  
Old 01-17-2014, 07:55 PM
JCT's Avatar
JCT JCT is offline
Senior Member
 
Join Date: Jan 2011
Posts: 117
Default

Hi,

Follow up, our js script file did need to be loaded from a protocol that could be switched to secure to properly work with facebook app through custom HTML tab. Though absolute URLs worked for images, scripts required being able to switch to secure protocol. Currently, we are trying to find a way to accomplish loading our combined script file while maintaining our www domain with free cloudflare account as it does not allow secure protocol.

Regarding, custom CSS not working when using custom HTML tab and only when using the official facebook ecwid app, not sure if this is mentioned in the appropriate area of the knowledgebase as we were unable to identify this when reading it. Is there a work around for this?

On another note, we use a continue shopping link button on some categories through ecwid category description to link back to our main store page and noticed this does not work through facebook app ex. /shop/#!/~/. Is there another way? Thanks.

Last edited by JCT; 01-23-2014 at 03:54 AM.
  #8  
Old 01-24-2014, 11:08 AM
Lanna's Avatar
Lanna Lanna is offline
Ecwid Team
 
Join Date: Jan 2011
Posts: 2,677
Default

Hi,

Quote:
Regarding, custom CSS not working when using custom HTML tab and only when using the official facebook ecwid app, not sure if this is mentioned in the appropriate area of the knowledgebase as we were unable to identify this when reading it. Is there a work around for this?
We added div.ecwid_facebook_app in our official FB app. A workaround might be to create your own app for FB that would cover all these issues: http://kb.ecwid.com/w/page/27158188/...cebook%20store

We didn't specify this in the knowledge-base indeed. I've added a note about this.

Quote:
On another note, we use a continue shopping link button on some categories through ecwid category description to link back to our main store page and noticed this does not work through facebook app ex. /shop/#!/~/. Is there another way? Thanks.
Though Ecwid is inserted and used in iframe on Facebook (hence when you browse the store pages the URL isn't changed in the browser address bard), we developed a workaround in our application:
How can I link to a specific product or a category of my Facebook shop?
So basically you can point to any page inside the app. Unfortunately this way doesn't work with custom app (custom HTML tab).
__________________
Lana W.
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

⬇ Please click Thanks if my reply helped you.

Thank Ecwid team on Twitter
The Following User Says Thank You to Lanna For This Useful Post:
JCT (01-24-2014)
  #9  
Old 01-24-2014, 06:50 PM
JCT's Avatar
JCT JCT is offline
Senior Member
 
Join Date: Jan 2011
Posts: 117
Default

Hi Lana,

Thanks for your attention regarding our concerns. The idea to append HTML/JavaScript to the official ecwid facebook app sound like the better option and we look forward to that rolling out soon. Again, thank you.
Closed Thread
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 07:25 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.