Update documentation for Rails 7

sethaddison commented 2 years ago

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 2 years ago

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

obie commented 2 years ago

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 1 year ago

ping

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

deepakmahakale commented 1 year ago

@obie For rails 6 or 7 with webpacker you can use this workaround - https://github.com/actmd/abraham/pull/63

For rails 7 with esbuild I am still looking a way to make it work

jabbett commented 1 year ago

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 1 year ago

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>

jabbett commented 8 months ago

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

actmd / abraham

Update documentation for Rails 7 #69