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
  #1  
Old 10-04-2017, 05:37 PM
Jeremy Wuestefeld's Avatar
Jeremy Wuestefeld is offline
Junior Member
 
Join Date: Oct 2017
Posts: 6
Question

Site Integration - Nothing Appearing


Hello,

I am part of a development team redesigning & building a website for a local business that uses Ecwid for an online store. I am attempting to add the Ecwid store to the website, but I'm failing to get anywhere.

We're building the website in Angular 4 (using Angular CLI) with a Firebase back-end. I've made my own Ecwid account so I can play around, #12335022, and I've also tried using the demo store #1003. The deployed site is at: https://ganache-chocolatier.firebaseapp.com/about (The "About" page is my demo area, testing functionality, etc... ignore the other pages)

The Problem:
Nothing* store-related appears on the page! Whether I serve it locally and visit localhost:4200, or I deploy it and visit the above url, nothing* gets rendered to the page. In the about.component.html file, at the very end, I've placed the following code:
Code:
<div id="my-store-12335022"></div>
<div>
  <script type="text/javascript" src="https://app.ecwid.com/script.js?12335022&data_platform=code&data_date=2017-10-04" charset="utf-8"></script>
  <script type="text/javascript">
    xProductBrowser("categoriesPerRow=3", "views=grid(20,3) list(60) table(60)", "categoryView=grid", "searchView=list", "id=my-store-12335022");
  </script>
</div>

<div>
  <script charset="utf-8" src="https://app.ecwid.com/script.js?1003"></script>
  <script>
    xProductBrowser();
  </script>
</div>
*Nothing: I get an element rendered into the DOM, it's just empty! As you can see in the following (deployed) screenshot, I do get a div with an ID for store #12335022, and nothing for demo store #1003.


Please help!

Thank you!
Jeremy
  #2  
Old 10-06-2017, 11:13 AM
Antea's Avatar
Antea Antea is offline
Ecwid Team
 
Join Date: Nov 2015
Posts: 381
Default

Hello!
Anna here, Ecwid team, thank you for the detailed message.

I checked your store page https://ganache-chocolatier.firebaseapp.com/about and I can see that currently there are no Ecwid scripts added there.

Quote:
I've placed the following code:
Code:
<div id="my-store-12335022"></div>
<div>
  <script type="text/javascript" src="https://app.ecwid.com/script.js?12335022&data_platform=code&data_date=2017-10-04" charset="utf-8"></script>
  <script type="text/javascript">
    xProductBrowser("categoriesPerRow=3", "views=grid(20,3) list(60) table(60)", "categoryView=grid", "searchView=list", "id=my-store-12335022");
  </script>
</div>

<div>
  <script charset="utf-8" src="https://app.ecwid.com/script.js?1003"></script>
  <script>
    xProductBrowser();
  </script>
</div>
The code you implemented to the page has duplicated scripts - the second part of the code refers to the Ecwid demo store ID 1003. This may cause the issue with the store display.

To embed your store ID 12335022 to the page, please use the following code:

Code:
<div id="my-store-12335022"></div><div> <script type="text/javascript" src="https://app.ecwid.com/script.js?12335022" charset="utf-8"></script><script type="text/javascript"> xProductBrowser("categoriesPerRow=3","views=grid(20,3) list(60) table(60)","categoryView=grid","searchView=list","id=my-store-12335022");</script></div>
Just in case, here's a link to the page where you can generate the integration code for your store at any time: https://support.ecwid.com/hc/en-us/a...r#GenerateCode

As you add the store integration code to the website's source code and save the changes, your store should appear fine.

Please, give it a try and let me know the results.
Thank you!

Kind regards,
__________________
Anna,
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

Please click Thanks if my reply helped you.
  #3  
Old 10-06-2017, 01:37 PM
Jeremy Wuestefeld's Avatar
Jeremy Wuestefeld Jeremy Wuestefeld is offline
Junior Member
 
Join Date: Oct 2017
Posts: 6
Default

Hi Anna,

Thanks for replying
The multiple instances of the code were part of my troubleshooting. I initially only had my store 12335022, but when that didn't appear, I added in the default 1003 too in case it was an issue with 12335022.

I've switched the deployed page back to having just the 12335022 code, and again, the only thing that appears is that initial div tag. There are no errors in the console. I'll stop troubleshooting and leave the code as-is on the /about page, I apologize for removing it prior to your help.

Thank you!
Jeremy
  #4  
Old 10-11-2017, 05:33 PM
Jeremy Wuestefeld's Avatar
Jeremy Wuestefeld Jeremy Wuestefeld is offline
Junior Member
 
Join Date: Oct 2017
Posts: 6
Default

Ecwid support never responded. For anyone else coming across this issue, I'll briefly explain how I worked around this problem:

I believe this is due to a limitation of Angular, which does not allow script tags inside component HTML files (an Angular-friendly Ecwid NPM package would fix this). Even with workarounds to inject the script tags, it still does not work.

I've had to host the store on a subdomain of the webpage. The subdomain's webpage is a completely different project, a web page with vanilla JS - no frameworks - with 1 HTML, 1 CSS, and 1 JS file. That other website is styled exactly the same as the main website, so users will not realize they've navigated away from the original page. The links in the navigation bar reflect this - Home/About/etc direct to the Angular website, but the Shop link directs to the outside website. On the outside website, the links direct back to the full website.

This is not a "good" solution. The Angular pages load instantly, while the shop page loads a whole new website. We can't have a shopping cart visible in the navigation bar the whole time, that's an Ecwid widget that doesn't play well in an Angular environment. Users won't be able to add products to their cart unless they're on the external website, no simple "Buy Now" buttons on the original website.

With all of the other integrations that Ecwid has, I'm kid of surprised they haven't published an appropriate NPM package yet.
The Following User Says Thank You to Jeremy Wuestefeld For This Useful Post:
andre jackson1 (05-26-2018)
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
angular, integration

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 08:41 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.