Shopify does wrap all scripts added through ScriptTag API into special asyncLoad function. While it makes sense in many circumstances there still situations when you need script tag inserted directly into the header.
For example Optimizely wouldn't work that smooth if there wasn't other way to insert script tag, i.e. somehow theirs script appears in the store front independently, i.e. without asyncLoad function.
How would I do the same?
One option is to parse and then send back current theme, but it looks weird and not quite reliable, and according my research Optimizely does know another approach.
I was able to get in touch with Optimizely, here is their's response:
We actually partnered with Shopify to get our snippet added to the page in this way by default. I don’t think there is a simple way to work around the async limitation otherwise.
and here is Shopify's response:
Unfortunately this was a one-off hack-y fix, and not something that we're open to doing again at this time.
So, for now the only reliable way to work around the async limitation is to instruct users to place the script into current theme as others applications does.
Related
In the app I'm working on it's a fairly big codebase and components/pages are sometimes based on user roles. Admins will be able to see certain buttons or sections while regular users are not.
I need to modify a lot of the existing pages/components to accommodate a new role that's being added, which is view-only-admin.
This role will only be able to see everything including calendars, tasks, etc. but they are not allowed to make any sort of updates.
It would be a tremendous amount of work to go through the template of each component and file and look for v-if admin and also add a view-only-admin as well as make every single button or submit/click method behave differently for a view-only-admin role.
What would be the best way to handle this for the entire app? Re-writing and modifying v-if and submit methods seem like a bad use of time.
I've only been working with Vue/Nuxt for a few months, but I have read Mixins are pieces of code that you can reuse.
Would it be possible to write a mixin so that if the role is "view-only-admin" and there's an action that is a put/Post call, then they are not able to perform those API calls and presented with an error message?
I'm not sure how to go about properly implementing this feature. If I am able to stop all PUT/POST calls using a mixin, it would just redirect to a 404 right?
Thoughts?
If you are using axios for POST/PUT methods, then you should definitely check Interceptors.
But if you add only an interceptors without UI updates - your users may be confused why some buttons exist but doesn't work as expected.
We plan to create a Shopify app but we face some problems to find in documentations how to interact with pages.
I`m not sure we must ask every time users to add codes and etc, so I need to know if I miss something.
I need to interact with the product pages in Shopify from an app.
I search and read all the web for this and everything is how to start but not the actual examples.
I know for the ScriptTags and how to include them but that is.
If someone can give me a simple example of how for example to hide the Buy button and insert something on instead.
I know how to select it with the default theme with JQuery but what about all other themes?
There are two ways to interact with the front page:
1) Inject some code in the page ( the live one )
2) Use ScriptTag as you mentioned.
The code injection script will modify the product template for example and inject your code if you like to do this automatically or you can instruct the user to do so on their own, but if they are not code savvy there might be issues.
In addition this code will live only on the live theme in most cases. And if the user likes to delete your app at a specific time you must be sure to write the logic in such way that it won't affect the site if your app is no longer present ( since it will be really hard to clean up the files once you add the code automatically )
For this approach you will need to use the Asset API.
You will need to get the content of the file with a GET request to the file and make a put request in order to update it.
The better approach is to use ScriptTag API.
This will allow the use of a script file that will be attached on EVERY theme. This will not modify the theme files in any form or shape.
It seems that this is the approach that you are looking for.
Please have in mind that you will be the one hosting the file from your app so pretty much you can write what ever you like there. So if you like to use jQuery you must be sure that the themes have included jQuery or you will have to add the jQuery core code inside your script.
As for how to write a script tag, there is a pretty straightforward documentation here: https://help.shopify.com/en/api/reference/online-store/scripttag#create-2020-01
If you use the standard handlesbar.js implementation, does Google view the content within the custom script tags as content, script or unknown content?
If you're in doubt, do in pure HTML. Unfortunately, Google should ignore this. I looked about, and all I heard is that this application was not made to be searchfriendly.
In fact, Google undestand and even follow links created via Javascript, but handlebarsjs is very more complex.
Possible solution
A strong suggestion that I make to you is load a simplified version with some content in plain simplified and after use handlebarsjs, so at then at least do not let google completely blind. But thsi version should be used also to end user, because google Will know if you show a diferent content just for Googlebot.
Possible solution 2
Exist a way to make websites that rely heavily on AJAX still work in Making AJAX Applications Crawlable
I am developing an analytics product similar to Google Analytics and want to offer an integration for our Shopify users.
I would need to do just two things:
1) Insert our JavaScript snippet into the body of all the shop's pages
2) Insert a second conversion snippet into the body of only the "thank you" page after a purchase to record the sale, passing back the order total and order number
Could you point me in the right direction?
The ScriptTag endpoint looks optimal except that it doesn't seem to provide any way to differentiate between the "thank you" page and other pages, or to pass the order details from the "thank you" page into the script.
It seems like I either need an endpoint that can inject arbitrary code into all pages, or one which lets me alter the theme layout file to add code before the </body> tag.
If I can do that much, it looks like I might be able to use a conditional in the templating language to only show the conversion code if the URL matches the "thank you" page URL, and use {{ total_price }} and {{ order_number }} in that code.
Does the uninstall webhook allow me to make changes before the rights for the app are revoked? It seems like I would need a way to clean up at uninstall to remove my code from the theme, if I'm allowed to edit the layout file.
itThere are two ways you can go about this:
ScriptTags: You're already aware of this method. It's true that the script is loaded into each and every page, but you can look at document.url in your js to figure out which page you're on and conditionally execute code based on that.
Scripts inserted this way are executed during the 'onLoad' event. At that time you have access to the DOM and can do basically whatever you want with the page.
Snippets: Using the Assets endpoint you can make arbitrary changes to the user's theme. Be careful with this power! The recommended way to make complex changes to a page is to create a custom snippet in the theme with your additions and then tell the user to insert an include tag into their code where it needs to appear. This reduces clutter in the main theme files.
I'd recommend using ScriptTags wherever possible. As mentioned below, they don't need cleaning up and remove the need for user interaction when setting up the app.
--
As for the uninstall webhook: It is fired after the app has been uninstalled from the shop, so you no longer have access. It's designed to be used to trigger cleanup on your end (remove db entries, etc.). Note that ScriptTags and Webhook subscriptions are automatically cleaned up, but any changes you've made to the theme aren't
You ask a lot of questions in one posting.
For your #1 and #2 read:
http://api.shopify.com/scripttag.html
Secondly, for your app install/uninstall read:
http://api.shopify.com/webhook.html
Pay attention to the part about app/uninstalled since you're interested in that.
As for knowing when someone installs your App, that is really up to you to figure out. Should not be too hard since you probably read about how to make and App in the first place. Shopify provides lots of boiler plate code on github that can show you almost everything you asked here.
We are looking for script, which automatically detects url, as you type and shorten it, in text input window, before press "submit". The shortening service used is http://yourls.org/
Have you tried implementing one yourself? Deploy the shortener to your own web site (it's written in PHP, as far as I can see from a cursory glance at the web site) and provide a simple Ajax endpoint which will dynamically perform a shortening conversion, then implement calls to that from the main page using JavaScript.
You might want to impose a reasonable delay to allow the user to finish typing, to avoid performing lots of unnecessary conversions of bogus URLs (which may require, e.g. writes to a file or database - I haven't looked at how the library referenced does things).
I'm not sure what you're trying to achieve; if you create new shortened URLs for each substring before the user has finished typing the full URL, you will just proliferate your database.
I don't see how shortening a URL before it's finished makes sense.
If you want to relieve the user from the arduous task of clicking the submit button, then initiate the submit using javascript (jQuery, or something). I'm not sure if that's what you want to do.
http://monkeytooth.net/2010/12/htaccess-php-how-to-wordpress-slugs/
simple means of implementing the concept its a lot more easier than one would think. Querying a DB or some other means of matching the slug/id with the that of which is found in the URL wouldn't be all to hard either. The linked article doesn't really go in depth as what to do next but catching and breaking the URL apart is the essential process of making it work. I have person used the method myself on several sites and it works like a charm for me and the sites it was used on.