How to add JavaScript in Shopify public app

Question

Im developing a Shopify public app using Ruby on Rails. I want disaply some information in all the store front pages. The official documents only explains about the admin panel modifications. How can I access the store front? And where I should add the scripts, I mean in which controller?

Actually Im a PHP Developer. Im new to Shopify and also Ruby on Rails. Im trying to develop a shopify public app which will show product related information in all pages (front-end). I followed shopify's tutorial first, and created a hello world like app which displays products list in admin side. But I really cant find anything that make changes in the store frontend.

So please help me that how to make changes in frontend. Also I want to get the current user information and product details (if it is a product view page).

Sharing your research helps everyone. Tell us what you've tried and why it didn’t meet your needs. This demonstrates that you’ve taken the time to try to help yourself, it saves us from reiterating obvious answers, and most of all it helps you get a more specific and relevant answer! See also: How To Ask — stasiaks
– stasiaks, Commented Mar 29, 2019 at 10:24
Thanks for your reply. I edited my question with my research and how long I reached. — Vicky M
– Vicky M, Commented Mar 29, 2019 at 10:34

alexts · Accepted Answer · 2019-06-23 10:49:26Z

4

We can use config.scripttags to load javascripts in shopify store front pages. The syntax will be as follows:

config.scripttags = [
  {event:'onload', src: 'https://domainname.com/path_to_script.js'},
]

You should add this code in the shopify_app Gem initializer file, which can be found in

config/initializers/shopify_app.rb

Hope this will help someone..!

edited Jun 23, 2019 at 10:49

alexts

1802 silver badges13 bronze badges

answered Mar 30, 2019 at 10:22

Vicky M

1331 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nisar Saiyed · Accepted Answer · 2019-03-30 09:39:49Z

0

You can refer this from shopify which provides you admin APIs for add new page , update page , get customer, get products etc.. like that

Shopify Admin APIs

there is section for online store which contains the pages API also you can see API for products , orders and customers.

you can also add your js file in online store pages with https endpoint statically in admin account of shopify example code

<div id="test"></div>
<script async="true" src="https://www.example.com/test.js"></script>

add your js code like this in online store page and check that your js is loading there or not

answered Mar 30, 2019 at 9:39

Nisar Saiyed

7881 gold badge9 silver badges18 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

-1

It sounds like you're asking where you need to place your JS files to have them load up on the Front End. This should help:

http://railsapps.github.io/rails-javascript-include-external.html#locations

Whether you use the Rails asset pipeline or add a tag directly to a view, you have to make a choice about where to put any local JavaScript file.

We have a choice of three locations for a local JavaScript file:

the app/assets/javascripts folder

the lib/assets/javascripts folder

the vendor/assets/javascripts folder

Here are guidelines for selecting a location for your scripts:

Use app/assets/javascripts for JavaScript you create for your application.

Use lib/assets/javascripts for scripts that are shared by many applications (but use a gem if you can).

Use vendor/assets/javascripts for copies of jQuery plugins, etc., from other developers.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 29, 2019 at 10:50

Mark

6,5415 gold badges24 silver badges52 bronze badges

1 Comment

Vicky M Over a year ago

Thank you. This is helpful. But it is related to rails application. What I need is Rails app using Shopify_app Gem.

Collectives™ on Stack Overflow

How to add JavaScript in Shopify public app

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related