Блог

Я только что переключился на новую тему Shopify. Я столкнулся с некоторыми проблемами с кодом, который отлично работает в других моих темах, но не в этой новой, из-за того, как структурирована их тема. В их документации указано использовать следующий прослушиватель событий вместо document.onload и $(document).готово():

 document.addEventListener('page:loaded', function() {
  console.log('page:loaded');
});  

Я не разбираюсь в javascript, и у меня возникли проблемы с тем, чтобы заставить его работать со следующими 2 сценариями. Кто-нибудь может помочь?

 <script type="text/javascript">
    jQuery(document).ready(function($) {
        $('a[data-rel^=lightcase]').lightcase();
    });
  </script>  

 <script>
    window.addEventListener("load", function () {
  var curtains = new Curtains({
    container: "planes-canvas"
  });

  var planeEls = document.getElementsByClassName("planes");

  var vs = `#ifdef GL_ES
  precision mediump float;
  #endif

  // default mandatory attributes
  attribute vec3 aVertexPosition;
  attribute vec2 aTextureCoord;

  // those projection and model view matrices are generated by the library
  // it will position and size our plane based on its HTML element CSS values
  uniform mat4 uMVMatrix;
  uniform mat4 uPMatrix;

  // texture coord varying that will be passed to our fragment shader
  varying vec2 vTextureCoord;

  void main() {
    // apply our vertex position based on the projection and model view matrices
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);

    // varying
    // use texture matrix and original texture coords to generate accurate texture coords
    vTextureCoord = aTextureCoord;
  }`;

  var fs = `
    #ifdef GL_ES
    precision mediump float;
    #endif

    // get our varyings
    varying vec3 vVertexPosition;
    varying vec2 vTextureCoord;

    // the uniform we declared inside our javascript
    uniform float uTime;

    // our texture sampler (default name, to use a different name please refer to the documentation)
    uniform sampler2D planeTexture;


    vec3 hueRotate(vec3 col, float hue) {
        vec3 k = vec3(0.57735, 0.57735, 0.57735);
        float cosAngle = cos(hue);
        return col * cosAngle   cross(k, col) * sin(hue)   k * dot(k, col) * (1.0 - cosAngle);
    }

    vec3 saturate(vec3 rgb, float adjustment) {
        vec3 W = vec3(0.2125, 0.7154, 0.0721);
        vec3 intensity = vec3(dot(rgb, W));
        return mix(intensity, rgb, adjustment);
    }


    void main() {
        // get our texture coords
        vec2 textureCoord = vTextureCoord;

        // displace our pixels along both axis based on our time uniform and texture UVs
        // this will create a kind of water surface effect
        // try to comment a line or change the constants to see how it changes the effect
        // reminder : textures coords are ranging from 0.0 to 1.0 on both axis
        const float PI = 3.141592;

        textureCoord.x  = (
                    sin(textureCoord.x * 12.0   ((uTime * (PI / 15.0)) * 0.031))
                      sin(textureCoord.y * 12.0   ((uTime * (PI / 12.489)) * 0.047))
                    ) * 0.0050;

                textureCoord.y  = (
                    sin(textureCoord.y * 8.0   ((uTime * (PI / 12.023)) * 0.023))
                      sin(textureCoord.x * 8.0   ((uTime * (PI / 15.1254)) * 0.067))
                    ) * 0.0100;

        vec4 color = texture2D(planeTexture, textureCoord);

        // hue rotation from 0 to PI in 10 seconds
        float hueRotation = cos(uTime / 600.0) * PI;
        color.rgb = hueRotate(color.rgb, hueRotation);

        // saturate
        color.rgb = saturate(color.rgb, 2.0);

        gl_FragColor = color;
    }
`;

  var planes = [];

  function handlePlane(index) {
    var plane = planes[index];

    plane
      .onReady(function () {
        // our texture has been loaded, resize our plane!
        plane.planeResize();
      })
      .onRender(function () {
        plane.uniforms.time.value  ;
      });
  }

  for (var i = 0; i < planeEls.length; i  ) {
    var params = {
      vertexShader: vs,
      fragmentShader: fs,
      uniforms: {
        time: {
          name: "uTime",
          type: "1f",
          value: 0
        }
      }
    };

    var plane = curtains.addPlane(planeEls[i], params);

    if (plane) {
      planes.push(plane);

      handlePlane(i);
    }
  }
});

  </script>  

