mirror of
https://github.com/vercel/commerce.git
synced 2025-05-18 23:46:58 +00:00
search
This commit is contained in:
Joel Varty
parent
d9fe7d8e6b
commit
2e83467ad6
@ -1,10 +1,7 @@
|
||||
|
||||
import { NextApiRequest, NextApiResponse } from "next"
|
||||
|
||||
import { getConfig } from '@framework/api'
|
||||
import getSiteInfo from '@framework/api/operations/get-site-info'
|
||||
import getAllProducts from '@framework/api/operations/get-all-products'
|
||||
|
||||
import commerce from '@lib/api/commerce'
|
||||
|
||||
export default async (req: NextApiRequest, res: NextApiResponse) => {
|
||||
|
||||
@ -24,25 +21,41 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
|
||||
}
|
||||
|
||||
try {
|
||||
const filter = req.query.filter ?? ""
|
||||
const filter = `${req.query.search}`.toLowerCase()
|
||||
|
||||
// const products = await getProducts({filter})
|
||||
const locale = "en-US"
|
||||
|
||||
|
||||
const locale = "en-us"
|
||||
const preview = false
|
||||
|
||||
|
||||
const config = getConfig({ locale })
|
||||
|
||||
|
||||
// Get Best Newest Products
|
||||
const { products } = await getAllProducts({
|
||||
variables: { field: 'newestProducts', first: 12 },
|
||||
const config = { locale, locales: [locale] }
|
||||
const { products } = await commerce.getAllProducts({
|
||||
variables: { first: 1000 },
|
||||
config,
|
||||
preview,
|
||||
})
|
||||
|
||||
|
||||
const ret = products
|
||||
.filter(p => {
|
||||
return filter === ""
|
||||
|| p.name.toLowerCase().indexOf(filter) !== -1
|
||||
|| p.description.toLowerCase().indexOf(filter) !== -1
|
||||
})
|
||||
.map(p => {
|
||||
|
||||
return {
|
||||
name: p.name,
|
||||
imageUrl: p.images[0].url,
|
||||
price: p.price,
|
||||
id: p.id,
|
||||
description: p.description
|
||||
}
|
||||
})
|
||||
|
||||
res.statusCode = 200
|
||||
res.json(products)
|
||||
res.json(ret)
|
||||
|
||||
} catch (e) {
|
||||
|
||||
|
||||
378
public/custom-fields.js
Normal file
378
public/custom-fields.js
Normal file
@ -0,0 +1,378 @@
|
||||
/* eslint-disable new-parens */
|
||||
/* eslint-disable eqeqeq */
|
||||
/* eslint-disable no-undef */
|
||||
|
||||
/**
|
||||
* THIS FILE IS USED FOR THE AGILITY'S CUSTOM FIELDS
|
||||
*/
|
||||
|
||||
var baseUrl = "https://agility-nextjs-cloudinary.vercel.app/"
|
||||
|
||||
|
||||
var FriendlyURLFormField = function () {
|
||||
var self = this;
|
||||
|
||||
self.Label = "Friendly URL";
|
||||
self.ReferenceName = "FriendlyURL";
|
||||
|
||||
self.Render = function (options) {
|
||||
/// <summary>
|
||||
/// The Render handler for this field. Create any elements and bindings that you might need, pull down resources.
|
||||
/// </summary>
|
||||
/// <param name="options" type="ContentManager.Global.CustomInputFieldParams">The options used to render this field.</param>
|
||||
}
|
||||
|
||||
/// <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';
|
||||
|
||||
/// <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 = [];
|
||||
|
||||
/// <field name="DepenenciesCSS" type="Array">The CSS dependencies that must be loaded before your ViewModel is bound. They will be loaded in the order you specify.</field>
|
||||
self.DependenciesCSS = [];
|
||||
|
||||
|
||||
/// <field name="ViewModel" type="KO ViewModel">The KO ViewModel that will be binded to your HTML template</field>
|
||||
self.ViewModel = function (options) {
|
||||
/// <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.relatedField = "Title"; //the other field value we want to make friendly
|
||||
self.value = options.fieldBinding;
|
||||
self.contentID = options.contentItem.ContentID;
|
||||
self.attrBinding = {};
|
||||
|
||||
if (options.fieldSetting.Settings.Required === "True") {
|
||||
self.attrBinding['data-parsley-required'] = true;
|
||||
}
|
||||
|
||||
|
||||
self.makeFriendlyString = function (s) {
|
||||
if (s) {
|
||||
var r = s.toLowerCase();
|
||||
r = r.replace(new RegExp("\\s", 'g'), "-");
|
||||
r = r.replace(new RegExp("[àáâãäå]", 'g'), "a");
|
||||
r = r.replace(new RegExp("æ", 'g'), "ae");
|
||||
r = r.replace(new RegExp("ç", 'g'), "c");
|
||||
r = r.replace(new RegExp("[èéêë]", 'g'), "e");
|
||||
r = r.replace(new RegExp("[ìíîï]", 'g'), "i");
|
||||
r = r.replace(new RegExp("ñ", 'g'), "n");
|
||||
r = r.replace(new RegExp("[òóôõö]", 'g'), "o");
|
||||
r = r.replace(new RegExp("œ", 'g'), "oe");
|
||||
r = r.replace(new RegExp("[ùúûü]", 'g'), "u");
|
||||
r = r.replace(new RegExp("[ýÿ]", 'g'), "y");
|
||||
|
||||
r = r.replace(new RegExp("[^\\w\\-@-]", 'g'), "-");
|
||||
r = r.replace(new RegExp("--+", 'g'), "-");
|
||||
|
||||
|
||||
if (r.lastIndexOf("-") > 0 && r.lastIndexOf("-") == r.length - 1) {
|
||||
r = r.substring(0, r.length - 1);
|
||||
}
|
||||
}
|
||||
|
||||
return r;
|
||||
};
|
||||
|
||||
self.regenerateUrl = function () {
|
||||
ContentManager.ViewModels.Navigation.messages().show("By changing the URL you could create broken links.\nWe recommend you add in a URL redirection from the old URL to the new URL.\nAre you sure you wish to continue?", "Re-generate URL",
|
||||
ContentManager.Global.MessageType.Question, [{
|
||||
name: "OK",
|
||||
defaultAction: true,
|
||||
callback: function () {
|
||||
var friendlyStr = self.makeFriendlyString(options.contentItem.Values[self.relatedField]());
|
||||
self.value(friendlyStr);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Cancel",
|
||||
cancelAction: true,
|
||||
callback: function () {
|
||||
//do nothing...
|
||||
}
|
||||
}]);
|
||||
}
|
||||
|
||||
//subscribe to the related field changes
|
||||
options.contentItem.Values[self.relatedField].subscribe(function (newVal) {
|
||||
//auto generate if this is a new item
|
||||
if (options.contentItem.ContentID() < 0) {
|
||||
var friendlyStr = self.makeFriendlyString(newVal);
|
||||
self.value(friendlyStr);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
ContentManager.Global.CustomInputFormFields.push(new FriendlyURLFormField());
|
||||
|
||||
//
|
||||
// Markdown field
|
||||
//
|
||||
var MarkdownCustomField = 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 = "Markdown";
|
||||
|
||||
/// <field name="ReferenceName" type="String">The internal reference name of the Custom Field Type. Must not contain any special characters.</field>
|
||||
self.ReferenceName = "Markdown";
|
||||
|
||||
/// <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 = $(".markdown-field", options.$elem);
|
||||
|
||||
if ($pnl.size() == 0) {
|
||||
/*
|
||||
Pull in the simple but awesome MD editor here:
|
||||
https://github.com/sparksuite/simplemde-markdown-editor
|
||||
*/
|
||||
var htmlContent = `
|
||||
<div class="markdown-field">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
|
||||
<textarea data-bind='value:value'></textarea>
|
||||
</div>
|
||||
`;
|
||||
//pull down the html template and load it into the element
|
||||
options.$elem.append(htmlContent)
|
||||
|
||||
$pnl = $(".markdown-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.value = options.fieldBinding; //.extend({ throttle: 500 });
|
||||
|
||||
//TODO: determine a better way to detect if the SimpleMDE object is ready
|
||||
setTimeout(function () {
|
||||
|
||||
var simplemde = new SimpleMDE({ element: $("textarea", options.$elem)[0] });
|
||||
simplemde.codemirror.on("change", function () {
|
||||
self.value(simplemde.value())
|
||||
});
|
||||
|
||||
}, 1000)
|
||||
|
||||
}
|
||||
|
||||
ko.applyBindings(viewModel, $pnl.get(0));
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
ContentManager.Global.CustomInputFormFields.push(new MarkdownCustomField());
|
||||
|
||||
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 Ecommerce Product";
|
||||
|
||||
/// <field name="ReferenceName" type="String">The internal reference name of the Custom Field Type. Must not contain any special characters.</field>
|
||||
self.ReferenceName = "ChooseEcommerceProduct";
|
||||
|
||||
/// <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: "https://sample-swag-shopify.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) {
|
||||
|
||||
},
|
||||
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());
|
||||
Loading…
x
Reference in New Issue
Block a user