Is it possible to serve HTML dynamically in Shopify? - shopify

I'm thinking something like pulling in a json file and generating a page from it. I'm just wanting to know if this is a possibility in Shopify.
We're wanting to move our current site completely over to Shopify, and we're hoping we can still have much of the functionality we got from angular and node.

Yes you can do this through Application proxies.
An application proxy is a feature that fetches and displays data on a
Shopify shop page from an outside location that you, the developer,
specify. For app developers, this means that the content on these
proxy pages can be dynamic; capable of being updated as much as you
feel necessary. App developers can use application proxies to display
image galleries, statistics and custom forms, just to name a few
examples.
Basically when Shopify receives an HTTP request on a proxied path, it forwards that request to your specified URL so you can do as you wish. Even further, if you set the Content-Type: application/liquid on your response headers, Shopify will render the template for you; so you could use your very own liquid templates making this page look and behave exactly as the rest of your shop.
There's information on how to get started on the official Shopify Documentation.

Related

Handling SEO on Isomorphic React

i'm using React & Node JS for building universal apps (). I'm also using react-helmet as library to handle page title, meta, description, etc.
But i have some trouble when loading content dynamically using ajax, google crawler cannot fetch my site correctly because content will be loaded dynamically. Any suggestion to tackle this problem?
Thank you!
I had similar situation but with backend as django, but I think which backend you use doesnt matter.
First of let me get to the basics, the google bots dont actually wait for your ajax calls to get completed. If you want to test it out register your page at google webmaster tools and try fetch as google, you will see how your page is seen by bots(mine was just empty page with loading icon), so since calls dont complete, not data and page is empty, which is bad for SEO ,as bots read text.
So what you need to do, is try server side rendering. This you can do in 2 ways either you prerender.io or create templates on backend which are loaded when the page is called for the first time, after which your single page app kicks in.
If you use prerender its paid but pre-render internally uses phantom.js which you are you can directly use. But it did not work out really well for me so I went with creating templates on the backend. So the bots or the user when come to page for first time(or first entry) the page is served from backend else front end.
Feel free to ask in case in any questions :)

Bigcommerce - Implementing custom code that runs on server-side to create multiple versions of page for a product?

I'm new to Bigcommerce but experienced with web app development. I have a need to make customizations to a Bigcommerce store where I need to implement custom logic that runs on the server-side which affects the output in the UI by deciding which page to serve. For example, I want to have different versions of a product page for different locations. I want each version to have a static URL, however, for SEO purposes. I need to implement logic in the server-side to do something like detect user location based on IP and then determine which of the product version pages to serve. I realize I can do this with JavaScript but I don't want to as I don't think that would work as well for SEO.
I have looked over their API and templating briefly but am not seeing a real way that this is possible. Wondering if anyone can guide me in the right direction or is Bigcommerce too simplified to allow this sort of customization?
You do not have server side access on Bigcommerce. The only would to do this would be client side with javascript.

How do I edit a Shopify Web Hook?

I need to have the Shopify Web Hook parsed in the way I want it to look myself, I want it to HTTP POST only a few lines of information that are taken from the order that the Web Hook will be sent for.
I work with third parties that need order information that I send to them, these third parties have to adapt in 1 way or another to the web hooks but as of right now Web Hooks looks fairly limiting. Is there any way I can edit the contents of a web hook through the Shopify API???
I want to make use of the Web Hooks but be able to use it as a regular HTTP POST mechanism where I can choose myself exactly what I will send to the link I set to have the information sent to.
It works like this.
Shopify sends you an Order via Webhook. It's not sophisticated computing. They just keep on sending the complete order to your URL endpoint until you return a 200 OK status that you got it or they just give up on you.
Now that you have the entire order, you parse it, take out only the note stuff you want, and now YOU can send just your precious note stuff to your favorite person via HTTP POST using your computing engine... be it some PHP, Python, Ruby, Java or .Net concoction.
Shopify ==(order)==> Your App (you process) ===> do what you want...

Tracking query strings in Shopify, using webhooks and admin options

I was redirected here by Shopify support. I have three main questions for a project I'll be working on and wanted to see how possible some of the things would be.
We are looking to develop a plugin for use with Shopify to track purchases through the use of a link shortener (to see which link referred what purchases, etc.). I have a few questions that I'm not 100% sure on even after reading through the documentation.
The first problem that I seem to have is tracking the query string that the link shortener appends to the URL once it redirects. For this service, they use "?visit_id={hash}" and I need to be able to access this--at the very least on the "Thank You" page after an order. I saw in the docs that there is "landing_page_ref" (http://wiki.shopify.com/Order#landing_site_ref) but considering our query string is "visit_id" instead of one of the acceptable parameters, how would I be able to use that query string?
Lastly, I just have a question about how webhooks work with plugins that are on the app store. I know I can just call webhooks to wherever I want, like my personal server, but if this app gets onto the app store, I obviously don't want to hook everything to my own server. Is there a way to make it run on the store itself, and which URL should I use?
Lastly, what is the preferred method for handling configuration options for the plugin? Is there a way to hook into the admin backend or would all configuration have to be in a file within the plugin?
Thanks,
Andrew
I'll do my best to answer these for you. It sounds like you're used to building plugins for something like Wordpress - Shopify apps are a bit different.
You can't access anything on the thank you page for the order.
The thank you page/checkout process goes through a secured Shopify page that you don't have access to - so if you want information about what your URL shortener attached to the store pages, you'll need to retrieve it while they're on the page (using something like a ScriptTag + Javascript to track the query string), or hope that it's inside the Order when you retrieve it later (using the API or a webhook).
Webhooks need to talk to a server you run.
They send the information to you, and then you process it and deal with it. If you want to use webhooks, you will need to run a server with your app on it for the webhooks to talk to.
You manage your own config.
Because you're running your own server to handle those webhooks, you handle configuration for your plugin there. The apps I've worked on typically have their own database for managing configuration options, as well as an admin panel to manage them (it's what the user accesses when they click 'Log Into [Your App]' on the "Manage Apps" screen).
You'll need to run your own server to host your Shopify app.

'Dynamic' page loading?

I've no idea what it is exaclty I need, but I'll use Facebook as an example. When you load another page (for example: on the home page, you click your profile) the page itself doesn't look like it reloads.The data loads of course, and the URL changes, however the topbar and chat bar stay put.
I'm looking to do something similar to this. Is this me assuming too much and it's really a simple cache function, or is there a JavaScript way to do it, or any other?
Thanks.
It's using AJAX, which is a combination of various technologies (primarily JavaScript) to achieve this dynamic client-server interaction within the overall context of a page.
Essentially what you'd have for your setup is something like this:
A page which the user requests and is returned to the browser. This page will contain (or reference in external files, etc.) some JavaScript code to drive the interactive functionality. For example, a "link" may trigger a JavaScript function instead of navigate to another page. That function will make an AJAX call to the server.
An AJAX handler on the server. Think of it like another page, or like a web service of some kind. It expects requests to come from JavaScript code, not from humans. (Though humans can call it manually if they want, so don't return sensitive data or anything like that.) This can return data in any number of formats (JSON, XML, HTML, etc.) and the client-side JavaScript code will use that response in code.
Depending on your preferred web development technologies, there are various frameworks and tools to help with AJAX functionality. My personal favorite is just to use the AJAX methods in jQuery and to manually control the responses from the server. If you specify your development platform, I can help find some useful examples to get you started.
This is all done using AJAX. Depending on what you want, you can load entire HTML chunks, or just load the data and have the page's javascript output what's needed.