Hello!

I've been messing up with bounding box because I don't exactly know how to put a bounding box in a way that everything that is going to be used in the design must be inside that box.

I'm using the Jquery plugin and I would like to have a bounding box inside every view of a product so the user can add text, upload images... INSIDE only the bounding box.

Does anyone have some sort of tutorial or guide? I've only found videos for WooCommerce.

Thank you very much!

May be this can help.

I am doing like this:

var $fpd = $('#fpd'),

        pluginOpts ={customImageParameters: {               

              boundingBox: "Base"

            },

customTextParameters: {               

              boundingBox: "Base"

            }};

var yourDesigner = new FancyProductDesigner($fpd, pluginOpts);

Then in html:

<div id="fpd" class="fpd-topbar fpd-shadow-4 fpd-views-inside-left fpd-top-actions-centered fpd-bottom-actions-centered">

       <div class="fpd-product" title="sometitle" data-thumbnail="preview_image_url">

          <img src="base_image_url" title="Base" data-parameters='{"left": 300, "top": 250, "colors": "#ffffff"}' />

          <img src="layer_url" title="layer2" data-parameters='{"boundingBox": "Base", "colors": "#ffffff"}' />

          <span title="sometext" data-parameters='{"boundingBox": "Base","left": 680, "top": 307}' >your text</span>

      </div>   

</div>

The same title you can use with the nested views.

What is the use of boundingBox property