how can I override the data that is rendered on shopify .liquid with the need for using Ajax - json

I have a use case where I want to implement custom search functionality for a Shopify site. So instead of using getting a JSON with Ajax and making a html and replacing the html. Is there a way where I can override the search.results data that the .liquid files are using.
So when I make a search in /search?q=xyz, I want to get the data from my API, and use that data to render the product-item.liquid. This way I don't have to worry about the UI of the product-item for different themes.

Yes. You can easily do this. You would install an App in your shop, and create an endpoint you would call with your search criteria. The end point is handled by a Shopify App Proxy, that securely allows you to callback the App. You could return Liquid as results, or just JSON as you wish. It is a standard and simple pattern for you to use.
See here: https://help.shopify.com/api/tutorials/application-proxies

Related

Is there any added advantage of using djangorestframework over JsonResponse?

I am new to Django and API creation. I am trying to figure out if it is better to use djangorestframework or just use JsonResponse. I got the suggestion of djangorestframework from Digital Ocean's tutorial but also found out about JsonResponse, which seems simpler given that I don't have to install another package.
Goal: I would like to be able to provide user information for both web and mobile applications.
I see that there are some reasons provided on this post for djangorestframework, which I pasted below for posteriority.
The common cases for using DRF are:
1)You're creating a public-facing external API for third-party
developers to access the data in your site, and you want to output
JSON they can use in their apps rather than HTML.
2)You're doing mobile development and you want your mobile app to make
GET/PUT/POST requests to a Django backend, and then have your backend
output data (usually as JSON) to the mobile app. Since you don't want
to pass back HTML to the mobile app, you use DRF to effectively create
a REST API that your mobile app can call.
3)You're creating a web app, but you don't want to use the Django
templating language. Instead you want to use the Django ORM but output
everything as JSON and have your frontend created by a JavaScript MVC
framework such as React, Backbone, AngularJS, etc. In those cases, you
can use DRF to output JSON that the JavaScript framework can process.
DRF basically provides you many features to make APIs that you don't have in raw django.
for example:
Serializers: a declarative way(django style like declaring models) of making serializers, when you use JsonResponse you have to tell everywhere what to serialize, with the serializer you have to import it and just use it, also this serializers can be able to save/update objects too. Also support ORM source to connect yours models(think how difficult would be serialize a model with nested relations with JsonResponse).
The Web browsable API, you can see all the availables endpoints.
Third party packages to install and use: https://www.django-rest-framework.org/community/third-party-packages/#existing-third-party-packages.

Tool to generate web client using JSON Rest Interface

Do any of the front end frameworks (Like Vue.js) have the ability to generate a prototype form/view directly from various an Endpoints?
I am wanting to quickly knock up a few forms to capture and submit data to a set of JSON Rest Post APIs and Display pages to render data retrieved from other JSON Rest Get APIs.
I don't want to have to go through the pain of having to map each and every field out in a set of .js file, it would be great if the boilerplate could just be generated from interface in a similar way to what Apache Isis does from a Domain model.
The above would allow me/clients to generate a UI directly off the interface and interact with it using a web browser in a similar way one would using Postman, without having to install and understand Postman.
You can try one of these:
https://vue-crud.github.io/
https://github.com/dionmaicon/vue-crudgen
https://github.com/ais-one/vue-crud-x - described in https://codeburst.io/vue-crud-x-a-highly-customisable-crud-component-using-vuejs-and-vuetify-2b1539ce2054
https://api-platform.com/docs/distribution/

WP REST API v2 JSON endpoints appear difficult to read

I found WP REST API very interesting in making custom functionalities in WordPress websites. However, I find it hard to read my JSON endpoints' results.
The normal output of JSON endpoint is wrapped in html and pre tags. T result appears in one long line of compressed string.
I need to integrate my website to a mobile app to be done by another developer and I would like to display the API endpoints (e.g. link) to appear as a regular JSON Object like:
I'm trying to find a workaround like a hook or a filter to make the JSON results appear as I desired. Or equivalent AJAX related code would be nice.
I use a Chrome extension of JSON Formatter to view the results which prints out with readability in mind.
https://github.com/callumlocke/json-formatter

How to Handle Loading Data Based on Selection in MVC?

I have always worked with Web APIs, so I don't know how to handle this very basic problem in .NET Core MVC (I am only familiar with MVC conceptually). My problem:
I need a user to select an option from a dropdown on the front end and then show some data based on the option (after fetching it).
If I were writing an SPA consuming an API, I would simply make a call to the backend to get the data and then generate the html to display it on the front end.
How is this handled in MVC? Isn't the convention to return entirely new views? How are things like these handled?
I just need a pointer in the right direction conceptually - I can figure out the code.
Edit: Should I just pretend it's an SPA despite it being a view and create an API endpoint in the same app that provides the view and consume it from the cshtml?
It works exactly the same way. You make an AJAX call to fetch some data. You can either return the data directly, and utilize JS to render the HTML or return HTML directly. Either way, you use the AJAX callback to replace the appropriate content on the page.
Even in older ASP.NET MVC projects it worked this way, though you basically had to decide whether you were going to use an MVC controller or a Web Api controller to do the work. Either would work, but there were advantages/disadvantages to each approach. MVC/Web Api could always coexist in the same project.
In ASP.NET Core, the difference is purely semantic. There's really no such thing as MVC and Web Api anymore - just ASP.NET Core. A controller is a controller is a controller, so just add an endpoint and go to town.

How can we construct custom URLs in HTML form with GET method?

I am using Django for making a website. I am using an HTML form with GET as the method.
The problem is that by default the get url is like this:
/search?name=user&place=place
But I want it to be something like:
my_site/search/user/place
How can that be done?
Why not use POST as method and retrieve the parameters in your view from request.POST? In this way they won't appear in your url.
Also, if you're expecting a list of results i recommend using ListView from views.generic, and in the dispatch() method you'll retrieve your parameters based on which you'll filter the user model (i guess).
It is better with a get request immo, but if you want something like: my_site/search/user/place it is easy, you just have to define the variables in your url and get the arguments in your function.
You can find more detail in django documentation
The only way you can do this in the browser is with Javascript. You will need to build the URL from the form contents. There are many mistakes you can make around encoding the values for the URL. You should be asking why you want to do it this way instead of using the QUERY_PARAMS as the form is doing.
Decoding it with Django isn't that hard, they are just variables in the URL pattern, but unless you have some kind of earth shattering new technology, you should let the browser send them to you without using JS to handcraft the URL.
Using the GET method send data via the web page. This means that the URL can be copied and rechecked at any time.