The Product Designer plugin for nopcommerce. for nopcommerce version 3.50

Transcription

1 The Product Designer plugin for nopcommerce for nopcommerce version 3.50

2 Table of Contents 1. Installation Configuration General settings element parameters General settings text parameters General settings custom text parameters General settings custom images parameters Products in panel administration... 18

3 1. Installation Plugin should be installed before use. Unzip downloaded zip file. Copy Widgets.FancyProductDesigner directory to the plugins directory in nopcommerce (to [your nopcommerce website directory]\plugins). Whole content of ProductTemplates directory copy to main store theme directory (e.g. [your nopcommerce website directory\themes\[your main theme]) The installation proces: 1. Login to panel administration -> Configuration -> Plugins > Local plugins 2. Click Reload list of plugins 3. Find plugin: Fancy Product Designer and Click Install 4. Go to: System -> Templates -> Product templates 5. Add new record: Name = Fancy product, ViewPath = ProductTemplate.Fancy -> Update 2. Configuration After installing the plugin go to -> Content Management -> Widgets: 1. Set up Active for Fancy Product Designer plugin. 2. Go to Configure, you will find there general settings of the plugin: - Sidebar horizontal orientation Check it when sidebar should be displayed horizontally instead of vertically in the public store. - Debug JSON data Allow to debug JSON file during configuration process. It is very helpful feature for people familiar with JSON (developers, fancybox specialists) - Image Downloadable (If you want override default settings you should select first checkbox.). Shows customer the Download image button.

4 - Save As PDF (If you want override default settings you should select first checkbox.) - Shows to customer the Save as PDF button. - Allow Product Saving (If you want override default settings you should select first checkbox.) Allows user to save the current showing product. Views will be saved with localstorage. - Resettable (If you want override default settings you should select first checkbox.) Shows the button to reset a product. - Upload designs (If you want override default settings you should select first checkbox.) Users can upload own designs from the menu bar. - Custom text (If you want override default settings you should select first checkbox.) Users can add custom text via the menu bar. Element parameters You can see here Text parameters You can see here Custom text parameters You can see here Custom images parameters You can see here

5 Create Clipart Categories. Create categories for your designs that you would like to use in the sidebar. Just create one or more. You can enable and edit parameters for the selected design. For example you can specify custom prices for each of your designs individually. The single design parameters will overwrite the category parameters if using them. How to create Clipart categories: Click -> Add new -> Next step: click Edit

6 Go to Tab: Cliparts List and Add New

7

8 3. General settings element parameters The default parameters for image and text elements. If you want override default settings you should select first checkbox. Parameter (Type) Explanation Default Value colors (Boolean or string) By default its set to false, this means for an image it will not be converted in a canvas element so it can not be colorized by the user. You can also enter a string with hex color values separated by commas (e.g. ), this will activate a list with static colors. If you want to activate the colorpicker, just enter a string with one hex color value (e.g. '#000000'). Possible values: false false : No colorization for this element, just the image will be used.

9 Parameter (Type) Explanation Default Value "#000000" : A single hexidecimal color value, that enables the colorpicker. "#000000,#ffffff,#990000" : A string with a list of hexidecimal color values, that enables a list with static colors. "TITLE_OF_AN_ELEMENT_IN_THE_FIRST_VIEW" : You can also enter the title of an element in the first view for an element in a sub view. So the color of an element in the sub view is controlled by the color of an element in the first view. removable (Boolean) Set it to true if the element can be removed. false draggable (Boolean) Set it to true if the element can be dragged. false rotatable (Boolean) Set it to true if the element can be rotated. false resizable (Boolean) Set it to true if the element can be resized. false zchangeable (Boolean) Set it to true if the z-position of the element can be changed. false autocenter (Boolean) Centers the element in the stage or bounding box. If you set this parameter to true, you do not need to set a x and y! false replace (String) Replaces an element, if an element is added to stage and another element with the same type and the same replace value is on the stage. '' autoselect (Boolean) Selects the element when its added to stage. false topped (Boolean) Sets the element always on top false price (Number) The additional price for that element. 0

10 Parameter (Type) Explanation Default Value opacity (Number) Sets the opacity of the element. 1 boundingbox (Boolean, string or object) By default its set to false, that means no bounding box. You can also enter a title of another element and the plugin knows that this is the containment for the element. If you want to create a custom bounding box, you can also enter an object with following properties: x,y,width and height. E.g. {"x": 100, "y": 200, "width": 300, "height": 400} false boundingboxclipping (Boolean) Enables the bounding box of the element as mask for it. false originx (String) Sets the origin-x point of the element. Possible values are 'left' or 'center'. center originy (String) Sets the origin-y point of the element. Possible values are 'top' or 'center'. center uploadzone (Boolean) Only for image elements. You can use an image as upload box. Clicking on the image will open the upload dialog. false

11 4. General settings text parameters Default parameters for custom text elements. If you want override default settings you should select first checkbox.

12

13 Parameter (Type) Explanation Default Value font (Boolean String) If false it will use the font from the defaultfont option or set a font name from the fonts array. False textsize (Number) The text size in pixels. 18 patternable (Boolean) Only for text elements. User can choose a pattern for the text element. False fontweight (String) normal'sets the font weight - 'bold' or '. 'normal' fontstyle (String) Sets the font style - 'italic' or 'normal'. 'normal' editable (Boolean) Can the text be edited by the users? True lineheight Sets the line height of the text element. 1 textalign Sets the alignment of the text element. 'left' textbackgroundcolor Sets the background color of the text element. '' textdecoration Sets the decoration of the text element. Possible values: 'underline', 'overline', 'line-through'. '' maxlength The maximum allowed characters, 0 means unlimited characters. 0 curved (Boolean) Makes the text curved. false curvable (Boolean) Can the users switch between normal and curved text? false curvespacing The spacing for curved text. 10

14 Parameter (Type) Explanation Default Value curveradius The radius for curved text. 80 colors (Boolean or string) By default its set to false, this means for an image it will not be converted in a canvas element so it can not be colorized by the user. You can also enter a string with hex color values separated by commas (e.g. ), this will activate a list with static colors. If you want to activate the colorpicker, just enter a string with one hex color value (e.g. '#000000'). Possible values: false false : No colorization for this element, just the image will be used. "#000000" : A single hexidecimal color value, that enables the colorpicker. "#000000,#ffffff,#990000" : A string with a list of hexidecimal color values, that enables a list with static colors. "TITLE_OF_AN_ELEMENT_IN_THE_FIRST_VIEW" : You can also enter the title of an element in the first view for an element in a sub view. So the color of an element in the sub view is controlled by the color of an element in the first view. curvereverse (Boolean) Reverses the direction of the curving. False 5. General settings custom text parameters Parameters for the custom texts. This object will merge elementparameters and textparameters. If you want override default settings you should select first checkbox.

15

16 6. General settings custom images parameters Default parameters for uploaded customer photos. If you want override default settings you should select first checkbox.

17 Parameter (Type) Explanation Default Value minw (Number) minh (Number) maxw (Number) maxh (Number) resizetow (Number) resizetoh (Number) The minimum upload size width in pixels. The minimum upload size height in pixels. The maximum upload size width in pixels. The maximum upload size height in pixels. Resizes the uploaded image to this width, if width is larger than the height. Resizes the uploaded image to this height, if height is larger than the width

18 7. Products in panel administration On each product in the panel administration, plugin creates an additional tab - Fancy design. How to create product: Step by step: 1. After creation of the product Go to TABS Product Info and set Product template: Fancy product Save and Continue Edit product 2. Go to Tab Fancy Design and click Add new First Tab: Fancy Product Designer Options - Description of settings (see previous) Second Tab Views List Product Design Views - Here we create a list of the pages of the product - for example, t-shirt may have two sides - front and back, will be made up of two views. Third Tab Clipart sets Here you can assign the available list of previously created Clipsets (in the configuration) More about tab: VIEWS LIST Create new view Click Add new

19 After Saving click EDIT Now you can create view product for design.

20 Every element placed on the form has properties that can be changed. To save custom settings, don t forget to click button SAVE to make it heppend.

21 How to prepare product design in the panel administration. Product customization in the order process: