Dynamic UI Generation - Layout Support

Our Dynamic UI Generation script allows your users to edit the text in their MegaEdit product through a form instead of directly entering it into the field. Whilst this did not work with layouts initially, we have now updated the script to allow for the usage of layouts with this feature. Click here to learn more about layouts.

The new amendment to this script allows for your users to change the layout via a popup menu which can appear as soon as the editor loads, and the users will be able to re-open it through the use of a button.

The popup which loads will not have any styling added to it, so it will likely not look to be in a usable state when you first load it, However, through the use of CSS styling, you can adjust the look to however you wish - see below for an example of this popup with some very light styling applied to it.

Loosely_skinned_popup.jpg

The three sections (shown by the hover colour change on the Bulldog option) act as buttons which have been configured in the script to correspond to the MegaEdit layouts. The images displayed for the buttons are uploaded in the CSS override section of the storefront - so they can be a scaled down version of the layout, something which represents the layout, or something else entirely.

To configure this script, you will need to first assign it to your product by navigating to Admin -> Catfish -> Infigo Variable Data -> Dynamic Products -> {your product}: Edit

Once you are editing your dynamic product, navigate to the Scripts tab, double click on the checkbox next to Dynamic UI Generation and click the green tick

Enable_Script.jpg

Enabling the script won't make it work right off the back, however, you will need to create your layouts and configure the script first. When creating your layouts, make note of the name of your layouts - you will need to reference these in the configuration.

Once you have your layouts configured, you will need to copy and paste the following script into the Config section of the Scripts tab shown in the above screenshot.

  {
	textAreaTag: "TextArea", //This is the tag you will need to assign to text fields which you want to have more than one displayed entry line in the form
	textFieldTag: "TextField", //This is the tag you will need to assign to the text fields you want your users to be able to see a single entry line in
	customAreaTag: "CustomArea", 
	customFieldTag: "CustomField",
	paddingFactor: 0.0,
	zoomEnabled: true, //This will determine whether or not clicking on a field in the form causes the editor to zoom in on the respective field
	useLayoutQuickSelect: true, //This enables the layout feature
	startOnLoadLayoutQuickSelect: true, //This determines whether or not the layout menu appears upon first loading the editor
	layoutSelectTitle: 'Image',  //This determines the name of the button which will appear in the editor
	layoutMapping: [{ //This starts the list of layouts which will appear in the editor
		name: 'Butterfly', //This is the displayed text next to the image for the lsit item
		pages: [{ //This section allows you to control which page should be changed to which layout when the list item is chosen on the popup menu
			nr: 1, //This is which MegaEdit page will have its layout changed - this will not count covers as pages
			layout: 'Butterfly' //This is the name of the layout which the page will be changed to  
		}, {
			nr: 2,
			layout: 'Butterfly Back' 
		}, ],
		thumbnailUrl: 'https://www.webtoprintdemo.com/2068969090/Handler/CSSOverride/GetImage/92/PNG.png' //This is the URL of the image which will be displayed in the popup menu for this item
	}, {
		name: 'Bulldog',
		pages: [{
			nr: 1,
			layout: 'Bulldog'
		}, {
			nr: 2,
			layout: 'Bulldog Back'
		}, ],
		thumbnailUrl: 'https://www.webtoprintdemo.com/331222566/Handler/CSSOverride/GetImage/92/GIF.gif'
	}, {
		name: 'Hazard',
		pages: [{
			nr: 1,
			layout: 'Hazard Front'
		}, {
			nr: 2,
			layout: 'Hazard Back'
		}, ],
		thumbnailUrl: 'https://www.webtoprintdemo.com/-360773339/Handler/CSSOverride/GetImage/92/hazardous-waste-symbol-clipart-1.jpg'
	}]
}

The code has been annotated to allow you to more easily understand how to configure this script. You will need to configure it to match your product i.e. ensuring that the page numbers are correct, the layout names provided perfectly match the name of the layout in MegaEdit, the thumbnail url points to the correct image uploaded in CSS override, etc.

