Shopify Hamburger Menu Button Not Working On Mobile Devices (Debut Theme) - menu

I'm using the Debut theme on my Shopify site and have an issue with the hamburger menu button not working. It will work once but when I navigate to a new page nothing happens when I press the button again. When the page loads the following message is shown on the console for theme.js:
TypeError: $.debounce is not a function. (In '$.debounce(50, function() {
styleDropdowns($(selectors.siteNavHasDropdown));
positionFullWidthDropdowns();
})', '$.debounce' is undefined)
If I manually empty caches through the browser and reload the page the error no longer appears in the console and the button works again. However, once I navigate away from the page the issue returns.
Any help would be greatly appreciated.

Check to see if you have your JS files included on all pages

Related

Right click to open React Link in new tab is throwing 404 Not Found error

I am using react-router-dom Link to navigate to a page and the code is as below:
<Link to={'/xyz/login'}>Click here to Login</Link>
This works fine when the application is running on my local machine. But on server, when I try to right click and open the link in new tab, HTTP Status 404 – Not Found message is displayed.
Any thoughts on the issue is appreciated.

history.go(-1) cannot work in IOS14 Beta2 App

My web app is working in a WebView of an IOS native application. There is a button on the top-left side of the page, and it will go back to the previous page after the button is clicked. So far so good, but recently many customers have upgraded their IOS to 14 Beta2 and now the back button doesn't work as expected.
I use the history.go(-1) to go back, but if the session history length is 2, it will execute the history.go(-1), but the page will not go back. The url also doesn't change. If the user continue to open new page, then it works again.
Does anyone have ideas of whats going on with it?
I meet the same problem. You can use setTimeout delay for a while when you use history.push,like this
setTimeout(() => {
history.push('xxx');
}, 100);

Flutter Web - How to reload currently Active Page

I am using Flutter for developing a website. Everything is working fine with Flutter except when it comes to reloading the page. When I press the refresh button in the browser, the whole web app gets reloaded.
For example, if I have navigated to four pages from the initial page, when I press the refresh button from the fourth page, the initial page gets loaded and I'll have to manually browse all the way to the fourth page again.
Is there any way to load the currently active page in Flutter?
Or you can just use this as it refreshes the whole window natively
import 'dart:html' as html;
html.window.location.reload();
Check out navigation with named routes as it maps URLs seamlessly when using Flutter Web.
EDIT : If you want URL parameters (like an id, a token...), check out this article.
Use Navigator to push to the same page. .ie.
If CurrentPage() is your page that needs to be refreshed then use:
Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) => CurrentPage()));
This will reload the page.
import 'dart:html' as html;
html.window.location.reload();
as this is not allowed according to
https://dart-lang.github.io/linter/lints/avoid_web_libraries_in_flutter.html
this is how i have resolved my issue:
import this package
https://pub.dev/packages/universal_html/install
import whereever you want to use
import 'package:universal_html/html.dart' as html;
and you can use it like this
html.window.location.reload();

How to debug chrome extension with DevTools or other debugger?

Is there any way to debug chrome extension using debugger ( break points and step in/out)
beside console.log ?
Chrome 70.x debugging of chrome background scripts is broken, especially when you dynamically load them and they are not in the manifest. Have a ticket open to get it fixed; however they have not been very helpful; however found a work around...
Put a console.log("yourvariablenamehere") in your background.js script.
Hit F12 to open the dev tools, anchored to the bottom of the web page.
Load the background script via a button in your popup.html. Something like this from a button event...
var guid = CreateGuid();
chrome.tabs.executeScript(null, { file: "script/jquery-3.3.1.js" }, function () {
$.get("script/scrollPage.js?ver=" + guid, function (sScriptBody, textStatus, jsXHR) {
chrome.tabs.executeScript(null, { code: sScriptBody });
}, "text");
});
In the dev tools console you should see your logged variable. On the same line as the logged message is a VM with a number tacked onto it, a virtual script page. Select that VM page and then you get to the background script! Now put a breakpoint in the virtual script page, click the same button in your popup.html and it gets hit. And when you reload the popup and execute the background script that breakpoint is hit!
Hope this helps.
If you want to inspecting content scripts, a great method I found is using Console by selecting your extension in javascript context:
By selecting the extension you will have access to the global objects within that extension.
Reference:
Using the Developer tools to debug your extension

Xamarin HybridWebView always opens in Browser with xamarin.iOS when using Appcues script

When i check in the script from Appcues then i see it trieds to embed an iframe to my body element.
I can see that adding an iframe with <iframe src="https://www.google.com"></iframe> in my website. That iOS apps opens to the native browser to google immediately. The same result when adding an Appcues script.
I can ignore the navigate to google url but if i do that for Appcues. Appcues doesn't get shown in my app. This works fine on Xamarin.Android

Resources