Managing Items, Configuring an Item Template - Bumby-Wool/builder GitHub Wiki

Previous Step: Creating an Item Template

Across these sections I use the <path> element but these same instructions can be applied to <polygon>, rect, and other SVG elements

Find a <path> element within the SVG which you have not yet configured Then add style="fill:red" to the path element to help identify it

Sometimes there are paths that do not show up when you fill them with red. These paths can just be ignored

Example

For the testpants item after adding the red styling to the first path we can save the testpants-svg.html file and refresh the page to see what SVG element is highlighted in red.

Now that you know what part of the item that path element is replace the style="fill:red" with ng-style="$ctrl.getSelectedOptionStyle('<MY-ELEMENT-ID>')" where is a unique id for this element. The id should not use spaces/special characters and should be unique, not repeat within the same SVG.

Example

The red element in the above screenshot shows that the path element highlighted is the waistband of the testpants item so I'll replace style="fill:red" with ng-style="$ctrl.getSelectedOptionStyle('waistband')".

Now we need to connect the element with a color option from the item definition you started in the earlier step. To do this go back to the itemDataService.js file.

Add a Variant Object to the Item if one does not already exist for the element you are configuring. If a variant for this element already exists then use that variant for the next step.

Variant Object

{
    label: "Variant Name",
    options: [],
    extras: []
}

Learn more about Variant Object Properties

Example

Since the testpants item does not have a variant yet add a new one. We'll give the variant the label of "Hemmed" since that is one of the variants we want for our testpants item.

angular.module('bumbyApp')
    .factory('itemData', function () {
        return [
            {
                title: "Test Pants",
                link: "/items/testpants",
                image: "resources/Baby-Standard-Pants-Mild-Tapered-Hemmed-Main.png",
                variants: [
                    {
                        label: "Hemmed",
                        options: [],
                        extras: []
                    },
                ]
            },
            {
                title: "Diaper Cover",

Next we add an Option object to the variant. To learn more about the difference between adding this object to the options vs. extras see Variant Object Properties.

Option Object

{ label: "My Option", elements: ["MY-ELEMENT-ID"] }

Learn more about Option Object Properties

Example

We will now add the waistband option to the Hemmed variant we created. We'll make the option label to be "Waist" which will be displayed on the item page. In the elements array we'll place "waistband" because that is the element ID from the SVG which we want this option to control.

angular.module('bumbyApp')
    .factory('itemData', function () {
        return [
            {
                title: "Test Pants",
                link: "/items/testpants",
                image: "resources/Baby-Standard-Pants-Mild-Tapered-Hemmed-Main.png",
                variants: [
                    {
                        label: "Hemmed",
                        options: [
                            { label: "Waist", elements: ["waistband"] }
                        ],
                        extras: []
                    },
                ]
            },
            {
                title: "Diaper Cover",

Now if we save the file and refresh the page we will see that the Waist option is on the right side and controls the color of the waistband SVG element

Continue repeating these steps on this page until you have configured all of the elements in the SVG into the Item Object Definition.