0

I would like to have a section on my product page where customers can view my products using Turn.js (if there are any other similar plugins let me know!). I currently have an empty block setup. enter image description here

Is there a way to implement turn.js into that block? The end goal is to upload a couple of images for each one of my products and have it displayed there.

If you need more information feel free to ask!

1 Answer 1

0

I ended up created a custom module where my xml layout (catalog_product_view.xml)

<referenceBlock name="content">
    <block class="custom\module\Block\Product\Downloads" name="downloads.tab" as="downloads"
           template="custom_module::downloads.phtml"
           after="product.info.media"
           before="product.info.details">
    </block>
</referenceBlock>

then I added turn.js plugin

created a js file flipbook.js

web>js>turn.js

web>js>flipbook.js

define([
    'jquery',
    'uiComponent',
    'Sebwite_ProductDownloads/js/turn'
], function($) {
    'use strict'
      var module = {

    init: function(id) {
      var me = this;


      // if older browser then don't run javascript
      if (document.addEventListener) {
        this.el = document.getElementById(id);
        this.resize();
        this.plugins();

        // on window resize, update the plugin size
        window.addEventListener('resize', function(e) {
          var size = me.resize();
          $(me.el).turn('size', size.width, size.height)
        });
      }
    },
    resize: function() {
      // reset the width and height to the css defaults
      this.el.style.width = '';
      this.el.style.height = '';


      var ratio = 2;
      var f = $('.swatch-attribute-selected-option')[0].innerHTML;
      console.log(f)

        switch(f) {
          case 'Square Hardback':
          ratio = 2;
          break;
          case 'Standard Softback':
          case 'Large Softback':
          case 'Large Hardback':
          ratio = 1.5;
          break;
          case 'Landscape Hardback':
          ratio = 2.66;
          break;
          default: 
          ratio = 2;
        }

      var width = this.el.clientWidth,
        height = Math.round(width / ratio),
        padded = Math.round(document.body.clientHeight * 0.9);

      // if the height is too big for the window, constrain it
      if (height > padded) {
        height = padded;
        width = Math.round(height * ratio);
      }
      // set the width and height matching the aspect ratio
      this.el.style.width = width + 'px';
      this.el.style.height = height + 'px';

      return {
        width: width,
        height: height
      };
    },
    plugins: function() {
      // run the plugin
      $(this.el).turn({
        gradients: true,
        acceleration: true,
        duration: 2000
      });
    }
  };

  module.init('book');
});

Then create

templates>downloads.phtml

and ran a <php foreach($download as $x); ?> to loop through all my images I uploaded

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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