Best way to support opening link in new tab
Nobody has claimed this yet.
- Dominant language
- Ruby
- Stars
- 1.9k
- Forks
- 739
- Avg merge
- 21h 2m
- Merged PRs (30d)
- 1
Description
Overview
I spent a day or so yesterday trying to figure out what the best way to support the scenario where a user command-clicks a link, so it opens in a new tab from within an embedded app.
We were previously on v18.1.2 of this gem, and it seemed to be handled natively by the gem when the ShopifyApp::EnsureAuthenticatedLinks concern was included. Whilst in v21.8.0 of this gem, that concern adds support for deep links, it doesn't add support for opening pages in new tabs.
However, it does work if a shop and host param is present on the request URL. If I'm remembering correctly from yesterday, it looked like ShopifyAPI::Auth was responsible for part of this behaviour.
So my question is, is there a way native to this gem that allows us to support opening links in new tabs?
We're currently solving this by dynamically adding the params to <a> hrefs from stored .window attributes via JS. This seems a bit hacky, maybe there's some kind of header support that could do the same thing? or maybe there's just a setting somewhere I've overlooked.
Thanks for your help,
Oli
// Allows new tabs to work by adding a shop and host URL param.
// i.e. the new page redirects to the shopify admin, then splash page, then the return_to location
document.addEventListener('DOMContentLoaded', () => {
document.addEventListener('click', (event) => {
const element = event.target.closest('a');
if (!element) return;
if (shouldInterceptLink(element)) {
const newUrl = urlWithShopifyParams(element.getAttribute('href'));
element.href = newUrl;
}
});
});
function shouldInterceptLink(element) {
return element.href && !element.href.startsWith('mailto:') && isInternalLink(element);
}
function urlWithShopifyParams(url) {
const urlObj = new URL(url, window.location.origin);
if (window.shopOrigin && !urlObj.searchParams.has('shop')) {
urlObj.searchParams.set('shop', window.shopOrigin);
}
if (window.shop_host && !urlObj.searchParams.has('host')) {
urlObj.searchParams.set('host', window.shop_host);
}
return urlObj.toString();
}
function isInternalLink(element) {
const url = new URL(element.href);
return url.origin === window.location.origin;
}
...bit of context
We're running a Rails 7.1 app with Turbo. Below are our controller setups.
class AuthenticatedController < ApplicationController
include ShopifyApp::EnsureAuthenticatedLinks
include ShopifyApp::EnsureHasSession
...
class SplashPageController < ApplicationController
skip_before_action :verify_authenticity_token
protect_from_forgery with: :null_session
include ShopifyApp::EmbeddedApp #sets layout as .embedded_app.html.erb
include ShopifyApp::EnsureInstalled
include ShopifyApp::ShopAccessScopesVerification
...
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the ShopifyApp::EnsureAuthenticatedLinks concern and the ShopifyApp::EmbeddedApp setup shown in the issue, then compare their behavior between gem versions v18.1.2 and v21.8.0. Check the interaction with ShopifyAPI::Auth and the Rails 7.1/Turbo navigation flow. Done would mean identifying and implementing a native approach, or documenting that the JavaScript URL workaround is required.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, rails, ruby
- Domain
- authentication, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100