How can I assign a bounding box to a product?

Posted over 6 years by Mario

Post a topic
Answered
M
Mario

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!

0 Votes

s

sarita verma posted about 6 years Best Answer

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.

0 Votes


2 Comments

Sorted by
R

Ramesh posted over 3 years

What is the use of boundingBox property

0 Votes

s

sarita verma posted about 6 years Answer

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.

0 Votes

Login or Sign up to post a comment