radykal | Support Center Chooser

For which product do you need support?

Fancy Product Designer Multistep Product Configurator Another

Start a new topic
Answered

How can I assign a bounding box to a product?

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!


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.

1 Comment

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.

Login or Signup to post a comment