1

I'm a newbie and trying to see achieve certain things in magento.

I'm trying to make a snow effect on a magento site, I have it running well on a normal html site.

I've added the javascript files to puclic_html/js and also added an inline javascript code to configuration - design - html head - miscellenous –

I placed the snow png image in a separate image folder puclic_html/iamges

After doing all these, I can't see the snow effect. Is there a proper way of adding these files?

These are the codes for the Inline javascript code

            <script type="text/javascript" src="js/ThreeCanvas.js"></script>
            <script type="text/javascript" src="js/Snow.js"></script>
            <script>
            document.addEventListener('DOMContentLoaded',init);
            var SCREEN_WIDTH = window.innerWidth;
            var SCREEN_HEIGHT = window.innerHeight*3;
            var container;
            var particle;
            var camera;
            var scene;
            var renderer;
            var mouseX = 0;
            var mouseY = 0;
            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;
            var particles = [];
            var particleImage = new Image();//THREE.ImageUtils.loadTexture( "images/ParticleSmoke.png" );
            particleImage.src = 'images/ParticleSmoke.png';
            function init() {
            container = document.createElement('div');

            document.body.appendChild(container);
            camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
            camera.position.z = 1000;
            document.getElementById("container").style.position="absolute";
            document.getElementById("container").style.margin="auto";
            document.getElementById("container").style.width="100%";
            document.getElementById("container").style.zIndex = "1"; 
            document.getElementById("container").style.marginBottom = "20px"; 
            scene = new THREE.Scene();
            scene.add(camera);
            renderer = new THREE.CanvasRenderer();
            renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
            var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(particleImage) } );
            for (var i = 0; i < 500; i++) {
            particle = new Particle3D( material);
            particle.position.x = Math.random() * 2000 - 1000;
            particle.position.y = Math.random() * 2000 - 1000;
            particle.position.z = Math.random() * 2000 - 1000;
            particle.scale.x = particle.scale.y = 0.5;
            scene.add( particle );
            particles.push(particle);
            }
            container.appendChild( renderer.domElement );
            document.addEventListener( 'mousemove', onDocumentMouseMove, false );
            document.addEventListener( 'touchstart', onDocumentTouchStart, false );
            document.addEventListener( 'touchmove', onDocumentTouchMove, false );
            setInterval( loop, 1000 / 60 );
            }
            function onDocumentMouseMove( event ) {
            mouseX = event.clientX - windowHalfX;
            mouseY = event.clientY - windowHalfY;
            }
            function onDocumentTouchStart( event ) {
            if ( event.touches.length == 1 ) {
            event.preventDefault();
            mouseX = event.touches[ 0 ].pageX - windowHalfX;
            mouseY = event.touches[ 0 ].pageY - windowHalfY;
            }
            }
            function onDocumentTouchMove( event ) {
            if ( event.touches.length == 1 ) {
            event.preventDefault();
            mouseX = event.touches[ 0 ].pageX - windowHalfX;
            mouseY = event.touches[ 0 ].pageY - windowHalfY;
            }
            }
            //
            function loop() {
            for(var i = 0; i<particles.length; i++)
            {
            var particle = particles[i];
            particle.updatePhysics();
            with(particle.position)
            {
            if(y<-1000) y+=2000;
            if(x>1000) x-=2000;
            else if(x<-1000) x+=2000;
            if(z>1000) z-=2000;
            else if(z<-1000) z+=2000;
            }
            }
            camera.position.x += ( mouseX - camera.position.x ) * 0.05;
            camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
            camera.lookAt(scene.position);
            renderer.render( scene, camera );
            }
            </script>
1

If you want to add external javascript at all page. You need to follow this step.

Careat local.xml in app/design/forntend/theme/layout/local.xml

Add your jacascript inside section as below example.

<?xml version="1.0"?> 
<layout version="0.1.0">
    <default>
        <reference name="head">
            <!-- Put your js in skin/frontend/package/your-theme/js -->
            <action method="addItem"><type>skin_js</type><name>ThreeCanvas.js</name></action>
            <action method="addItem"><type>skin_js</type><name>Snow.js</name></action>
            <!-- Put your js in js folder on root -->  
            <action method="addJs"><script>ThreeCanvas.js</script></action> 
        </reference>
    </default>
</layout>

And remove code where you have include javasciprt for ex

Put your javascript in following dir skin/forntend/theme/js dir also add images in following dir skin/frontend/theme/image dir.

Make sure change image path as per define in css.

0

If you want to add js/css in all pages , create local.xml in your package/theme/layout folder and add code as below.

<?xml version="1.0"?> 
<layout version="0.1.0">
    <default>
        <reference name="head">
            <!-- Put your js in skin/frontend/package/your-theme/js -->
            <action method="addItem"><type>skin_js</type><name>ThreeCanvas.js</name></action>
            <action method="addItem"><type>skin_js</type><name>Snow.js</name></action>
            <!-- Put your js in js folder on root -->  
            <action method="addJs"><script>ThreeCanvas.js</script></action> 
        </reference>
    </default>
</layout>

and remove below lines from your inline js

<script type="text/javascript" src="js/ThreeCanvas.js"></script>
<script type="text/javascript" src="js/Snow.js"></script>

OR

add full path of js file in your inline script

 <script type="text/javascript" src="fullpath.../ThreeCanvas.js"></script>
 <script type="text/javascript" src="fullpath.../Snow.js"></script>
  • I've tried using with the full path but it didn't work. Let me try creating the local.xml – Jahswey Dec 2 '15 at 11:26
  • yes local.xml will be good solution – Minesh Patel Dec 2 '15 at 11:30
  • Hi Minesh, thank you for this. Can I please ask where I need to create the xml file? – Jahswey Dec 2 '15 at 13:17
  • design/frontend/your-package/your-theme/layout – Minesh Patel Dec 2 '15 at 13:23
  • design/frontend/rwd/default/layout if you are using default – Minesh Patel Dec 2 '15 at 13:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.