VERSION 3.1 (Released 11/30/2017)
Classic .asp only
Not version specific = yes
Updater proof = yes
No warranty is expressed or implied.
Not endorsed or provided by ecommerce templates.
This is somewhat based on my tip to change a parameter based on the product or category
https://www.ecommercetemplates.com/support/topic.asp?TOPIC_ID=100929
Except here we want to change a parameter based on the screen width.
For us, the reason is we want to change the order of things on the product detail page for smaller screen widths.
Primarily, there is one of the custom fields we want to show right under the product image. We are using floats to arrange things on the page and no matter what we do with the css, we cannot keep that div under the product image on both smaller screens and larger views.
There may be other parameters you want to set for smaller views as well.
For example, I have seen posts where users want to disable the softcart on mobile screens, but leave it on desktop screens. (this is what is done with the code posted)
It seems like it would be easy, but it's not. You cannot get the screen width before the .asp code runs and loads the page.
Javascript is the easiest way to check the screen size, but that will not happen until the page loads. By then, it's too late to change a parameter setting.
Version 3.1
(3.0)Allows for non javascript users (Visitors who have javascript disabled will not be able to checkout at your store, so that does not seem to be an issue. But we want to be sure search engines can index your product detail pages.)
(3.0)Allows for window resizing. Javascript will "listen" for a window resize and refresh the page after the window resize has stopped. Functionality has been added so as not to tax the server with constant resizing info as the window is being resized (debounce function).
(3.0)Redirect to another page has gone away. Now, the page is not redirected and results in almost immediate results on initial page load.
(3.0)Changed to a cookie versus session variable (nothing significant there really).
(3.1)Issue fixed on some cell phones, scrolling is treated as a "resize" event and page would potentially get caught in a loop - this has been fixed.
Thanks to a few sources
https://www.quirksmode.org/js/cookies.html (working with javascript cookies)
https://davidwalsh.name/javascript-debounce-function (debounce function reduces server load)
How does it work?
This is a combination of .asp and javascript.
The .asp runs when the page loads and checks to see if the user has a cookie set named - scrnsz
If not, it is bypassed and nothing happens there. If there is a cookie, the value (the width of your screen) will be compared to what is set and run whatever we ask it to do. In this case, set a parameter for your store.
Once the page loads, the javascript takes over.
If the cookie has not been set, then we measure the width of your screen and set a cookie with that info and refresh the page so the .asp script can get what it needs to do it's thing. On initial page load, this happens so fast, you really do not notice it.
Once this whole thing has occured, the cookie is set and as the visitor browses, this action does not run any longer.
Next we have added a feature where if the user does resize their window (unlikely, but possible that your visitor might do this) we delete the cookie and refresh the page to make sure the user is getting exactly what we want.
I have two test pages where you can see this working. (visit this link first and see if you notice that the page is being refreshed and let me know if you see any significant lag on initial load) working page showing functionality - http://www.trophykitsdev.com/dev1/proddetail-chngprmt.asp?prod=HEXNUT (soft cart is disabled on screen sizes under 500px wide)
The second page has a few alerts that show you whats happening. It actually shows you your screen width (what is set for the cookie). It has a javascript alert popup when the page refreshes and then the .asp output that shown in the upper left.
Change the screen size to see the info popup.
page with alerts showing the width of your scree and you can see whats happening - http://www.trophykitsdev.com/dev1/proddetail-alert.asp?prod=HEXNUT (soft cart is disabled on screen sizes under 500px wide)
STEP 1Open your proddetail.asp page in your html editor
STEP 2Insert the following in the <head> section of the page
<!-- BEGIN CHECK SCREEN SIZE AND CHANGE PARAMETER ver 3.1-->
<%
scrnresn = Request.Cookies("scrnsz")
if scrnresn >= "500" then
usehardaddtocart=FALSE
elseif scrnresn >= "200" then
usehardaddtocart=TRUE
end if
%>
<script language="javascript">
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
var scrnszval = readCookie('scrnsz');
if (scrnszval == null) {
winsize = window.innerWidth;
createCookie('scrnsz',winsize,0);
location.reload();
}
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
var myEfficientFn = debounce(function() {
eraseCookie('scrnsz');
location.reload();
}, 250);
var currWidth = window.innerWidth;
window.addEventListener('resize', function(){
var nuWidth = window.innerWidth;
if(nuWidth !== currWidth){
myEfficientFn();
}
});
</script>
<!-- END CHECK SCREEN SIZE AND CHANGE PARAMETER ver 3.1 -->
STEP 3Upload to the server.
Set the items in blue to your liking.
500 = Screen width in px
the others are parameters normally set in your includes.
The settings above will give you the softcart on screens wider than 500px and on screens smaller you get no softcart. Feel free to try it on my test page
Drag your screen wide to narrow and add to cart in both instances.
I hope some fellow store owners get some use out of it.
NOTE - The parameter you are changing does not replace the parameter set in your includes. There, you should set the parameter to what you want to happen for a "default" - what happens if javascript is not run on the clients computer.
All Forums
Change parameter based on screen width
Posted - 11/25/2017 : 18:05:50
