actmd/abraham

Update documentation for Rails 7

sethaddison opened this issue · 7 comments

sethaddison commented

Would be helpful to update installation/config documentation to Rails 7 standards. I tried installing this morning on a rails 7 app and couldn't get it working. I ultimately uninstalled everything, but I would still love to use the gem once the documentation adapts to a rails 7 environment.

sethaddison commented

@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? 🙏🏼

  • 👍1
obie commented

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.

deepakmahakale commented

ping

I am trying to get it working with rails 7
Facing some issues right now. will update soon

deepakmahakale commented

@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

jabbett commented

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.

oclef commented

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>
  • 👍2
jabbett commented

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...

  • 👍1