So I am trying to build something for my store but a few things are somewhat unclear.
If I need to save some user settings do I need my own backend just
for that app specifically? For simplicity sake, I want build an app
to save and display a custom message in cart-template.liquid.To
achieve that, I think my app should make a request to my backend (let
say, on heroku) and save it in some db that app is using?
How do I retrieve that data in cart-template.liquid? I guess I
build a snippet that calls a public endpoint of my backend that
returns that saved message using fetch() or maybe axios.get and
embed it using {% render 'fetch-custom-message-snippet' %} ?
Say I ask for user input, ie. "Engraved message" and the form is in cart-template.liquid,
of course. The following snippet is used:
<p class="line-item-property__field">
<label for="engraved-message">Engraved message</label>
<input id="engraved-message" type="text" name="properties[Engraved message]">
</p>
How do I make sure that bit of information is captured and passed to me? I guess I want to see it somewhere in the order details.
If I need to save some user settings do I need my own backend just for that app specifically? For simplicity sake, I want build an app to save and display a custom message in cart-template.liquid.To achieve that, I think my app should make a request to my backend (let say, on heroku) and save it in some db that app is using?
Yes, you need your own backend. Your application alone is responsible for storing its own information (there are some exceptions like a special order field which I show you below) - that typically infers a database that back ups your service and holds your data. Please check out this thread as you can find lots of valuable information there.
Regarding cart-template.liquid I'd suggest taking a look at the official "Shopify Developers" documentation. All information you're allowed to display and request are neatly explained and ordered there.
How do I retrieve that data in cart-template.liquid? I guess I build a snippet that calls a public endpoint of my backend that returns that saved message using fetch() or maybe axios.get and embed it using {% render 'fetch-custom-message-snippet' %} ?
Once again there are good guides out there. I suggest taking a look at this blog post which goes into in-depth on this topic. Shopify's documentation about the Liquid template language is also highly advised to be read.
How do you retrieve that data? According to this specific example any input will be supplied to your order page in the Shopify admin. For example:
<label for="CartNote">Special instructions</label>
<textarea name="note" id="CartNote">{{ cart.note }}</textarea>
*taken from https://shopify.github.io/liquid-code-examples/example/cart-notes*; shows a Special instruction label and textarea for users to submit details about the oder - you will get this data on, as mentioned, the order page in the Shopify admin.
Say I ask for user input, ie. "Engraved message" and the form is in
cart-template.liquid, of course. The following snippet is used:
[...] How do I make sure that bit of information is captured and passed to me? I guess I want to see it somewhere in the order details.
see above
//EDIT:
To prevent any confusion: It seems like you want to develop a custom app just for personal usage and not to publish it in the Shopify App Store - in this case you most often than not don't need an external database; e.g. the example you provided with a simple order request which is easily doable through Shopify's examples.
For your specific case this code snippet (I modified your original example to fit the case - it's not a full cart-template.liquid obviously; in this case the file is called cart.liquid):
<label for="engraved-message">Engraved message</label>
<textarea name="message" id="engraved-message">{{ cart.note }}</textarea>
//EDIT 2:
The link - shared by another user in this thread, namely #Simas Butavičius - is actually kind of useful if you have problems with the customization process in general, i.e. if you want to revise some basic concepts or want to check how to implement the code snippet from above in the whole structure of your website I'd advise to skim through this site.
Needless to say, there are hundreds of good tutorials, questions regarding the same "issue" or other resources in general.
I suggest for further reading purposes to check out some of these links and guides (some may be mentioned above):
https://shopify.github.io/liquid-code-examples/example/cart-notes
https://shopify.github.io/liquid-code-examples/example/checkout-form (! very good in-depth example)
https://www.christhefreelancer.com/shopify-liquid-guide/
https://shopify.dev/docs/themes/theme-templates/cart-liquid
https://shopify.dev/docs/themes/liquid/reference
https://www.shopify.com/partners/shopify-cheat-sheet (! helpful cheatsheet)
https://community.shopify.com/c/Shopify-Design/Cart-Use-cart-attributes-to-collect-more-information/td-p/613718
https://community.shopify.com/c/Shopify-APIs-SDKs/Add-custom-input-fields-to-cart/td-p/154710
https://community.shopify.com/c/Shopify-Design/Product-pages-Get-customization-information-for-products/td-p/616503
Here is the tutorial specifically for creating custom shopify input field for getting engraving information: https://community.shopify.com/c/Shopify-Design/Product-pages-Get-customization-information-for-products/td-p/616503
Related
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
I see either link them directly or visual attribute them. Example: say my website provides a recommendation directly to a user based on their submitted interest, do I just make sure "powered by Foursquare" shows underneath?
Any help would be appreciated! I'm new to tech development
These policies are generally more vague on purpose. Rule of thumb: If you're showing any data to users that isn't your own, it should be clear to them where it's coming from. This is done so the data provider gets proper attribution but also can protect yourself against content being displayed on in your app/site.
For Foursquare specifically, it seems like you would need to include a "Powered by Foursquare" icon and optionally provide a link to the venue if the user may need more information about the place.
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.
I want to make a ticket sales site theme. As you might guess, most of ticket sales site using a flash based chair selection tool. Those systems using premade scenes which is audiences can select their chairs. I can make premade scenes with jQuery or flash but I don't know how can we handle this selection by Magento.
So, what I want to know that is it possible to pass a user specific variable in Magento? I mean, this variable should be available in checkout and backend as well. Could you please give me an advice to accomplish such an idea?
If this option can be selected from a fixed list of options, then what you want can be achieved using Configurable Products, or Custom Options.
If what you're looking for is a completely bespoke user-defined value, then this is pretty programming intensive, so if you're not a developer it's not an easy task.
Forgive the shameless self-link, but I've recently posted on this topic here:
http://mikebywaters.wordpress.com/2012/03/29/adding-custom-data-to-a-cart-item-in-magento/
In short, the post says that you can add an array of custom data to the quote when the item is added to the quote. For this, you’ll have to hijack the add-to-cart controller completely. To start with, take all the functionality from the existing controller. Look at the Mage_Sales_Model_Quote::addProduct() function and you’ll see that it takes two parameters like so:
$quote->addProduct($product, $request);
where $request is of type Varien_Object formatted like this:
$request = new Varien_Object(array(
'qty'=>$qty,
'options'=>$options,
'custom_options'=>$custom_options
));
Hope this helps.
I am trying to use Authorize.net's SIM payment gateway process and am using the base code provided on the developer site. The problem is I am using Master Pages with my site and the hidden field names are getting concatenated with the nested control IDs as an example:
This is what the field should look like:
<input type="hidden" runat="server" name="x_login" id="x_login" />
The output ends up looking like:
<input name="ctl00$MainContent$x_login" type="hidden" id="ctl00_MainContent_x_login" value="MyCode" />
Normally that would not be a problem except Authorize.net is picky about field names apparently since I keep getting Error 13 invalid user. I went through their forums and opened a customer support ticket a week ago, no response other than the automated check our forums email. The closest thing I found on their forums is other people with Master Pages having the same problem with no answers.
I also used their developer response site to check out the values that I am sending them and they all seem to be correct, including the field names. I am at a loss. I can post the entire subset of code but it is the code from their site pasted into my contentholder.
The other work around I have is since my Masterpage already has a form I added these lines of code:
Me.Form.Action = "https://test.authorize.net/gateway/transact.dll"
'Me.Form.Action = "https://developer.authorize.net/tools/paramdump/index.php" This link will show all of the form elements that are submitted.
Me.Form.Method = "Post"
The above lines seem to work properly as the output code looks correct.
Finding no help anywhere else I thought I would ask the people who have not let me down yet.
Here is the answer. After trying a lot of different paths, it is definitely the MasterPage that frags the post to Authorize.net. I tried re-"name"ing the controls among several other things and for time conisderations I gave up trying to resolve the issue and just reformatted the page to not use my masterpage file. I am also building a silverlight e-commerce solution and I am a little concerned that I will not be able to use authorize.net for the same reason.