Coloring of shapes (SVG images) implemented.
- coloring is only possible when the SVG motif inserted in Canvas is selected/clicked.
One-Stop-Shop (OSS) - EU 2021 VAT procedure implemented in the option surcharges - see description in the manual.
https://docs.google.com/document/d/1R7hjPmrQA_prgWIXbUpgElOrpqq7EUNjXw1UkdiRo6w/edit?pli=1#heading=h.ckz6mtkka8a5
New extended (optional) default parameters for single-line texts:
1. fixedWidth
To be used in conjunction with the default parameter "maxWidth". If fixedWidth is defined and e.g. identical to the value of "maxWidth" (i.e. "maxWidth":500, "fixedWidth":500) and fixedFontSize (see below) is not defined or equal to 0, then the text will be automatically reduced/adjusted to fixedWidth when maxWidth or fixedWidth is exceeded, namely by reducing fontSize (because fontSize was not fixed).
2. fixedFontSize
To be used in conjunction with maxWidth. If fixedFontSize is defined in addition to fixedWidth e.g. identical to the value of fontSize, then no automatic adjustment of the text length to the fixedWidth is done - but a warning is shown that the text is too long and the shopping cart button is blocked so that the overlong text cannot be ordered.
New extended (optional) default parameters for "Upload" files (bitmaps, logos):
"insertAfterUpload":true/false.
Automatically insert the image/logo into the design area (in canvas) after upload, yes or no. If "insertAfterUpload":false (= no), then the image must still be clicked with mouse after upload, so that it is inserted into the design area. If this parameter is not specified, "false" is assumed for compatibility with all previous configurations (do not insert automatically).
Parameters for more precise positioning of the upload image:
"originX": "left/center/right".
Determines the horizontal position of the base point (insertion point) from the upload image to be inserted: left/center/right
"originY": "top/center/bottom"
Sets the vertical position of the base point (insertion point) of the upload image to be inserted: top/center/bottom
"right":numeric value in pixels for distance to the right canvas edge.
Sets the distance from the base point of uplaod image to the right edge of the design area (to the right canvas edge).
Example of the new default parameters in the "Upload Images" field:
{"o_upload":{"width":0, "height":293, "right":60, "top":207, "originX":"right", "originY":"center", "zindex":"forward", "insertAfterUpload":true}}
The defaults mean that the upload image will be scaled to the height of 293 pixels and automatically inserted to the right after upload. The base point of the image is rightmost horizontally and centered vertically.
This base point is positioned exactly 60 pixels from the right edge and 207 pixels from top edge of the canvas or the image is inserted according to this default (centered and right-justified).
Extended information (max/rest characters) under the TEXT input fields.
IMPORTANT:
The new "extended information" only works in conjunction with the "Product Configurator" from version 3.9.39 - see changelog for "Product Configurator".
The "extended information" below the TEXT input field is optional and only appears if the new default parameter "maxrestView":true (in the default JSON for designer text) has been explicitly set. e.g.:
{"o_text1":{"maxrestView":true, "content":"Mein Text", "checkoutView_fontcolor":0, "checkoutView_fontsize":0, "fontFamily":"roboto-bold-italic", "fontFamilyName":"Roboto BOLD ITALIC", "fontFile":"roboto-bold-italic.woff", "fontSize":75, "fontColor":"rgb(255,33,0)", "fontColorName":"hellrot", "center":true, "left":0, "top":0, "margin-top":0, "margin-left":0, "angle":0, "maxWidth":450}}
Otherwise, the "extended information" will not be displayed.
New default parameters for lettering to control display of font data in price calculation and checkout:
1. "checkoutView_font":0 /* no display of font name */
2. "checkoutView_fontcolor":0 /* no display of font color */
3. "checkoutView_fontsize":0 /* no display of font size */
To be defined in Article > Designer Defaults > Lettering Defaults > "Text (single-line)" or "Textbox (multi-line)":
If these parameters are not used/declared at all, the default display of all font data will be - as before.
These parameters have the value=1 by default. Only by using the parameters and setting them to 0 the font data display can be
can be shortened individually.
Example for text defaults - "font color" and "font size" are not displayed in price calculation and checkout:
{"o_text1":{"content":"Mein Text", "checkoutView_fontcolor":0, "checkoutView_fontsize":0, "fontFamily":"roboto-bold-italic", "fontFamilyName":"Roboto BOLD ITALIC", "fontFile":"roboto-bold-italic.woff", "fontSize":75, "fontColor":"rgb(255,33,0)", "fontColorName":"hellrot", "center":true, "left":0, "top":0, "margin-top":0, "margin-left":0, "angle":0, "maxWidth":450}}
Canvas problem with texts, images, shapes and upload files to which blacklist/whitelist (dependencies) were applied was fixed.
- if e.g. a text should be inserted in Canvas but then deactivated by Blacklist, the text remained wrongly in Canvas,
- this problem affected e.g. configurations in which the canvas should be optionally provided either with its own text or with its own upload logo
Bug in the "round text" (data type "designer-curved-text") fixed.
- the error occurred only when a "round text" was deleted in the input field,
- this error was now caught in the framework for "round texts".
Default parameter "angle" for texts can now also (optionally) be used in round texts (data type "designer-curved-text").
1. Fixing for option groups with images where no default-image has been defined.
2. Fixing for manual text scaling when a background image is also used in the design area.
If no background image is required, a background color for the design area/canvas can be predefined as an alternative, with the default parameter "backgroundColor" e.g.
Design layout defaults:
Canvas-Layout = {"width":1000,"height":300,"backgroundColor":"rgb(200,200,200)","export":"png","filter":"multiply"}
1. Adjustments to "Product Configurator" minor update 5.9.0 (to "Blackoptions").
2. Touch scrolling over the design area (via canvas) in mobile devices has been enabled (allowTouchScrolling=true).
New default parameter for motifs/images and upload images "lockScalingFlip":true (optional, Boolean).
The parameter determines whether mirroring/fliping of the motif/upload image should also be possible when scaling, if the motif is clicked in the design area and scaled in negative direction.
true = the mirroring when scaling motif/upload image is blocked.
false = the mirroring when scaling motif/upload image will not be blocked. The customer can click on the image, move/scale it in negative direction and mirror/flip the image around X or Y axis.
Please note: only if parameter "hasControls":true, settings in this parameter will take effect.
Default = true if the parameter is not specified.
Additional custom default parameter "custom_id" for "upload images" Designer defaults.
"custom_id": "my_id" is appended to the upload image in the canvas design internally and exported, so this parameter may be used in post-processing.
The parameter is used in the "id" of the upload file - this can be especially useful in SVG files, as the "id" is displayed in post-processing.
ATTENTION: The parameter "custom_id" replaces the parameter "custom" in the update 3.3.7
1. The visibility of the texts can be switched in canvas with the properity key "visible" as needed in a formula.
2. The placement of the canvas above the product image is no longer set to "STICKY" because it caused problems.
3. New default parameters for textbox (multiline text = data type "designer-textbox"):
- "maxLines" (optional, integer).
Used to limit the number of lines.
If not specified or maxLines=0 is set, the textbox can have any number of lines. The amount of text in the text box is then limited only by the number of characters. Maximum number of characters (= text length) must be specified in the CSV record (in "Field5").
- "splitByGrapheme" (0ptional, boolean false or true)
Serves the "hard line break" when reaching the given text box width (e.g. "width":400).
Normally, the line is wrapped whenever the last whole word entered does not fit into the given width. The default "splitByGrapheme":true breaks this word in the middle, so that part of the word is wrapped in one line and part in the next line.
If not specified, the line will be wrapped only for whole words, "splitByGrapheme":false
4. Additional custom default parameter "custom" for "upload images".
"custom":"my value" will be appended to the upload image in the canvas design internally and exported, so this parameter may be used in post-processing.
1. Developer jQuery API extended - more "publish" entry points for external jQuery modules.
2. New "$price" variable/placeholder for surcharge in Field3 (CSV record field "Title").
The deleted upload file (if already inserted in Canvas) will also be removed in Canvas.
Grid setting also for small displays (phones up to 400px). The grid setting applies to Images, Shapes (SVG's), Colors and (new) Backgrounds galleries and displays the selection of images (thumbnail images or color areas) evenly arranged in the configuration container. Recommended size of thumbnails (mini images) is 200-300px. Shapes (SVG's) do not have to be scaled to thumbnail size - but it would be recommended.
1. Multiple insertion of shapes (SVG's) was fixed.
2. Scaling of texts is fixed.
Error fixing when using shapes (images and SVG's) if no image is given.
1. New configuration settings in option groups for grid display:
- Grid Columns
- Grid Spacing
These settings are used to improve the appearance of the following data types:
- Images
- Colors
In order not to endanger the existing optics, the defaults for grid columns and grid spacing are set in such a way that they are not taken into account. However, as soon as a number of columns greater than 1 is set for images or colors, a grid display is generated in which the images or colors are evenly distributed over the full or available container width. respectively available container width.
2. Small fixing in "textbox" handling.
Adapting the behavior of text boxes to the proven behavior of single-line texts:
- when textbox input is cleared, the text of the textbox disappears in the price calculation and also in the design area
- Text boxes that are in dependencies now also behave correctly like single-line texts
1. Improved behavior of upload captions linked to ClipPath.
2. New default parameter for all captions: "checkoutView": "minimal/all" (described in the manual).
3. Improvement of the initial behavior of text boxes (only in very special cases).
4. Update to the current canvas framework fabric.js (version 4.3).
The selected object (motif, logo, text) in the designer area (canvas) is no longer brought to the front.
Extension of the defaults and properties for texbox (datatype "designer-textbox"):
1. Width of the textbox e.g. "width":350 (width of the textbox = 350px)
- If width is not specified, the canvas width is used instead
- Textbox width prevents entered text from wrapping at spaces
2. Size of the line spacing e.g. "lineHeight":1.2 (line spacing = text height * 1.2)
- If "lineHeight" is not specified, lineHeight=1 is used instead (= standard line spacing)
- Values smaller than 1 e.g. 0.5 reduce the line spacing
3. "ClipPath" is taken into account.
4. "zindex" is taken into account.
Full compatibility of Javascripts with IE11 (ES5/Shopwares Grunt) fixed.
Error while inserting background motifs was fixed.
1. The common server directory "/files/bogx_product_configurator/common_images/".
now also works for all designer themes and background files ("shape", "shape_img" and "background"),
as main storage location or as fallback storage location. When a motif file is used as a designer default,
then you can use the additional parameter "dir": "common" to specify that this file is stored in the "common" directory
should be sought.
2. The datatype "text_box" is now linked to a HTML object "textarea" and integrated in the designer. From now on
multiline texts are also possible with this data type.
3. The data type "shape" (SVG graphics) with default parameter "center":true is also inserted in the center of the design area.
4. The values of the designer defaults (e.g. text defaults) are better integrated in the product configurator, so that these
are immediately displayed correctly in the price calculation.
5. "Lazy Loading" now also works for all motif files (for all designer images).
6. The default parameters "minScale" and "maxScale" (to limit the motif scaling) are no longer supported - please
no longer use.
The movement of inserted objects in the design area (canvas) is no longer limited to the canvas borders.
1. Optimization of the tooltip icons: plain SVG is used instead of embedded SVG to reduce the loading time for extensive configurations.
2. Compatibility with Shopware's "Composer-Project" instances/installations.
3. New functionality: "Variants-Background-Changer
- flexible and optional (in designer defaults) adjustable
- desired article variant images can be used/activated as canvas backgrounds
- the canvas backgrounds change automatically when changing the variant
4. The "design area" is saved as "Canvas JSON" in the order.
- "Canvas JSON" can be converted to any print/production format, e.g. PDF or DXF
- it is planned to use "Canvas JSON" also for repeat orders
MINOR UPDATE
1. The new feature "Clipping" with the following options:
- definition of ClipPath masks
- ClipPath masks are closed printable/designable areas in SVG format
- multiple ClipPath masks as simple (rectangle, circle) or completely individual shapes/paths
- any assignment of ClipPath masks to the design area and/or motifs and/or texts
- masks can also be used to limit the printable/shapable area
- outside the masks, the assigned objects are not visible
- non-printable area (outside the mask) can be hidden completely or partially (with opacity)
2. Update of the canvas framework (fabric.js) to the current version 4.1.0
3. Designer area resizing optimized.
4. Optimized empty text presets.
5. Font size of manually scaled texts is dynamically transferred to configuration data
ATTENTION IMPORTANT:
Please reinstall the plugin in the Plugin Manager (click 1x "reinstall" button), your data will NOT be lost.
Small template adjustments for the new function "ORDER CODE BUILDER".
Optimization of borderless lettering.
Small adjustment in the rendering of the design area. In case the text input and text colors (in the lettering) are not immediately visible.
1. New feature "Motif Grouping"
- new default settings and parameters for motifs: "mode" and "grouplist
-- "mode": "group"
-- "grouplist":["o_motif1", "o_motif2", "o_motif3", ...]
The "grouping" allows a larger selection of thematically divided motifs. If motifs have to be grouped together for better
overview thematically (defined in separate option groups), it was previously possible to create a click on a theme/option group
and insert it into the design area. The motifs in the design area were not exchanged but newly inserted and so it was possible
to insert several motifs in the design area, which were not desired, since there should be only one motif. The grouping now
connects arbitrary motif themes/option groups and it only one motif from the whole group (from several themes) can be inserted
into the design area at a time.
2. Improving the dependency in groups and option groups of the Designer.
3. Optimization for loading SVG motifs
1. Adaptation of the round texts to the updated canvas framework.
2. Adaptation of the texts with "MaxWidth" default to the updated canvas framework.
1. Update of the canvas framework to current version 3.6.3
2. Optimization of the logic for round texts.
3. Optimization of the logic for multi-line texts.
New data types "text_date" (date) and "text_time" (time)
- Validation of date and time entries via the intuitive/modern HTML5 standard
- Insert into the design area as text lines, analogous handling as for "font_text
Default parameter zindex for motifs and upload images modified and further extended:
"zindex": "back" (set it to the back)
"zindex": "front" (set to the front)
"zindex": "backward" (move backward behind the first found image)
"zindex": "forward" (move forward of the first found image)
The default parameter "zindex" for motifs and upload files extended to better control the order of the motif and upload files in the design area.
- "zindex":"backward" (set to the back)
- "zindex":"forward" (put forward)
1. The property "fontSize" is now also assigned to the text elements individually (in addition to the already existing "fontFamily" and "fontColor")
2. New default parameter "zindex" for motifs has been implemented to better control the order of the motif layers in the design area.
Visibility change of the motifs has been improved.
1. Fixed an error with motifs without default to the file name
2. Fixed an error when selecting backgrounds.
Improved internal multi-layer placement for shape images.
Optimizing the allowed width of text lines with the JSON parameter "maxWidth". This parameter does not make the text line wider and, if necessary, automatically reduces the text height so that the extra-long text also fits into the available width.
Major update with essential extension of the functionality for product personalization and visualization.
1. Texts
- Several normal text lines, and/or several rounded texts and/or several text boxes
- Extended default parameters per line/text type
- Required lines or optional lines can be defined
- Dynamical assignment of text properties (font, color, font size) per line
- Texts in the design area can be edited (move, rotate, scale), depending on the defined "controls" (parameter settings)
2. Motifs (images or shapes)
- Several motifs: Images (.png and .jpg) and/or shapes (.svg)
- Extended default parameter per motif group
- Motifs in the design area can be edited (move, rotate, scale), depending on the defined "controls" (parameter settings)
- Motifs can be easily deleted (click the selected image in the selection again - similar to a checkbox)
- If a motif selection is defined as required, the product cannot be ordered if a motif is not inserted in the canvas
3. Default setting for displaying the personalized designer image in the shopping cart: original product image or designer image
4. A new (german) manual for designers will be released soon, all updated examples in the DEMO Shop, for example here:
NOTE: If you are using an older Designer version, we strongly recommend that you first update in the test environment
to be carried out! There may be inconsistencies in the designer defaults, as these have been essentially extended.
Example for the new text defaults:
For one line of text:
{"o_text1":{"content":"SUPREME", "fontFamily":"roboto-bold-italic", "fontFamilyName":"Roboto BOLD ITALIC", "fontFile":"roboto-bold-italic.woff", "fontSize":50, "fontColor":"rgb(255,33,0)", "fontColorName":"08 - hellrot", "center":true, "left":0, "top":0, "margin-top":90, "margin-left":0, "angle":0, "maxWidth":500, "hasControls":true, "hasBorders":true, "hasRotatingPoint":false, "lockMovementX":true, "lockMovementY":false, "lockRotation":true, "lockUniScaling":true}}
For three text lines:
{"o_text1":{"content":"SUPREME", "fontFamily":"roboto-bold-italic", "fontFamilyName":"Roboto BOLD ITALIC", "fontFile":"roboto-bold-italic.woff", "fontSize":50, "fontColor":"rgb(255,33,0)", "fontColorName":"08 - hellrot", "center":true, "left":0, "top":0, "margin-top":90, "margin-left":0, "angle":0, "maxWidth":500, "hasControls":true, "hasBorders":true, "hasRotatingPoint":false, "lockMovementX":true, "lockMovementY":false, "lockRotation":true, "lockUniScaling":true}, "o_text2":{"content":"different line", "fontFamily":"opensans-regular", "fontFamilyName":"Open Sans REGULAR", "fontFile":"opensans-regular.woff", "fontSize":30, "fontColor":"rgb(0,0,0)", "fontColorName":"02 - schwarz", "center":true, "left":0, "top":0, "margin-top":130, "margin-left":0, "angle":0, "maxWidth":500, "hasControls":true, "hasBorders":true, "hasRotatingPoint":false, "lockMovementX":true, "lockMovementY":false, "lockRotation":true, "lockUniScaling":true}, "o_text3":{"content":"Great Font", "fontFamily":"greatfont-regular", "fontFamilyName":"Great Font Regular", "fontFile":"greatfont-regular.woff", "fontSize":130, "fontColor":"rgb(0,0,0)", "fontColorName":"02 - schwarz", "center":true, "left":0, "top":0, "margin-top":250, "margin-left":0, "angle":0, "maxWidth":500, "hasControls":true, "hasBorders":true, "hasRotatingPoint":false, "lockMovementX":true, "lockMovementY":false, "lockRotation":true, "lockUniScaling":true}}
For one motif/picture:
{"o_motivs":{"mode":"select", "src":"car01_640.jpg", "width":0, "height":290, "left":0, "top":0, "margin-left":0, "margin-top":-100, "angle":0, "center":true, "hasControls":true, "hasBorders":true, "hasRotatingPoint":false, "lockMovementX":true, "lockMovementY":false, "lockRotation":false, "lockUniScaling":true, "minScale":0, "maxScale":0, "flipx":"0", "flipy":"0", "color":"", "colorName":""}}
Small modifications for the new configurator API
- Improved overview of the Designer defaults. Preparation for extending the functionality of: lettering and images.
- New default field "upload images" In this field you can enter defaults for the new function "multiupload images".
Example for the defaults (json format):
{"o_upload":{"height":290, "left":287, "top":630, "angle":0, "hasControls":true, "hasBorders":true, "hasRotatingPoint":false, "lockMovementX":true, "lockMovementY":false, "lockRotation":false, "minScale":0.5, "maxScale":1}}
Legend:
- "o_upload" = Option group ID with the new datatype "multiupload-designer" - here the addon "Multiupload" is required.
- "height" = height of the upload image in pixels to which the image will be scaled/reduced in the design area.
- "width" = can be used instead of "height. In this case the image will be scaled/reduced to the specified width (in pixels) in the design area.
ATTENTION: Please use either "height" or "width" - the use of both parameters does not fulfill the expected purpose, because always set to the first and then
is scaled to the other value.
- "left" = distance of the left edge of the image from the left edge of the designer area. Numerical value in pixels.
- "top" = Distance of the top edge of the image from the top edge of the designer area. Numerical value in pixels.
- "angle" = Rotation or rotation angle of the image when inserted into the design area. Numerical value in degrees.
- "hasControls" = true/false, activation and visibility of the editing handles (controls) at the corners of the inserted image.
ATTENTION: the "controls" only appear when the image is clicked in the design area. Only when "controls" are activated is it possible to edit the inserted image.
- "hasBorders" = true/false, visibility of the picture frame (boundary). Helpful for png images with transparency.
- "hasRotatingPoint = true/false, visibility of the angle controls positioned above and centered on the image. Useful if you also want to use the Rotate
of the inserted image.
- "lockMovementX" = true/false, Allows or blocks horizontal movement of the inserted image.
- "lockMovementY" = true/false, Allows or blocks vertical movement of the inserted image.
- "lockRotation = true/false, Allows or blocks rotation of the inserted image.
- "minScale" = 0.5, allows the scaling (in this case reduction) of the inserted image up to the specified scaling factor. Should always be less than 1 and greater than 0.
- "maxScale" = 1, allows scaling (here enlarging) of the inserted image up to the specified scaling factor. Should always be greater than or equal to 1.
NOTE: If you do not want to allow scaling, you can do without both parameters.
- New datatype "multiupload-designer" - here the addon "Multiupload" is required
Example for the data record:
upload;upload;Upload files;10;1;;;
- Save the used upload images in a separate folder on the server:
/files/bogx_product_configurator/designer/
and then in subfolders named with the current date. However, it is not necessary to download the upload images there - see point 5.
- The upload images will be attached to the order of the configuration product and can be easily downloaded under the tab "Bogx Configurator"
by clicking on the download link for production or documentation.
DEMO for upload images:
https://bogx.de/shopwaredemo55/plugin-demos/personalisierung-plugins/produkt-konfigurator/designer-t-shirt.html
Small adjustments in designer templates in connection with the optimized template concept
Small template corrections:
- correct display of group captions
Implementation of the current guidelines in plugin.xml for base plugin and dependent addons.
New data type "curved_text" implemented.
The following JSON can be used as default ("Designer-Defaults" > Text JSON-Style):
{"height":50, "center":true, "margin-top":-150, "radius":250, "space":5}
radius = radius [in pixels] of the circle to which the text is aligned.
space = distances [in pixels] between the letters of the curved text.
We have used these defaults in the new demo:
https://bogx.de/shopwaredemo55/plugin-demos/personalisierung-plugins/produkt-konfigurator/designer-t-shirt-mit-rundtext.html
IMPORTANT: After the update please reinstall the plugin (1x click button "Reinstall") - don't worry, the existing data will not be deleted.
Tooltips refactoring - now also work in dependencies.
Styling optimization of all input and select fields - also for mobile devices.
Font size made independent of image scaling.
The data type for font size "designer-font_size" has been fixed. The font sizes in the designer texts can now be changed by the user - as intended by the shop administrator.
Calculation formula value=0 has been implemented - see also changelog for product configurator update 4.2.2
Consideration of the new "calculation formula" .
Improved usability for Designer default-data in the article overview (in the backend).
The SVG images (data type "designer_shape") can be completely colored with the data type "designer-shape_color".
1. Improving the compatibility of "canvas" with variants.
2. Text objects are always inserted in the canvas at the top level and are not obscured by images.
3. Improvement of the initial loading of fonts (font-family observer).
Fixed of the issue with "sticky-canvas" on smartphone devices.
Font specification in the data type "designer-textbox" is adopted during initialization.
The text borders ("boundings") are no longer displayed in the design area when clicked on.
1. Consideration of the new functionality "delivery time".
2. Improved "Sticky" function for design area (canvas) + price calculation box.
New data type "background_color" for coloring background images in the PNG file format. For coloring there are two color filters "tint" and "multiply" available. For PNG images with transparency and without material structure (for example various stickers or labels) we recommend "tint" (uniform coloring). If the image should keep the material structure and shades, we recommend the filter "multiply".
IMPORTANTAfter the update please re-install the plugin - do not worry, the existing data will not be deleted.
1. The configured (personalized) customer images are no longer stored as BLOB but as files on the server. As a result, customer images can be any size and any quality losses (which could occur during BLOB generation) were excluded.
2. Completion of CSS / JSON Designer Defaults.
3. New data type "shape_img" for PNG / JPG file formats. This allows any motifs to be inserted into the design surface (canvas). 4. The above enhancements allow you to implement a simple "T-Shirt Designer" (or other textiles or printable items), see example in the demo shop:
https://bogx.de/shopwaredemo55/plugin-demos/personalisierung-plugins/produkt-konfigurator/designer-t-shirt.htmlIMPORTANTAfter the update please re-install the plugin - do not worry, the existing data will not be deleted.
Advanced settings for designer-text: "margin-left" and "margin-top". This allows any positioning of the text on the background (on cards, patches, stickers or on any giveaways).
Fixing of color change in SVG fonts.
Adaptation of Javascript syntax to Safari for Mobile because unfortunately, iPhones and iPads are not compatible with the current ECMAScript 6 syntax
New plugin ZIP file for the first release
First Release: Addon Designer 1.0.0
Shopware