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 09-16-2016, 04:35 PM
Vergil's Avatar
Vergil is offline
Junior Member
 
Join Date: Sep 2016
Posts: 5
Question

App to insert HTML in different locations in the Storefront


Hello,
I am still new to Ecwid and I am wondering how to insert custom HTML in different locations in the Storefront through an App. Similarly to one of the example Apps, Free Shipping Icon, I am trying to get some input from the control panel and display the content (a text) inside customs Divs in the Storefront (such as inside the header, footer, product page etc...).

For example in Wordpress there are specific Hooks for that but in Ecwid Web Hooks seem to have a different function.

I would appreciate any hints or insight on this matter.

Thank you in advance.
  #2  
Old 09-16-2016, 08:32 PM
smartMart's Avatar
smartMart smartMart is offline
 
Join Date: Oct 2014
Posts: 278
Default

Hello!
It's about what you need (I hope):
developers.ecwid.com/api-documentation#customize-storefront

Good luck!
  #3  
Old 09-17-2016, 12:08 AM
Vergil's Avatar
Vergil Vergil is offline
Junior Member
 
Join Date: Sep 2016
Posts: 5
Default

Thank you for your quick reply. I have had a chance to check out that link and basically it is possible to include custom js and css to the website. However, what I am concerned about is if it is possible to insert my own HTML elements to the storefront using things like for instance hooks (as in wordpress) or smarty blocks etc... so that even if the user changes Shop Themes my custom div will still be positioned in a specific location (i.e.product page)
  #4  
Old 09-20-2016, 09:51 AM
smartMart's Avatar
smartMart smartMart is offline
 
Join Date: Oct 2014
Posts: 278
Default

Quote:
Originally Posted by Vergil View Post
However, what I am concerned about is if it is possible to insert my own HTML elements to the storefront using things like for instance hooks (as in wordpress) or smarty blocks etc...
You can insert your own HTML elements to the storefront widget using custom JS.

Quote:
Originally Posted by Vergil View Post
so that even if the user changes Shop Themes my custom div will still be positioned in a specific location (i.e.product page)
In general, YES.

BUT: advanced (and malicious) user can hide/move/"replace" virtually any item on storefront using just stylesheet (CSS) rules. The same applies to elements inserted via wordpress hooks. So just keep it in mind.
  #5  
Old 09-20-2016, 01:38 PM
Vergil's Avatar
Vergil Vergil is offline
Junior Member
 
Join Date: Sep 2016
Posts: 5
Default

Thanks for your detailed answer. I understand and am aware that I could use js&css to add and manipulate the html elements I need. However, in WP, for example, there are hooks/actions that add html content only to the header and another that only places content in the footer. I am afraid that if I add html using only js it might not appear/function correctly when changing themes, I mean if, for instance, I choose to append a div to an element in an individual Product page, it is not guaranteed that html dom element used will exist or have the same name in a different theme.
  #6  
Old 09-20-2016, 02:39 PM
smartMart's Avatar
smartMart smartMart is offline
 
Join Date: Oct 2014
Posts: 278
Default

I think yes, it is not guaranteed that html dom element used will exist or have the same name, we can't control it. The only classes of Ecwid widget's elements will be the same (for example, "Free Shipping Icon" uses this fact).

It is because WP hooks/actions are rendered to html on server-side, according to current WP template grid. But Ecwid widget elements are inserted to the "host" site page dynamically, via Javascript integration code.

In addition, if you use Ecwid storefront on Facebook, for example, you can't go outside from Ecwid Facebook Application's <iframe> element (it's Facebook limitation "by design").

Maybe, any workaround found here?
Can you attach some sample screenshot or sketch?
The Following User Says Thank You to smartMart For This Useful Post:
Rick G (10-06-2016)
  #7  
Old 10-04-2016, 03:37 PM
Vergil's Avatar
Vergil Vergil is offline
Junior Member
 
Join Date: Sep 2016
Posts: 5
Default

Thank you for your answer. I haven't found any workarounds yet but I think for now I will try to attach my divs into apparent places like footer or the classes of the Ecwid widget. Thanks again your insights were very helpful.
The Following User Says Thank You to Vergil For This Useful Post:
smartMart (10-05-2016)
  #8  
Old 10-05-2016, 08:25 AM
smartMart's Avatar
smartMart smartMart is offline
 
Join Date: Oct 2014
Posts: 278
Default

You are welcome!

I like this idea: use footer/classes of the Ecwid widget. I think this is the right way.
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
footer, header, html, javascript, storefront

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