Home App Docs Blog Github

Different Script on mobile vs Desktop

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link

Builder public api key
928d63466d724a5e993ac04767993e61

What are you trying to accomplish
I am trying to get a different script to run on desktop vs mobile. Can you please help with this? Here is what I have tried but it is not working

<script>
if (navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i)) {      
<script src="//foursixty.com/media/scripts/fs.embed.v2.5.js" data-feed-id="prive-revaux" data-theme="sizes_v2_5" data-open-links-in-same-page="true" data-connector-filter="32769,33085" data-category-filter="Homepage" data-page-size="6" data-proceed-url="/checkout" data-use-app-proxy="true"></script>
} else {
<script src="//foursixty.com/media/scripts/fs.embed.v2.5.js" data-feed-id="prive-revaux" data-theme="sizes_v2_5" data-open-links-in-same-page="true" data-connector-filter="32769,33085" data-category-filter="Homepage" data-page-size="7" data-proceed-url="/checkout" data-use-app-proxy="true"></script>
}
</script>

I have also tried this and it is not working:

<script>
if (screen && screen.width > 900) {
document.write('<script src="//foursixty.com/media/scripts/fs.embed.v2.5.js" data-feed-id="prive-revaux" data-theme="sizes_v2_5" data-open-links-in-same-page="true" data-connector-filter="32769,33085" data-category-filter="Homepage" data-page-size="7" data-proceed-url="/checkout" data-use-app-proxy="true"></script>');
}
</script>

<script>
if (screen && screen.width < 900) {
document.write('<script src="//foursixty.com/media/scripts/fs.embed.v2.5.js" data-feed-id="prive-revaux" data-theme="sizes_v2_5" data-open-links-in-same-page="true" data-connector-filter="32769,33085" data-category-filter="Homepage" data-page-size="6" data-proceed-url="/checkout" data-use-app-proxy="true"></script>');
}
</script>

Code stack you are integrating Builder with
javascript

@nevin where are you trying to add this code? I do not see it on the page you linked to…you could always try to inject it in the Edit JS+CSS following this pattern: Add or Insert a Script Tag with Builder

Otherwise are you adding these scripts as a custom code block on the page?

Finally, what exactly is this script trying to accomplish? Is it possible we could accomplish the same results through other means?

Yes, I was trying to put this into a custom code block - the one that looks like this one here:

Does that Edit JS+CSS section apply to the entire page or just that block?

Yes, all we are trying to do is make 6 images display on mobile vs the 7 on desktop. The one script loads 6 images and the other loads 7 images as you can see with the different parameters.

@nevin apologies for delay I for some reason did not get a notification of your reply. To answer your question, the Edit JS+CSS section is for the entire page. I think there are a few ways you could do this…You could add 2 custom code elements, one for the mobile version and one for desktop and then use our responsive design tools to hide/show as appropriate

Or you could use the 7 tile desktop version of the script and then within the JS+CSS add some code to hide / show the last image based on window size?

Those might be a bit more reliable, try them out and let me know if you are able to find an option that works for you!