I need to create a solution for altering the checkout process.
Better said, I need to add some functionality to it with a remote app (I am not sure if this is the right way to do it).
Mainly, what is needed represents a process that calls an external API, using a private API key from a delivery company, that registers a pick-up from the buyers house and sends the product to our headquarters.The process should be started when the user completes the entire checkout system from shopify, after payment.
After that, some AWB should be returned to the users checkout page, or some response regarding the creation of the pick up.
My question is, let's say, using some language like javascript with node and Koa or express, how one can achieve that? I can't find any tutorials or something that would help me do this.
Related
I'm a fairly new web developer and I have an ecommerce website that integrates EasyPost to create and print shipping labels.
EasyPost has an API. Also, in each shipping label, I see a JavaScript object (I think) that displays buyer_address... "email": "example#gmail.com",, which tells me that the email information is there.
My question is somewhat general in scope: What steps would I need to take to go about creating this automation? The website is built in Webflow, so I don't really have a "codebase" or "repository" to store whatever code is needed to build the automation.
Since the buyer email is making it into EasyPost with integrations already in place, I feel that I could create a simple program that emails the tracking number to the buyer email every time a label is generated, or perhaps when package is shipped, without the program needing to interact with Webflow or other integrations.
I attempted using Zapier, as well as Make.com. Neither worked, and OrderDesk doesn't have a way to send tracking number emails.
It looks like Webflow has some kind of support for Webhooks (https://webflow.com/feature/create-webhooks-from-project-settings). EasyPost offers webhooks for free as an add-on service. Basically, with webhooks, EasyPost would send tracking events to Webflow proactively, but Webflow (or you) would need to manage the logic for what to do with those tracking events after they are delivered.
EasyPost Webhook Guide
I'm unaware of any off the shelf products that could do this for you without writing any code. We have a guide that details how you might accomplish this with Ruby (you could then follow this as an example for any other language): https://www.easypost.com/email-tracking-tutorial
A few suggestions:
Integrate something into Webflow if possible (I'm unfamiliar with the platform so couldn't say).
Build a simple script that runs on a schedule (cronjob) that retrieves your trackers from EasyPost and sends an email to customers if they have not yet received one. To your point, this approach wouldn't require interacting with Webflow at all and could be done with some local code running on a server and just your EasyPost API key.
I've created a simple UI for EasyPost: https://github.com/Justintime50/easypost-tools-ui, it could be interesting to add this particular use-case as a feature to that project. If you're interested, feel free to open an issue on GitHub for the repo listed here and I'd consider it.
You'd use easypost's API webhooks, to detect when shipment tracking information is provided, or package information is updated.
https://www.easypost.com/docs/api#trackers
It looks like it has a lot of states, so you can keep the client updated regarding the package status from the moment the tracking # is assigned;
EZ1000000001 pre_transit
EZ2000000002 in_transit
EZ3000000003 out_for_delivery
EZ4000000004 delivered
EZ5000000005 return_to_sender
EZ6000000006 failure
EZ7000000007 unknown
You can install webhooks from these docs.
To send the email, you can use an automation service e.g. Make to capture those webhook events, and then compose and send an email to that customer. I like MailJet for that purpose, because it has excellent template support and you can send from your own company domain. But there are many email-sending options.
A bigger challenge, maybe, is getting the email address to send to. I didn't spot it glancing through the Trackers or Shipments data structures, and I am primarily seeing physical address info.
If EasyPost is not tracking the customer's email with the shipment, you may have some challenge in that you'd need to capture the client info through Webflow's order webhooks, and then associate that with EasyPost's shipmentid, and store those in a reference table.
Many automation services offer database-like functionality for this purpose, or you could use e.g. google sheets ( columns webflow OrderID, easypost ShipmentID, customer Email ) or airtable for that purpose.
But you'd have to look into the Easypost integration as well, and you may need to make that integration manual so that you can acquire all 3 of those pieces of information at the same point in your business data flow.
I'm fairly new to Shopify development and I'm trying to understand the best way to address our requirement. Apologies if some of these are basic questions.
The intent is to build an embedded public application that is intended to:
Have a floating component that's present on all pages on the online
store.
React to the user journey e.g. do stuff when the user adds
items to cart, completes a checkout, etc.
Send events to our server through the journey to allow our server to provide relevant
info, regardless of the store theme.
Have the ability to do this at an individual session level i.e. not all users will have the same experience.
I had a few questions around this:
Will it be possible to add the script to the main theme page and
have it load on all pages?
Is there a better alternative, particularly if the integration is supposed to be light-touch for admins?
What is the best way to get access to the individual user session from the app (assuming we can request the appropriate permissions as a part of the app installation)?
Is app bridge and session token required for this?
Is it possible to build this app using Angular? I understand Shopify framework is API-based and in theory any UI framework should work, but will a deeper linking with the user session be possible with Angular?
If we get enable web hooks for the various events, would it be a reliable way to detect events happening in the user journey? If so, what will be the correlation id between the events from the app and the web hooks?
Is it possible to detect the page the user is in, regardless of the theme? For example: Is there a way to identify that the user has added an item to the cart regardless of the theme used or is a webhook our best bet for those events?
Thanks in advance!
There is one thing you can do that would support most of your needs. Create an App, and set that App up with a Proxy. Shopify will then support the customer centric store theme to use a secure Ajax callback to your App using the proxy. So you can always call a proxy like /tool/customer_check with or without a customer ID from anywhere in the store.
You can imagine how powerful that is. You can return Liquid or more commonly, JSON. Boom! You're in business.
Of course, there are alternatives, all with the caveat your mileage may vary. None of this is predicated on any particular tech stack, meaning you can use what you like and know.
I'm not entirely sure how to go about this so i thought i'd ask here.
Context
I have a quiz that people take on my site and when the quiz is completed, a product is recommended based on their quiz results. A customer is now able to buy this recommended product.
What i want to do is to be able to save the quiz response to my external database with the order id as a unique id for quick retrieval later. How would i go about this in Shopify?
Question
Is there a way i can make a POST request when the checkout button is pressed on the checkout page?
Would i have to create a custom checkout to get access to that area?
Thank you
If you're attempting to save to an external database then you'll need to figure out a way to send data from your Shopify frontend to an external app or API, one that will capture the product data and add it to the DB.
To answer your first question, no, you can not hijack the functionality of the checkout button (unless you do so via Javascript).
As for your second question, I don't know what you mean by 'custom checkout' but I'd say you're probably looking in the wrong area for the solution to this.
Shopify's backend is not able to be edited by the merchant themselves and can only be accessed via its various APIs.
How I would do it if I were you is to create that external app, create an endpoint that accepts the product data / adds to the DB and write code on your Shopify front-end to send the data to that endpoint.
Keep in mind that you won't be able to easily identify the customer to whom the product is recommended to unless they are logged in.
Kindly please suggest me the best way to single page checkout for Shopify store. As Shopify doesn't support any customization to the checkout page. Our requirement is to create a single page checkout. let me know how it is achievable.
Basic Shopify does not support customization in the checkout page. It is only available to Shopify plus Customer. Please visit here for more information.
You want a single page checkout you may need to create your own checkout process which will again require your store to be a Shopify Plus store. However, there are many Apps which can help you with single page checkout. You may want to use one of them if you don't want to build the whole functionality. You may want to check the below conversation - Link
You should not use Shopify if you want to make your own Checkout. Shopify is a hosted platform and they no longer want to let people play with the cash register themselves.
Of the few Apps that remain that do offer checkout outside of Shopify, you can see the hassles involved for customers. Why not just roll your own? If you can do your own checkout, hook up to an open source system instead where you can do that easier.
This is easy enough to do if you have the skills. Basically create an app that has a proxy page and change the theme's links replacing the paths to the checkout with paths to your proxied checkout.
There are a number of ways to collect payment info if you do this including using the draft_orders api to send the customer back to Shopify for final payment (not applicable for single page checkout but sometimes works well with the business reason that justifies a custom checkout in the first place)
You can also create a sales channel app that works much like the proxied app concept but has some more api capabilities.
However you really need a good business reason for doing this. Single page checkout was fashionable a few years ago but I've had as many customers go away from it as go towards it. Shopify has done quite a lot of work on their checkout and it works well (i.e. is fast and efficient) on all their supported platforms. Creating a custom checkout means your stuck maintaining it and are potentially increasing your liability if you take credit cards but have not received PCI certification.
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.