Чтобы этот код работал с новой темой, вам необходимо прослушать пользовательское событие, page:loaded специфичное для этой новой темы, вместо стандартных событий window.onload или $(document).ready() .

Ниже вы найдете свои старые фрагменты кода, адаптированные к новому событию:

• Первый тег скрипта :

 <script type="text/javascript">
   document.addEventListener('page:loaded', function() {
        $('a[data-rel^=lightcase]').lightcase();
    });
  </script>
  

• Второй :

 <script>
document.addEventListener('page:loaded', function() {
  var curtains = new Curtains({
    container: "planes-canvas"
  });

  var planeEls = document.getElementsByClassName("planes");

  var vs = `#ifdef GL_ES
  precision mediump float;
  #endif

  // default mandatory attributes
  attribute vec3 aVertexPosition;
  attribute vec2 aTextureCoord;

  // those projection and model view matrices are generated by the library
  // it will position and size our plane based on its HTML element CSS values
  uniform mat4 uMVMatrix;
  uniform mat4 uPMatrix;

  // texture coord varying that will be passed to our fragment shader
  varying vec2 vTextureCoord;

  void main() {
    // apply our vertex position based on the projection and model view matrices
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);

    // varying
    // use texture matrix and original texture coords to generate accurate texture coords
    vTextureCoord = aTextureCoord;
  }`;

  var fs = `
    #ifdef GL_ES
    precision mediump float;
    #endif

    // get our varyings
    varying vec3 vVertexPosition;
    varying vec2 vTextureCoord;

    // the uniform we declared inside our javascript
    uniform float uTime;

    // our texture sampler (default name, to use a different name please refer to the documentation)
    uniform sampler2D planeTexture;


    vec3 hueRotate(vec3 col, float hue) {
        vec3 k = vec3(0.57735, 0.57735, 0.57735);
        float cosAngle = cos(hue);
        return col * cosAngle   cross(k, col) * sin(hue)   k * dot(k, col) * (1.0 - cosAngle);
    }

    vec3 saturate(vec3 rgb, float adjustment) {
        vec3 W = vec3(0.2125, 0.7154, 0.0721);
        vec3 intensity = vec3(dot(rgb, W));
        return mix(intensity, rgb, adjustment);
    }


    void main() {
        // get our texture coords
        vec2 textureCoord = vTextureCoord;

        // displace our pixels along both axis based on our time uniform and texture UVs
        // this will create a kind of water surface effect
        // try to comment a line or change the constants to see how it changes the effect
        // reminder : textures coords are ranging from 0.0 to 1.0 on both axis
        const float PI = 3.141592;

        textureCoord.x  = (
                    sin(textureCoord.x * 12.0   ((uTime * (PI / 15.0)) * 0.031))
                      sin(textureCoord.y * 12.0   ((uTime * (PI / 12.489)) * 0.047))
                    ) * 0.0050;

                textureCoord.y  = (
                    sin(textureCoord.y * 8.0   ((uTime * (PI / 12.023)) * 0.023))
                      sin(textureCoord.x * 8.0   ((uTime * (PI / 15.1254)) * 0.067))
                    ) * 0.0100;

        vec4 color = texture2D(planeTexture, textureCoord);

        // hue rotation from 0 to PI in 10 seconds
        float hueRotation = cos(uTime / 600.0) * PI;
        color.rgb = hueRotate(color.rgb, hueRotation);

        // saturate
        color.rgb = saturate(color.rgb, 2.0);

        gl_FragColor = color;
    }
`;

  var planes = [];

  function handlePlane(index) {
    var plane = planes[index];

    plane
      .onReady(function () {
        // our texture has been loaded, resize our plane!
        plane.planeResize();
      })
      .onRender(function () {
        plane.uniforms.time.value  ;
      });
  }

  for (var i = 0; i < planeEls.length; i  ) {
    var params = {
      vertexShader: vs,
      fragmentShader: fs,
      uniforms: {
        time: {
          name: "uTime",
          type: "1f",
          value: 0
        }
      }
    };

    var plane = curtains.addPlane(planeEls[i], params);

    if (plane) {
      planes.push(plane);

      handlePlane(i);
    }
  }
});
</script>