Tracking query strings in Shopify, using webhooks and admin options - shopify

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.

Related

Shopify - Embedded App - User session and webhooks

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.

Shopify - how to extend a checkout page in app?

I would like to create a Shopify app that adds an additional section to the checkout page - a possibility to select the delivery time window. I know that such apps already exist but I want to use my own application server to generate the values that can be selected.
What is the best way to approach this? I've spent last 2 days browsing shopify documentation and following various tutorials but I'm still confused. I thought that application bridge would be the way to go but after playing with it a bit it seems that it only allows to embed application frame in the admin panel, not on the checkout page.
Should my app send a script tag that would call my server and add the whole slot selection UI in javascript? Or should I maybe modify the templates somehow? Can I even make AJAX requests to third party servers from templates?
I would appreciate any advice.
Shopify revealed that there will be a Checkout Apps support soon, but that time isn't now.
So at the moment the Checkout page is standalone and you can't use the ScriptTag API in it.
If you are on a Shopify Plus account and you contacted Shopify to allow you to modify the checkout.liquid file you will be able to add your section manually.
With some additional JS logic you can pass the delivery time to the cart.attributes so that it will be present in the order info. But that's pretty much what you can do and only if you have a PLUS account.
If you plan to make larger modifications you will have to create an App that will have a custom checkout process... which will be a huge overkill for adding a single section, but that's a solution as well.

Trying to migrate online store,completely lost and being taken advantage of

We have an online store that used to be managed by a third party (lets call them BS Company) that did the hosting, webdesign and everything... Now we've decided to move to Shopify because this company has screwed us over in every step along the way.
We already have the store ready on Shopify. Our current website is hosted on DigitalOcean, for which BsCompany has all the access.
They are being impossible, saying that they can't transfer out of DigitalOcean because they have several client's sites with the same hosting. This sounds like royal BS. We just want to move everything to shopify.
I'm going to be on the phone with them shortly, I just want to be informed. What should I ask them to do specifically? What I'm I trying to get them to do?
I'm totally lost here guys, please help.
This goes outside of the scope of StackOveflow purpose which is to help developers with their code issues.
That said you are providing too little information here.
If you want to transfer your store to Shopify and the theme is already done then you need probably only the content from the old store.
Since you didn't mentioned what is the previous platform (WordPress/Drupal/Magento/etc...) it will be hard to provide a recommendation for an App that will import the content from the other platform to Shopify.
So pretty much you need to know what platform the current store is using. For example if you are using WordPress with WooCommerce you will need the following App in Shopify -> https://help.shopify.com/en/manual/migrating-to-shopify/import-store-app/woocommerce-migration and you will need to export the content from the WordPress.
Please have in mind that this will focus mainly on the products, if you like to import the pages and custom post types ( we are still are talking about WordPress here ) you will need some other App or custom logic.
So long story short is not an easy job if there is no App for it.
If you want to keep the SEO for your previous site please have in mind that the Shopify have a predefined URL structure that you can't overwrite.
This means that pages that were using a specific url structure will be different now and you will need to create redirect rules in Shopify manually for each page, which will be a tedious process if you have too much content.
So pretty much you need to know:
What platform the site was written at
Export of the database ( and what database was used MySQL/MongoDB/etc... )
The site files ( they need to provide them to you )
With this information you will be able to create a local copy of the site for reference.

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...