For a client i want to integrate a new way of renting products in Shopify which they pick right up after ordering from a pickup point. This new way is a service which can be interacted with via an API. After ordering, a code is provided which can be used to open a locker somewhere. In the shop, on a custom page or some sort of reusable block i want have a custom HTML form which can interact with this API. The customer can then choose the product, the available pickup-point, pay for his/her order and receive the code for pickup. Is this possible?
I have done research but could not find this type of customizing.
I have built some test-apps but it seems these can only be embedded in the admin and not in the storefront itself (please correct me if i am wrong). I can interact with the storefront-api so that's a plus allright.
The ideal way would be for me to develop a React/Vue app which can be added to a page for walking trough this process described above.
Anyway, is it possible one way or another?
Thanks in advance for thinking with me on this one!
Related
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.
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.
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'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.