Hooks

System supported developers customize design tool with Hooks Javascript, PHP

 

Javascript Hooks

 

Call Hook

jQuery(document).on("Your_Event", function( event, obj1, object2){
    // your code
    return obj1;
}

 

List Hooks

  1. load.item.design
    Call when load image of product designParameter: [Image, item]

    • image: Object image
    • item: Object value of image with {top, left, right, height, zIndex}
  2. select.item.design
    Call when select one item design (text, cliparts, photo upload…)Parameter: [elment]

    • element: Object
  3. unselect.item.design
    Call when unselect one item design (text, cliparts, photo upload…)
    Parameter: [elment]

    • element: Object
  4. remove.item.design
    Call when remove designParameter: [elment]

    • element: Object
  5. before.create.item.design
    Call before add item designParameter: [elment]

    • element: Object
  6. after.create.item.design
    Call after added item design
    Parameter: [elment]

    • element: Object
  7. name.add.team.design
    Call when add team name
    Parameter: [elment]

    • element: Object
  8. number.add.team.design
    Call when add team number
    Parameter: [elment]

    • element: Object
  9. add.layers.design
    Call when add layer of item design (append html in box layers)
    Parameter: [elment]

    • element: Object
  10. before.add.text.design
    Call before add text
    Parameter:

    • text: Object with values {text, color, fontSize, fontFamily}
  11. after.add.text.design
    Call after added text
    Parameter: [elment]

    • elment: Object
  12. size.update.text.design
    Call when change font, size, outline of text
    Parameter: [width, height]

    • width: int
    • height: int
  13. align.text.design
    Call when align of text
    Parameter: [elment, type]

    • elment: object
    • type: string [left, right]
  14. resize.item.design
    Call when resize text, cliparts, photo upload…
    Parameter: [ui]

    • ul: object {top, left, width, height}
  15. rotate.item.design
    Call when rotate text, cliparts, photo upload…
    Parameter: [ui]

    • ul: object {top, left, width, height}
  16. move.item.design
    Call when move text, cliparts, photo upload…
    Parameter: [ui]

    • ul: object {top, left, width, height}
  17. after.load.design
    Call when load design saved with text, cliparts, photo upload…
    Parameter: [design]

    • design: object
  18. change.product.design
    Call when change product design
    Parameter: [product]

    • product: object
  19. changeView.product.design
    Call when change views front, back, left, right of product
    Parameter: [elment]

    • elment: object
  20. changeColor.product.design
    Call when change color of product design
    Parameter: [elment, index]

    • elment: object
    • index: int
  21. before.save.design
    Call when save design
    Parameter: [data]

    • data: object
  22. after.save.design
    Call after saved design
    Parameter: [data]

    • data: object

 

Code examples:

  1. Create new file tshirtecommerce/addons/js/custom.js
  2. Find your hooks and add your code
jQuery(document).on("before.save.design", function( event, data){
    // your code
    return data;
}