Comments (7)
@jabbett I'm eager to use Abraham in my Rails 7 app, but can't seem to get it configured. I'm using postcss and esbuild. Are you able to provide some guidance? I've followed the install instructions closely, but in my network console I'm getting Uncaught ReferenceError: Abraham is not defined
. Can you help? 🙏🏼
from abraham.
I got it working in Rails 7 by loading Shepard and js.cookie directly from CDN
inside <head>
I added
<script src="https://cdnjs.cloudflare.com/ajax/libs/shepherd.js/10.0.1/js/shepherd.min.js" integrity="sha512-+sGq1oBVH2WcJhJ8FW/krYkwIovP6ItdQN1+gHwWPG+kKlWAQVuuqzYfNPkOfBXSBQ+43ZlpiRwDP+OXxUky0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.1/js.cookie.js" integrity="sha512-DJw15+xxGmXB1/c6pvu2eRoVCGo5s6rdeswkFS4HLFfzNQSc6V71jk6t+eMYzlyakoLTwBrKnyhVc7SCDZOK4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
var Abraham = new Object();
Abraham.tours = {};
Abraham.incompleteTours = [];
Abraham.startTour = function(tourName) {
if (!Shepherd.activeTour) {
Abraham.tours[tourName].start();
}
};
Abraham.startNextIncompleteTour = function() {
if (Abraham.incompleteTours.length) {
Abraham.tours[Abraham.incompleteTours[0]].checkAndStart();
}
};
document.addEventListener("DOMContentLoaded", Abraham.startNextIncompleteTour);
document.addEventListener("turbolinks:load", Abraham.startNextIncompleteTour);
document.addEventListener('turbolinks:before-cache', function() {
// Remove visible product tours
document.querySelectorAll(".shepherd-element").forEach(function(el) { el.remove() });
// Clear Abraham data
Abraham.tours = {};
Abraham.incompleteTours = [];
});
</script>
from abraham.
Bumping this up as I just ran into similar issues, but on a Rails 6.1 app that doesn't have an app/assets/javascript
directory.
from abraham.
ping
I am trying to get it working with rails 7
Facing some issues right now. will update soon
from abraham.
@obie For rails 6 or 7 with webpacker you can use this workaround - #63
For rails 7 with esbuild I am still looking a way to make it work
from abraham.
Thanks for the comments and the interest in Abraham! I use Rails 6 at work and in side projects, but I am not yet experienced in Rails 7. So I can't help directly there, but I'm certainly open to contributions.
from abraham.
On a side project, I tried https://driverjs.com to get more comfortable using third-party JS & CSS in Rails 7, and launching tours with Stimulus.
Of course, any JS-only approach lacks Abraham's user-based tracking. So I may attempt a PR to get this modernized...
from abraham.
Related Issues (20)
- Use another id than current_user's one HOT 5
- How to handle controllers with the same name? HOT 6
- Remove jQuery dependency HOT 4
- If user has more than one unviewed tour, show them both?
- Launch tour on demand HOT 2
- Attach tour on lazy loading elements like modals HOT 3
- CI is failing against Rails 6 HOT 1
- Include documentation on `placement` options
- Travis is not running system tests in Rails 6+
- Sourcemap errors HOT 2
- ERROR in ./node_modules/abraham/cli.js 1:0 Module parse failed: Unexpected character '#' (1:0) HOT 1
- Transition from Travis CI to GitHub Actions HOT 1
- Where to specify current_user ? HOT 1
- Issue with query selectors HOT 1
- Question: access to the full Shepherd API? HOT 1
- How to restart tour for user? (issue with deleting cookie) HOT 1
- Would be really nice if the tour definitions reloaded without having to restart the server
- using js-cookie@^3.1 instead of js-cookie@^2.2.0 HOT 3
- How to achieve multi pages tours alike redirecting from one page to another? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from abraham.