You can add as many layout options as you would like - simply copy the below code, configure it, and paste it one character before the last square bracket in your script.

, {
		name: 'Selection Name',
		pages: [{
			nr: 1,
			layout: 'Selection page One'
		}, {
			nr: 2,
			layout: 'Selection Page Two'
		}, ],
		thumbnailUrl: 'YourThumbnailURL'
	}

See below for an example of where this should be copied into

  {
	textAreaTag: "TextArea", //This is the tag you will need to assign to text fields which you want to have more than one displayed entry line in the form
	textFieldTag: "TextField", //This is the tag you will need to assign to the text fields you want your users to be able to see a single entry line in
	customAreaTag: "CustomArea", 
	customFieldTag: "CustomField",
	paddingFactor: 0.0,
	zoomEnabled: true, //This will determine whether or not clicking on a field in the form causes the editor to zoom in on the respective field
	useLayoutQuickSelect: true, //This enables the layout feature
	startOnLoadLayoutQuickSelect: true, //This determines whether or not the layout menu appears upon first loading the editor
	layoutSelectTitle: 'Image',  //This determines the name of the button which will appear in the editor
	layoutMapping: [{ //This starts the list of layouts which will appear in the editor
		name: 'Butterfly', //This is the displayed text next to the image for the lsit item
		pages: [{ //This section allows you to control which page should be changed to which layout when the list item is chosen on the popup menu
			nr: 1, //This is which MegaEdit page will have its layout changed - this will not count covers as pages
			layout: 'Butterfly' //This is the name of the layout which the page will be changed to  
		}, {
			nr: 2,
			layout: 'Butterfly Back' 
		}, ],
		thumbnailUrl: 'https://www.webtoprintdemo.com/2068969090/Handler/CSSOverride/GetImage/92/PNG.png' //This is the URL of the image which will be displayed in the popup menu for this item
	}, {
		name: 'Bulldog',
		pages: [{
			nr: 1,
			layout: 'Bulldog'
		}, {
			nr: 2,
			layout: 'Bulldog Back'
		}, ],
		thumbnailUrl: 'https://www.webtoprintdemo.com/331222566/Handler/CSSOverride/GetImage/92/GIF.gif'
	}, {
		name: 'Hazard',
		pages: [{
			nr: 1,
			layout: 'Hazard Front'
		}, {
			nr: 2,
			layout: 'Hazard Back'
		}, ],
		thumbnailUrl: 'https://www.webtoprintdemo.com/-360773339/Handler/CSSOverride/GetImage/92/hazardous-waste-symbol-clipart-1.jpg'
	}, {
		name: 'Selection Name',
		pages: [{
			nr: 1,
			layout: 'Selection page One'
		}, {
			nr: 2,
			layout: 'Selection Page Two'
		}, ],
		thumbnailUrl: 'YourThumbnailURL'
	}]
}

This can be repeated as many times as you wish, and you can affect more than two pages per item by doing a similar step to the above. Simply copy and paste the code below and paste it one character before the last square bracket before the thumbnailURL for your selection.

{
			nr: PageNumber,
			layout: 'Layout'
		}, 

See below for an example of how the code would look with the above code added.

{
		name: 'Selection Name',
		pages: [{
			nr: 1,
			layout: 'Selection page One'
		}, {
			nr: 2,
			layout: 'Selection Page Two'
		}, {
			nr: PageNumber,
			layout: 'Layout'
		}, ],
		thumbnailUrl: 'YourThumbnailURL'
	}]

As you can see in the screenshot below, the button now is present in my MegaEdit editor, and if I click on it, the menu loads. To allow the images to load correctly in the editor, I simply gave the img tag a max-width value of 200px

Button_in_editor.jpg

Menu_opened_in_editor.jpg

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk