crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-18 23:46:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

updated custom field

Browse Source
This commit is contained in:
Joel Varty 2021-06-23 12:30:26 -04:00
parent 04295078ba
commit bed8a340d1
2 changed files with 1 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

188
public/agility-ui-ext/custom-fields.js
View File

@ -1,188 +0,0 @@
//
// API Item Picker
//
var baseAPIUrl = "http://localhost:3000"
var ChooseProductCustomField = function () {
/// <summary>The type definition of this Agility Custom Field Type.</summary>
var self = this;
/// <field name="Label" type="String">The display name of the Custom Field Type</field>
self.Label = "Choose Product";
/// <field name="ReferenceName" type="String">The internal reference name of the Custom Field Type. Must not contain any special characters.</field>
self.ReferenceName = "ChooseProduct";
/// <field name="Render" type="Function">This function runs every time the field is rendered</field>
self.Render = function (options) {
/// <summary>
/// The Render handler for this field. Create any elements and bindings that you might need, pull down resources.
/// This method will be called everytime to the field value changes.
/// </summary>
/// <param name="options" type="ContentManager.Global.CustomInputFieldParams">The options used to render this field.</param>
//get our base element
var $pnl = $(".product-picker-field", options.$elem);
if ($pnl.size() == 0) {
var htmlContent = `
<style>
.prod-img {
display:inline-block;
height: 40px;
border-radius: 10px;
width: 40px;
background-size: cover;
background-repeat: no-repeat;
}
.prod-img-small {
margin-top: 2px;
display:inline-block;
height: 20px;
border-radius: 5px;
width: 20px;
background-size: cover;
background-repeat: no-repeat;
}
.prod-text {
display:inline-block;
margin-left: 5px;
line-height: 20px;
}
</style>
<input class='product-picker-field' type='hidden' style='width:100%' data-bind='value:selectedValue,select2:select2'>`;
//pull down the html template and load it into the element
options.$elem.append(htmlContent)
$pnl = $(".product-picker-field", options.$elem);
//bind our viewmodel to this
var viewModel = function () {
/// <summary>The KO ViewModel that will be binded to your HTML template.</summary>
/// <param name="options" type="Object">
/// <field name="$elem" type="jQueryElem">The .field-row jQuery Dom Element.</field>
/// <field name="contentItem" type="ContentItem Object">The entire Content Item object including Values and their KO Observable properties of all other fields on the form.</field>
/// <field name="fieldBinding" type="KO Observable">The value binding of thie Custom Field Type. Get and set this field's value by using this property.</field>
/// <field name="fieldSetting" type="Object">Object representing the field's settings such as 'Hidden', 'Label', and 'Description'</field>
/// <field name="readonly" type="boolean">Represents if this field should be readonly or not.</field>
/// </param>
var self = this;
self.ajaxRequest = null;
self.selectedValue = options.fieldBinding.extend({ throttle: 500 });
self.formatResult = function (item) {
return $(`<div class='prod-img' style="background-image:url('${item.node.featuredImage.transformedSrc}')"/></div><div class='prod-text'>${item.node.title}</div>`);
//return item.node.title;
};
self.formatSelection = function (item) {
return $(`<div class='prod-img-small' style="background-image:url('${item.node.featuredImage.transformedSrc}')"/></div><div class='prod-text'>${item.node.title}</div>`);
};
self.ajaxRequest = null;
self.select2 = {
label: 'Product',
readOnly: false,
value: options.fieldBinding,
multiple: false,
maximumSelectionSize: 1,
minimumInputLength: 0,
placeholder: 'Find product...',
formatResult: self.formatResult,
formatSelection: self.formatSelection,
templateResult: self.templateResult,
matcher: function (term, text) {
return true;
},
id: function (obj) {
//set content of the Agility CMS Content Item
//options.contentItem.Values.ExternalID(obj.ID)
//options.contentItem.Values.MyField1(obj.Value1)
//options.contentItem.Values.MyField2(obj.Value2)
//etc...
//save the whole thing as JSON
return JSON.stringify(obj.node)
},
ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
url: `${baseAPIUrl}/api/search-products`,
dataType: 'json',
type: "get",
quietMillis: 250,
originalValue: ko.unwrap(options.fieldBinding),
term: "",
data: function (term, page, params) {
return {
filter: term, // search term
};
},
results: function (data, page) {
return {
results: data
};
},
current: function (data) {
},
cache: true
},
initSelection: function (element, callback) {
//use the hidden "product name" field
var json = ko.unwrap(options.fieldBinding);
console.log({ json })
if (json && json.length > 0) {
var node = JSON.parse(json)
console.log({ node })
callback({ node })
}
// console.log(val)
// var label = ko.unwrap(options.contentItem.Values.ProductName);
// if (val && label) {
// var data = {
// node: {
// id: val,
// title: label
// }
// };
// callback(data);
// }
},
allowClear: false,
dropdownCssClass: "bigdrop"
};
}
ko.applyBindings(viewModel, $pnl.get(0));
}
}
}
ContentManager.Global.CustomInputFormFields.push(new ChooseProductCustomField());

2
public/custom-fields.js
View File

@ -6,7 +6,7 @@
* THIS FILE IS USED FOR THE AGILITY'S CUSTOM FIELDS
*/
var baseUrl = "https://agility-nextjs-cloudinary.vercel.app/"
var baseUrl = "https://forzaforni-commerce-agilitycms.vercel.app/"
var FriendlyURLFormField = function () {