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 05-31-2011, 05:14 PM
DigiMkts's Avatar
DigiMkts is offline
 
Join Date: May 2011
Posts: 20
Default

Javascript Problem


I'm using a WordPress site and the first page includes my ECWID cart. When someone visits the page I would like to display some text that should only appear on the home page, at least for now. Because of the way ECWID handles it's own internal linking I added some javascript to detect changes in the url.

However, it seems that document.URL is not detecting the changes that are showing in the browser address, particularly the inclusion of the "#", so I tried php server side variables and realized there was nothing to detect there either.

So what I'm trying to do is deteremine how ECWID works so I can place conditions into the page that contains it and base it upon the output of my ecom shop. I even tried using js to dynamically detect the home page versus other pages and update the css display style, but that is not working either. I suspect that is because the condition that I'm trying to detect doesn't have a valid value.

Is there some way to control the relationship of content outside of ECWID with search results or specific page IDs?
  #2  
Old 05-31-2011, 06:51 PM
Eugene Rimmer's Avatar
Eugene Rimmer Eugene Rimmer is offline
Senior Member
 
Join Date: Jan 2011
Location: Ecwid headquarters
Posts: 7,765
Default

Please, refer to this article for an example of the script that can do what you ask for: http://kb.ecwid.com/w/page/15853292/...d-page-is-open . Also this particular thread can be helpful: http://www.ecwid.com/forums/showthread.php?t=4381

Server-side scripts cannot catch the part of URLs after # symbol, because it is not passed to servers according to network standards; # part is client-side. Ecwid is an AJAX solution, it works purely in your customers browsers, so it utilizes #-based URLs for addressing its pages. So, you also need to use client-side programming (JavaScript)

document.URL seems to be deprecated, and instead it is better to use window.location. So the scripts under the links above use window.location.hash to detect changes of page URL.

Let me know if you need more help.
  #3  
Old 05-31-2011, 07:41 PM
DigiMkts's Avatar
DigiMkts DigiMkts is offline
 
Join Date: May 2011
Posts: 20
Default

I tried window.location, but it still wasn't behaving. I was concerned something else might be affecting it. I tried some very simple tests with alerts and still couldn't get the logic to work. Should be very simple, but for some reason it wasn't working. I was also trying to set the style.display property of the div holding the code I wanted to hide and display and it would accept that either. Very strange.

Here's an example of something I placed in the head just to see what was being returned:
<script>alert(window.location.href);</script>

It pops when I first hit the site, but then if I click around in ECWID it doesn't change so I'm wondering what event I have to use. Do I need some kind of global click listener?

Last edited by ACLLC; 05-31-2011 at 07:45 PM.
  #4  
Old 06-02-2011, 09:59 AM
Eugene Rimmer's Avatar
Eugene Rimmer Eugene Rimmer is offline
Senior Member
 
Join Date: Jan 2011
Location: Ecwid headquarters
Posts: 7,765
Default

Ecwid is an AJAX solution. It works totally in your customers' browsers, without hitting your server with every page transition and without even reloading the page. So, the scripts in the code of the page are executed only once upon loading the page, and you have to listen for events or run some function on timer to get your scripts working continuously with Ecwid.

Now, the part that differs in Ecwid URLs is window.location.hash, so it is most effective to monitor it instead of .href

I encourage you to checkout the scripts given at the links in my previous reply. They readily contain the effective and stable method to work along with Ecwid and monitor its page transitions, that you can use in your custom script right now.

We are also working on the JS API that will make writing mods for Ecwid a lot easier, but it is yet to be released.
  #5  
Old 06-02-2011, 03:09 PM
DigiMkts's Avatar
DigiMkts DigiMkts is offline
 
Join Date: May 2011
Posts: 20
Default

I tried that code you posted for the other person. It should work fine right? I placed it in my head and put a basic div with id="frontpage_text" and no inline style settings, but it doesn't respond. I've tried it in both FF and IE and I can't figure out why the style setting isn't responding.

This is what I used:

<!--- ECWID TEXT CODE --->
<script>
<!--//
function add_cart_text(hash) {
var cart_text = document.getElementById('cart-text');
var frontpage_text = document.getElementById('frontpage-text');
if (cart_text) {
if (hash.indexOf('mode=cart') == -1) {
cart_text.style.display = 'none';
} else {
cart_text.style.display = '';
}
/* this is what added */
if (hash = '' || (hash.indexOf('mode=category') > -1 && hash.indexOf('category=0') > 0)) {
frontpage_text.style.display = '';
} else {
frontpage_text.style.display = 'none';
}
/* end of our modifications */
}
}
//-->
</script>
<!--- /ECWID TEXT CODE --->

</head>

<body>
<div id="frontpage_text"><h1>TEST</h1></div>

I'm using a WordPress site, but there shouldn't be anything preventing the scripts from working as the host I'm using places no restrictions on script use and I have root access to all my php files.

If I place an alert in the page to see what the value is I get null.

<script>alert(document.getElementById('frontpage-text'));</script>

That's why I was trying to figure out if there was something else affecting it.

Just to test things further I alerted the hash:
<script>alert(window.location.hash);</script>

When I hit my home link it resets the page to the root of the domain. Then all my subsequent links are links to ecwid. The hash is changing and the results are coming up, but because the page isn't reloading the scripts aren't firing again.

So do I need the script to be somewhere within ecwid? It hadn't occurred to me that the script is only firing the first time the page loads and there's nothing else calling the function from within ECWID, so of course it won't do anything on subsequent links. Maybe I'm just confused about the placement of things.
  #6  
Old 06-02-2011, 03:23 PM
Eugene Rimmer's Avatar
Eugene Rimmer Eugene Rimmer is offline
Senior Member
 
Join Date: Jan 2011
Location: Ecwid headquarters
Posts: 7,765
Default

Quote:
Originally Posted by ACLLC View Post
I tried that code you posted for the other person. It should work fine right? I placed it in my head and put a basic div with id="frontpage_text" and no inline style settings, but it doesn't respond. I've tried it in both FF and IE and I can't figure out why the style setting isn't responding.

This is what I used:

<!--- ECWID TEXT CODE --->
<script>
<!--//
function add_cart_text(hash) {
var cart_text = document.getElementById('cart-text');
var frontpage_text = document.getElementById('frontpage-text');
if (cart_text) {
if (hash.indexOf('mode=cart') == -1) {
cart_text.style.display = 'none';
} else {
cart_text.style.display = '';
}
/* this is what added */
if (hash = '' || (hash.indexOf('mode=category') > -1 && hash.indexOf('category=0') > 0)) {
frontpage_text.style.display = '';
} else {
frontpage_text.style.display = 'none';
}
/* end of our modifications */
}
}
//-->
</script>
<!--- /ECWID TEXT CODE --->

</head>

<body>
<div id="frontpage_text"><h1>TEST</h1></div>

I'm using a WordPress site, but there shouldn't be anything preventing the scripts from working as the host I'm using places no restrictions on script use and I have root access to all my php files.

If I place an alert in the page to see what the value is I get null.

<script>alert(document.getElementById('frontpage-text'));</script>

That's why I was trying to figure out if there was something else affecting it.

Just to test things further I alerted the hash:
<script>alert(window.location.hash);</script>

When I hit my home link it resets the page to the root of the domain. Then all my subsequent links are links to ecwid. The hash is changing and the results are coming up, but because the page isn't reloading the scripts aren't firing again.

So do I need the script to be somewhere within ecwid? It hadn't occurred to me that the script is only firing the first time the page loads and there's nothing else calling the function from within ECWID, so of course it won't do anything on subsequent links. Maybe I'm just confused about the placement of things.
Notice that in the code you cited in your message there is one mistake: the function add_cart_text is defined, but never called in your code. So it exists in the browser, but never actually gets executed, so it doesn't have any chance to work.

In order to properly call add_cart_text upon each page transition in Ecwid you also need to add the following code to the inside of your <script> tag:

Code:
function poll_hash() {
	if(last_hash !== document.location.hash) {
		last_hash = document.location.hash;
		add_cart_text(last_hash); 
	}
}

setInterval(poll_hash, 100);
This will call add_cart_text upon each page transition in Ecwid, so you will be able to see the effects of add_cart_text.
  #7  
Old 06-02-2011, 03:56 PM
DigiMkts's Avatar
DigiMkts DigiMkts is offline
 
Join Date: May 2011
Posts: 20
Default

Got me...nothing. That timer should be calling the function and it's doing nothing. I called the function from onload() just to make sure it was getting called and stuck an alert to show when it was called. It fired once, but then no subsequent pops. Very strange.

This is how it's set up:

<!--- ECWID TEXT CODE --->
<script>
<!--//
//function add_cart_text(hash) {
//var popped = 0
//if(popped == 0)
//{
//alert('popped...');
//popped = 1;
//}
var cart_text = document.getElementById('cart-text');
var frontpage_text = document.getElementById('frontpage-text');
if (cart_text) {
if (hash.indexOf('mode=cart') == -1) {
cart_text.style.display = 'none';
} else {
cart_text.style.display = '';
}
/* this is what added */
if (hash = '' || (hash.indexOf('mode=category') > -1 && hash.indexOf('category=0') > 0)) {
frontpage_text.style.display = '';
} else {
frontpage_text.style.display = 'none';
}
/* end of our modifications */
}
}

function poll_hash() {
if(last_hash !== document.location.hash) {
last_hash = document.location.hash;
add_cart_text(last_hash);
}
}

setInterval(poll_hash, 100);

//-->
</script>
<!--- /ECWID TEXT CODE --->
</head>

<body><!-- TEST CODE onload="javascript:add_cart_text(hash);" -->
<div id="frontpage_text"><h1>TEST</h1></div>
  #8  
Old 06-02-2011, 04:04 PM
Eugene Rimmer's Avatar
Eugene Rimmer Eugene Rimmer is offline
Senior Member
 
Join Date: Jan 2011
Location: Ecwid headquarters
Posts: 7,765
Default

Now the part of your code that defines function add_cart_text is commented out. In this situation poll_hash tries to execute add_cart_text, but it doesn't exist and in some browsers JS execution stops, in others you get 10 errors per second in error console. Remove the '//' before the 'function add_cart_text(hash)' to uncomment it.
  #9  
Old 06-02-2011, 10:30 PM
DigiMkts's Avatar
DigiMkts DigiMkts is offline
 
Join Date: May 2011
Posts: 20
Default

Sorry, that part actually isn't commented out. I just commented it out by mistake when I was pasting my code in.
  #10  
Old 06-03-2011, 11:09 AM
Eugene Rimmer's Avatar
Eugene Rimmer Eugene Rimmer is offline
Senior Member
 
Join Date: Jan 2011
Location: Ecwid headquarters
Posts: 7,765
Default

Can I see the exact webpage where you try that code?
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
javascript

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