mirror of
https://github.com/vercel/commerce.git
synced 2025-05-18 15:36:58 +00:00
Merge pull request #4 from agility/product-search-patch
Updated product search url
This commit is contained in:
joshua
GitHub
commit
649c78938f
@ -21,7 +21,7 @@ var FriendlyURLFormField = function () {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/// <field name="Template" type="String">The partial HTML template that represents your custom field. Your ViewModel will be automatically bound to this template.</field>
|
/// <field name="Template" type="String">The partial HTML template that represents your custom field. Your ViewModel will be automatically bound to this template.</field>
|
||||||
self.Template = 'https://agility.github.io/CustomFields/friendly-url/html/friendly-url-template.html';
|
self.Template = 'https://agility.github.io/CustomFields/friendly-url/html/friendly-url-template.html';
|
||||||
|
|
||||||
/// <field name="DepenenciesJS"> type="Array">The Javscript dependencies that must be loaded before your ViewModel is bound. They will be loaded in the order you specify.</field>
|
/// <field name="DepenenciesJS"> type="Array">The Javscript dependencies that must be loaded before your ViewModel is bound. They will be loaded in the order you specify.</field>
|
||||||
self.DependenciesJS = [];
|
self.DependenciesJS = [];
|
||||||
@ -251,143 +251,169 @@ var ChooseProductCustomField = function () {
|
|||||||
|
|
||||||
$pnl = $(".product-picker-field", options.$elem);
|
$pnl = $(".product-picker-field", options.$elem);
|
||||||
|
|
||||||
|
var websiteName = ContentManager.ViewModels.Navigation.currentWebsite()
|
||||||
|
var searchAPIUrl = ""
|
||||||
|
ContentManager.DashboardDataAccess.GetAllDigitalChannelsWithDomains(websiteName,
|
||||||
|
function (channels) {
|
||||||
|
|
||||||
//bind our viewmodel to this
|
for (var channel in channels) {
|
||||||
var viewModel = function () {
|
|
||||||
|
|
||||||
/// <summary>The KO ViewModel that will be binded to your HTML template.</summary>
|
var channelObj = channels[channel]
|
||||||
/// <param name="options" type="Object">
|
for (var i = 0; i < channelObj.length; i++) {
|
||||||
/// <field name="$elem" type="jQueryElem">The .field-row jQuery Dom Element.</field>
|
var domain = channelObj[i]
|
||||||
/// <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>
|
if (domain.IsPreviewDomain) {
|
||||||
/// <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>
|
//calculate the url to search for products by using the preview url...
|
||||||
/// <field name="fieldSetting" type="Object">Object representing the field's settings such as 'Hidden', 'Label', and 'Description'</field>
|
var searchUrl = domain.DomainUrl
|
||||||
/// <field name="readonly" type="boolean">Represents if this field should be readonly or not.</field>
|
if (searchUrl.lastIndexOf("/") == searchUrl.length - 1) {
|
||||||
/// </param>
|
searchUrl = searchUrl.substring(0, searchUrl.length - 1)
|
||||||
var self = this;
|
|
||||||
|
|
||||||
ContentManager.DataAccess.GetPreviewUrl()
|
|
||||||
|
|
||||||
self.ajaxRequest = null;
|
|
||||||
|
|
||||||
self.selectedValue = options.fieldBinding.extend({ throttle: 500 });
|
|
||||||
|
|
||||||
self.formatResult = function (item) {
|
|
||||||
|
|
||||||
return $(`<div class="prod-item"><div class='prod-img' style="background-image:url('${item.imageUrl}')"></div><div class='prod-text'>${item.name}</div></div>`);
|
|
||||||
//return item.node.title;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
self.formatSelection = function (item) {
|
|
||||||
|
|
||||||
return $(`<div class="prod-item"><div class='prod-img-small' style="background-image:url('${item.imageUrl}')"></div><div class='prod-text'>${item.name}</div></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) {
|
|
||||||
|
|
||||||
return JSON.stringify(obj)
|
|
||||||
},
|
|
||||||
|
|
||||||
ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
|
|
||||||
url: "https://nextjs-commerce-agility-cms.vercel.app/api/search-products",
|
|
||||||
//url: "http://localhost:3000/api/search-products",
|
|
||||||
dataType: 'json',
|
|
||||||
type: "get",
|
|
||||||
quietMillis: 250,
|
|
||||||
|
|
||||||
originalValue: ko.unwrap(options.fieldBinding),
|
|
||||||
term: "",
|
|
||||||
data: function (term, page, params) {
|
|
||||||
return {
|
|
||||||
search: term, // search term
|
|
||||||
};
|
|
||||||
},
|
|
||||||
results: function (data, page) {
|
|
||||||
|
|
||||||
return {
|
|
||||||
results: data
|
|
||||||
};
|
|
||||||
},
|
|
||||||
current: function (data) {
|
|
||||||
console.log("CURRENT", data)
|
|
||||||
},
|
|
||||||
cache: true
|
|
||||||
},
|
|
||||||
initSelection: function (element, callback) {
|
|
||||||
//use the hidden "product name" field
|
|
||||||
var json = ko.unwrap(options.fieldBinding);
|
|
||||||
|
|
||||||
if (json && json.length > 0) {
|
|
||||||
var node = JSON.parse(json)
|
|
||||||
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",
|
|
||||||
change: function(e) {
|
|
||||||
|
|
||||||
if (e.added) {
|
|
||||||
var obj = e.added
|
|
||||||
//set the title and the description if we have them
|
|
||||||
if (options.contentItem.Values.Title) {
|
|
||||||
options.contentItem.Values.Title(obj.name)
|
|
||||||
}
|
|
||||||
if (options.contentItem.Values.Description) {
|
|
||||||
|
|
||||||
if (obj.description.indexOf("/>") != -1) {
|
|
||||||
obj.description = $(obj.description).text()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
options.contentItem.Values.Description(obj.description)
|
searchAPIUrl = searchUrl + "/api/search-products"
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (options.contentItem.Values.CTA) {
|
|
||||||
var productUrl = "~/product" + obj.slug
|
|
||||||
var cta = "<a href=" + productUrl + ">Buy Now</a>"
|
|
||||||
options.contentItem.Values.CTA(cta)
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
ko.applyBindings(viewModel, $pnl.get(0));
|
|
||||||
|
|
||||||
|
|
||||||
|
//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-item"><div class='prod-img' style="background-image:url('${item.imageUrl}')"></div><div class='prod-text'>${item.name}</div></div>`);
|
||||||
|
//return item.node.title;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
self.formatSelection = function (item) {
|
||||||
|
|
||||||
|
return $(`<div class="prod-item"><div class='prod-img-small' style="background-image:url('${item.imageUrl}')"></div><div class='prod-text'>${item.name}</div></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) {
|
||||||
|
|
||||||
|
return JSON.stringify(obj)
|
||||||
|
},
|
||||||
|
|
||||||
|
ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
|
||||||
|
url: searchAPIUrl,
|
||||||
|
dataType: 'json',
|
||||||
|
type: "get",
|
||||||
|
quietMillis: 250,
|
||||||
|
|
||||||
|
originalValue: ko.unwrap(options.fieldBinding),
|
||||||
|
term: "",
|
||||||
|
data: function (term, page, params) {
|
||||||
|
return {
|
||||||
|
search: term, // search term
|
||||||
|
};
|
||||||
|
},
|
||||||
|
results: function (data, page) {
|
||||||
|
|
||||||
|
return {
|
||||||
|
results: data
|
||||||
|
};
|
||||||
|
},
|
||||||
|
current: function (data) {
|
||||||
|
console.log("CURRENT", data)
|
||||||
|
},
|
||||||
|
cache: true
|
||||||
|
},
|
||||||
|
initSelection: function (element, callback) {
|
||||||
|
//use the hidden "product name" field
|
||||||
|
var json = ko.unwrap(options.fieldBinding);
|
||||||
|
|
||||||
|
if (json && json.length > 0) {
|
||||||
|
var node = JSON.parse(json)
|
||||||
|
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",
|
||||||
|
change: function (e) {
|
||||||
|
|
||||||
|
if (e.added) {
|
||||||
|
var obj = e.added
|
||||||
|
//set the title and the description if we have them
|
||||||
|
if (options.contentItem.Values.Title) {
|
||||||
|
options.contentItem.Values.Title(obj.name)
|
||||||
|
}
|
||||||
|
if (options.contentItem.Values.Description) {
|
||||||
|
|
||||||
|
if (obj.description.indexOf("/>") != -1) {
|
||||||
|
obj.description = $(obj.description).text()
|
||||||
|
}
|
||||||
|
|
||||||
|
options.contentItem.Values.Description(obj.description)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.contentItem.Values.CTA) {
|
||||||
|
var productUrl = "~/product" + obj.slug
|
||||||
|
var cta = "<a href=" + productUrl + ">Buy Now</a>"
|
||||||
|
options.contentItem.Values.CTA(cta)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
ko.applyBindings(viewModel, $pnl.get(0));
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user