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 10-24-2011, 10:33 PM
larrypjr's Avatar
larrypjr is offline
Junior Member
 
Join Date: Jun 2011
Posts: 23
Cool

How to get a jquery based function working in ECWID


Trying to learn about JavaScript, Jquery etc....
I have successfully installed the following on my web pages (using XARA)
This is a function for a magnification tool.

This is in the <head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.js" type="text/javascript"></script>
<script src="index_htm_files/jquery.imageLens.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(function () {

$("#img_02").imageLens({ lensSize: 200 });

});
</script>

This is in the <body>
<p>
<img id="img_02" src="index_htm_files/praireBig.png" width="500" height="489" /></p>

How do i get this to work on an ECWID product. Where do I put it and how?
I did manage to get the cloud.zoom working on an earlier attempt (thanks to these forum posts. - I was using the HTML editor on the product section of the Catalog page.) Is this the correct way to do it (the HTML editor from the product definition page) or should I be trying to learn about the API Javascript? And if so 'How do I set up the API? Any help for this amateur will be greatly appreciated. <BTW> I have used your zoom feature and it's nice, but not exactly what were looking for. I was hoping there was a simple way to use the above code inside ECWID. Thanks for a great product and and any direction you can guide me towards.

This is far from getting done but at least it's a first attempt and something to look at.
www.frysa.us
  #2  
Old 10-26-2011, 04:47 PM
Eugene Rimmer's Avatar
Eugene Rimmer Eugene Rimmer is offline
Senior Member
 
Join Date: Jan 2011
Location: Ecwid headquarters
Posts: 7,857
Default

If you want any JavaScript code - including, but not limited to jQuery-based one - to run when a certain page in the product browser widget of Ecwid is open, you need to use the Ecwid JavaScript API , more exactly the OnPageLoaded event.

Thecode that needs to be executed should be wrapped into a function, and then the function needs to be added to the OnPageLoaded hadlers. Here is the example:
Code:
Ecwid.OnPageLoaded.add( // an Ecwid JS API call
  function(page) { // this is anonymous function constructed right in place, but you use the named functions as well
    alert('This code runs each time when a page is open inside an Ecwid product browser');
    // it is possible to react on different type of pages in Ecwid and their parameters
    if (page.type === 'PRODUCT') {
      alert('This code only runs when a product page is open');
    } else if (page.type === 'SEARCH' && page.keywords === 'foo') {
      alert('This code only runs when you search for a "foo" with a built in Ecwid search widget');
    }
    // etc
    // of course it is possible to call jQuery inside this function too
  }
);
__________________
Eugene Efimochkin, Team
_________________________
Shipping methods are not showing up? Here is how to set it up properly!
Have a question? Look up the answer at our help portal!

⬇ Click Thanks, please, if this reply helped you.
  #3  
Old 10-27-2011, 12:36 PM
larrypjr's Avatar
larrypjr larrypjr is offline
Junior Member
 
Join Date: Jun 2011
Posts: 23
Default

Sounds interesting. Would like to learn more about it.

Looks like I have a bit of a learning curve ahead of me.

Seems like fun..

Thanks

Last edited by Laurence Poulin; 10-28-2011 at 12:33 AM.
  #4  
Old 10-28-2011, 09:53 AM
Eugene Rimmer's Avatar
Eugene Rimmer Eugene Rimmer is offline
Senior Member
 
Join Date: Jan 2011
Location: Ecwid headquarters
Posts: 7,857
Default

JavaScript API is an integral part of Ecwid itself. You don't set it up anyway, you just have it as a part of your Ecwid widgets. The information on how to access it is listed here: http://kb.ecwid.com/w/page/41188517/JavaScript%20API and the example script can be found in my previous post or in the KB article I already gave a link to.
__________________
Eugene Efimochkin, Team
_________________________
Shipping methods are not showing up? Here is how to set it up properly!
Have a question? Look up the answer at our help portal!

⬇ Click Thanks, please, if this reply helped you.
  #5  
Old 11-01-2011, 08:25 PM
larrypjr's Avatar
larrypjr larrypjr is offline
Junior Member
 
Join Date: Jun 2011
Posts: 23
Default

Thanks Eugene,

I managed to get your script working well within the pages. Pretty amazing stuff.
What I'm trying to do is to display an image on the product page. Tried different ideas but not having much luck. 1. How do I address just the product page. The function(page.PRODUCT) doesn't seem to work for me 2. How would I get an image to appear. I used the amazon address that I took from a gallery for the src. Still don't know enough about javascript but going through the ECHO ECHO Tutorials. What do you think will work inside the API to accomplish my goal of displaying an image on the PRODUCT page?
  #6  
Old 11-02-2011, 02:37 PM
Eugene Rimmer's Avatar
Eugene Rimmer Eugene Rimmer is offline
Senior Member
 
Join Date: Jan 2011
Location: Ecwid headquarters
Posts: 7,857
Default

Quote:
Originally Posted by Laurence Poulin View Post
Thanks Eugene,

I managed to get your script working well within the pages. Pretty amazing stuff.
What I'm trying to do is to display an image on the product page. Tried different ideas but not having much luck. 1. How do I address just the product page. The function(page.PRODUCT) doesn't seem to work for me 2. How would I get an image to appear. I used the amazon address that I took from a gallery for the src. Still don't know enough about javascript but going through the ECHO ECHO Tutorials. What do you think will work inside the API to accomplish my goal of displaying an image on the PRODUCT page?
The example code that is targeting only the product details pages is available in one of my previous replies. You can use it as a strating point, removing the unnecessary parts and adding what you actually need. For the further details, please, let me see the code you have already created.
__________________
Eugene Efimochkin, Team
_________________________
Shipping methods are not showing up? Here is how to set it up properly!
Have a question? Look up the answer at our help portal!

⬇ Click Thanks, please, if this reply helped you.
  #7  
Old 11-03-2011, 12:13 PM
larrypjr's Avatar
larrypjr larrypjr is offline
Junior Member
 
Join Date: Jun 2011
Posts: 23
Default

HI!

Thanks for taking the time to help. I appreciate it a lot.<smile>
What I'm trying to figure out is how to get regular javascript commands to work
on the same page as where we called it.

<script>
Ecwid.OnPageLoaded.add( // an Ecwid JS API call
function(page) { // this is anonymous function constructed right in place, but you use the named functions as well

// it is possible to react on different type of pages in Ecwid and their parameters
if (page.type === 'PRODUCT') {
alert('This code only runs when a product page is open');


document.write("Welcome to my world");

}
}

);

</script>


Good news: This works
Bad news: It opens up and works on a new seperate page

My questions:

1. How do I get it(meaning either a text statement or an image) to work on the same page (ie: 'PRODUCT') instead of opening on a new page as this does. (should I consider opening a window
on the 'PRODUCT' page similar to the alert? Or is there a simpler way?)

2. Is there a recommended way to address the text or image in CSS so that I might be able to style position, color, etc...


3. How do I address just the 'PRODUCT' page without going into an (if then) statment.
ie: page.type Tried function(page.'PRODUCT'). Didn't seem to work.


I realize these are pretty basic questions but important to my simple understandings. Thanks again for your help


<BTW> If anybody else is reading this post I would highly recommend upgrading to the 'SILVER' plan. I just started working with the 'Product Combinations' and it's worth every penny of the upgrade. On top of that, you can get the 'agree to terms' box, and several other great tools for your cart. When you consider the API possibilities there really 'isn't much you can't do' with ECWID. I'm reminded of what my insurance salesman used to tell me about the price: 'Hardly seems enough' <

Last edited by Laurence Poulin; 11-03-2011 at 12:56 PM.
  #8  
Old 11-03-2011, 04:51 PM
Eugene Rimmer's Avatar
Eugene Rimmer Eugene Rimmer is offline
Senior Member
 
Join Date: Jan 2011
Location: Ecwid headquarters
Posts: 7,857
Default

1. You can modify the current page (and even the content generated by Ecwid to represent your store) inside the OnPageLoaded handler function. However, that takes a bit more that just calling document.write() - this construct creates some content that you pass to it via its parameter right there in the place where it was called. This method cannot be called in the event handlers (like the one I suggested to you), AJAX event handlers, timer and interval handlers and other functions of such type; it can only be called inside the plain script tags. Using document.write hence is not a way to modify pages in Ecwid.

The correct thing you need to use is a set of DOM manipulation methods, that allow you to create the HTML markup on the fly as a set of in-memory objects representing the tags and text you wish to use, and then add those nodes to the subtree of elements. This, however, is not an easy task, because DOM methods are somewhat difficult to comprehend and their implementation and availability differs between browsers. To overcome that, there are lots of handy JavaScript libraries, starting with uber-popular jQuery, where the topic of DOM manipulation is expressed with a concise set of cross-browser methods easy to comprehend, understand and use. You may consider using such library, but still it takes some time to learn the ways to work with it.

If you need a professional custom programming service, I can suggest to contact our colleagues at Qualiteam. They can create a custom script on your request of any complexity. Please, contact sales@qtmsoft.com if you are interested.

2. function(page.'PRODUCT') is a syntactically invalid construct in JavaScript language. Invalid constructs don't work.

The reference on correct using the 'function' keyword can be found here: https://developer.mozilla.org/en/Ja...ements/function . The 'function(page) {}' construct means 'lets create a unnamed subprogram, that accepts 1 parameter; lets consider referring to that parameter as "page" variable inside the body of our subprogram'. The 'page' comes into our function typically as an object, containing many different fields. One them is 'type' that represents the type of the page just opened, some of the other fields may appear only when a certain page type is opened. This is why if() constructs are needed - they aren't any bad, they just express the logic of your custom reaction to a certain opened page. You can build up the reaction on different types and other details of Ecwid pages according to your own needs.
__________________
Eugene Efimochkin, Team
_________________________
Shipping methods are not showing up? Here is how to set it up properly!
Have a question? Look up the answer at our help portal!

⬇ Click Thanks, please, if this reply helped you.

Last edited by Eugene Rimmer; 11-04-2011 at 08:43 AM.
  #9  
Old 11-03-2011, 09:05 PM
larrypjr's Avatar
larrypjr larrypjr is offline
Junior Member
 
Join Date: Jun 2011
Posts: 23
Default

Thanks.... OK that gives me additional direction about what to start learning about. Super..... Appreciate your guidance....


Regards
Larry
  #10  
Old 08-28-2012, 01:45 PM
Moviskin's Avatar
Moviskin Moviskin is offline
Junior Member
 
Join Date: May 2011
Posts: 13
Default

Hi Eugene,

I've been getting some strange results when manipulating the page.type === "CART" page with jQuery inside the Javascript API (Ecwid.OnPageLoaded):

When the CART page was displayed, part of the jQuery code seemed not to have worked but when I tested the whole jQuery code within the Firebug-console everything worked ok.

I was just about going nuts when during another test, I saw a glimpse of the CART-page just like I wanted it to be but the next second some already manipulated parts of the page were overwritten again e.g. the original link to the product in the product name.

It just seems that despite of using Ecwid.OnPageLoaded, the page has not been loaded completely?!

Eugene, what do you make out of this?

Thanks and regards,
Roland
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.

Tags
html editor, jquery

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:03 AM.
Powered by vBulletin® Version 3.8.9 Patch Level 1. Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.