Welcome to the support center for

Fancy Product Designer & Multistep Product Configurator

Answered

write here a useful snippet of code - jquery only for beginner

useful little detail in jquery

(yourDesigner = change this)

--> .js file

//text change button

   $('#textchange').click(function(){

    yourDesigner.setElementParameters ({text: "change text here"}, "object title here");

    return false;

   });

--> html file:
<a href="#" id="textchange" class="fpd-btn">Change it!</a>

write here a useful snippet of code - jquery only

Answer

Vuetify + Fancy Product Designer - at once

---> .js script first

new Vue({

  el: '#app',

  vuetify: new Vuetify() });


--> html Head

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/vuetify@2.4.3/dist/vuetify.min.css'>

---> html Body

<script src='https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js'></script>

<script src='https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js'></script>

<script src='https://cdn.jsdelivr.net/npm/vuetify@2.4.3/dist/vuetify.min.js'></script>

---> html example

<div id="app">

  <v-app id="inspire">

    <div>

      <v-alert

        border="top"

        color="red lighten-2"

        dark

      >

        I'm an alert with a top border and red color

      </v-alert>

     </div>

  </v-app>

</div>

Add element
(yourDesigner and icon.png = change this)


---> .js script


$('#new1').click(function(){

    yourDesigner.addElement('image', 'icon.png', 'Image Title', {autoCenter: true, draggable: true});

    return false;

});


Login or Signup to post a comment