My firebase is setup and initialized in my index.html, but then I can only use it there. Is there any way to use it on all documents?
It is set up in my index page, and then I use the data base and JQuery on a separate JS file to manipulate things also in that index page. I am doing similar things on another HTML page but when I call a function, it doesn't do anything/can't get the data. I thought I should initialize the database on that page too (within script tags of course, just copy/paste the code to initialize), and that also doesn't do anything. I also tried initializing it within the JS code as well, which seems to be the most intuitive thing to do, and that doesn't work either.
I initialize the database with the following:
var firebaseConfig = {...}
firebase.initializeApp(firebaseConfig);
var db = firebase.firestore();
Then just below, I can call a function in the JS and it uses the database information. But when I call a function in another HTML doc, it won't use the database.
I have initialized it in the JS file itself before, and that got me what I wanted but I can't do it again for some reason.
Once you navigate from one page to the next, you browser pretty much forgets anything from the previous page. This means that you will need to include Firebase into any page where you use it.
Firebase is often used in so-called single-page applications, which are implemented as a single real page, but emulate many application screens within that page. That way they only have to include/load Firebase once, but can still show multiple screens to the user. If you're interested in this approach, I recommend looking into some common single-page application frameworks, such as Angular, React, and Vue.
Related
Before anybody starts screaming at me for using global variables, I have a few things to say:
This is only for one variable and will only be used temporary (my estimates says that it will be gone within one year)
I'm open for suggestions on how to solve this a better way
Our project has a bit of a unusual setup. We have an old ASP.Net website, that we are slowly converting to VueJs, page by page. Due to this, we are using UMD
Currently Vue is used for the menu, showing content, etc. When showing an old aspx page, we are using iframe. My goal is for my Vue to be able to catch events thrown from the open aspx page
For this I thought the mitt emitter would be perfect for the job. I'm using it in my Vue project already
On the code side of things, I have the following:
I have a Toolbox.js file, where I try to keep my global variable
var emitter;
async function ClickFromOldPage()
{
emitter.emit('test');
}
In mounted in my vue file (the first thing that opens) I'm setting the global variable
mounted()
{
window.emitter = window.mitt();
window.emitter.on('test', this.Test);
},
And then I have an aspx page that calls ClickFromOldPage
Both the vue file and aspx file is loading Toolbox.js like this
<script src="../Vue3/Javascript/Toolbox.js"></script>
From what I could gather around the net, this should do it, but emitter is undefined when calling Toolbox from the aspx page
Another way was by using top to set/get variables, but this gives the same result
I also tried localStorage, but this can't handle complex objects like the emitter
The only other way to handle this challenge I can think of, is by using cookies or localStorage, where the aspx page writes 'Clicked' (or whatever), then have a function in Vue that checks for said data every second or so. This doesn't sound like a good solution, but the only solution I can come up with
Any other ideas?
My Shopify app replaces the product pages 'Add To Cart' form / product form, with it's own form of sorts. It is Liquid logic that decides whether or not to render the entire <form> element.
This works great, but on some themes (like Jumpstart by Shopify), the product page bugs out completely, throwing me an error saying:
option_selection.js - can't access its "parentNode" property
Which I believe is the option_selection.js function where it is looking for the select box / variant ID somewhere on the page.
Of course, this variant ID / select box does not exist because it is not being rendered.
How can I replace the add to cart form while satisfying the option_selection.js functions?
Usually this wouldn't be a big deal, but Shopify's app review team will give me problems with this, and on the Jumpstart theme specifically, this error causes the product photos to not render; breaking the page completely.
Any ideas here? Much appreciated!
Axing the entire product form seems a bit extreme - there's no way to do what you need to do in a less invasive way?
Assuming not, you'll want to expand your install so that you can update any code in a theme that initializes the product form to take into account the possibility that you've defied the theme's simplistic assumptions.
For the option_selection.js compatibility, you'll be looking for where new Shopify.OptionSelectors is being invoked. If your code has set a variable through Javascript, that may be the easiest check to make. Example of an inline install that assumes your code creates a function named MyAppNamespace.isProdHidden:
Original:
new Shopify.OptionSelectors( ...
Updated:
!(window.MyAppNamespace && MyAppNamespace.isProdHidden({{ product.id | json }}) ) && new Shopify.OptionSelectors( ...
The added piece of code will evaluate to false if and only if your app has loaded properly and your isProdHidden function returns a truthy value. This scenario would prevent the new Shopify.OptionSelectors part from running, since we're using the && as a sort of short-circuit/emergency-stop operation.
If your app failed to load (or was uninstalled from the store without the liquid code being updated), or if MyAppNamespace.isProdHidden returns false, then the added block of code evaluates as true and the new Shopify.OptionSelectors happens as normal.
The above is equivalent to wrapping the entire new Shopify.OptionSelectors call in an if statement, with the install benefit that the party installing your app doesn't need to read the theme code to figure out where the OptionSelectors call ends. In most themes the OptionSelectors code is spread out over multiple lines and occasionally theme developers declare their onVariantChange function as an inline anonymous function - neither of which are big obstacles for experienced developers, but a huge complication for novices and store owners without this kind of expertise.
Making the status of your app available somehow through Javascript is probably the best thing for you to do as far as theme-install-compatibility goes. Some themes have their OptionSelectors call right in the product page, which can be affected by dynamic Liquid variables, but many have this code tucked away in a .js file in the assets folder instead. Still other themes don't use Shopify's OptionSelectors code at all and instead run their own thing, and thus your app could interfere in completely unexpected ways or places. Creating tools to make it easier to integrate your app into somebody else's code is therefore one of the best things you can do.
You'll also want to make sure that your code is able to handle multiple products, as many stores have quick-shops all through the site which can load arbitrary product forms. By making sure you have made the tools available, it's possible for you, your support team (if any) and theme devs can make the required updates to (almost!) any arbitrary theme.
Hope that helps!
I'm a newbie when it comes to PHP. I wrote some JS to make AJAX requests for my project and it worked well, but I don't have any idea how to convert that into PHP.
I've prepared layouts like the following:
mainLayout.php,
userLayout.php,
offerLayout.php,
In those files are some PHP and MySQL parts that build an HTML page.
In Ajax it was easy to navigate between many users using only one page and replacing some divs with data...
But a huge minus was that you couldn't have a single address reference a user profile or the offer (like mywebsite.com/user1).
Now, when I use PHP I want to achieve same layout effect.
How can I avoid creating a thousands of pages (of course even dynamically it seems to be a waste of memory IMO) like user1.php, user2.php, offer1.php, etc.
I don't know how to achieve the effect of being on a site like example.com/user277373.php without creating thousands of files but only one template.
Two solutions I see is either you use GET to parse your data:
http://example.com/?data=1736861
and than access it over the $_GET variable:
$id = $_GET["data"];
($id will be 1736861)
or you use the flight php extension, that will look something like this:
Flight::route('/id/#id', function($id){
echo "ID: $id";
});
and the URL would look like http://example.com/id/1736861. You can also use multiple variables with the flight module.
I hope this helped, Sebastian
Are you familiar with any MVC frameworks? If not, I would highly recommend getting accustomed to the MVC design paradigm. MVC = Model View Controller. From Wikipedia, a short excerpt:
A model stores data that is retrieved according to commands from the controller and displayed in the view.
A view generates new output to the user based on changes in the model.
A controller can send commands to the model to update the model's state (e.g., editing a document). It can also send commands to its
associated view to change the view's presentation of the model (e.g.,
scrolling through a document).
Two of the key components of MANY frameworks (in pretty much any language), are Routes and Templates. When utilizing a routing system, you're able to specify a template for every page loaded that matches a specific route. For instance, site.com/people/:id where ':id' can be any value in the URL, and be configured to use "person.html" for the HTML output. Note that "person.html" receives variables/data that will dynamically populate content, e.g. <h2>Hello, {{name}}</h2>
So, to clarify, site.com/people/252, site.com/people/12, site.com/people/5, site.com/people/john would all match the site.com/people/:id route path where :id is dynamic, and your system will use ONE TEMPLATE (which you specify) to display all the data. Don't forget, when that route path is met, that's only step 1. You will probably need to take that :id run some database query and pass that data into the template.
A popular micro PHP framework called Slim, might be a good starting point. Here's documentation for its way of handling Routes and Templates:
https://www.slimframework.com/docs/objects/router.html
https://www.slimframework.com/docs/features/templates.html
Slim is commonly used with Twig, a super popular PHP template engine. Here's its website/documentation: http://twig.sensiolabs.org/
And if that wasn't enough, Slim has a super handy First App Walkthrough that will show you routes, database connection, and templates: https://www.slimframework.com/docs/tutorial/first-app.html
Hope this information helps you on your journey – Best of luck!
I'm currently writing a script in Google AdWords, and I'm managing lots of campaigns that use the same function (which I have had to copy-paste around 90+ times). Whenever I want to edit this function it becomes incredibly hard as I need to manually to through every script individually.
Is there any way of creating a reusable function, store it as a separate script and call it from AdWords like how I can call Logger and DriveApp? I've tried to use the following resources, which has been pretty useless so far:
Standalone Scripts - Google somehow allows you to create scripts but not execute them from within AdWords (at least that's as far as I've managed to come)
Execution API - Gave up after getting constant 'Unauthenticated' errors (even when setting the permissions to 'Anyone, even anonymous')
MCC Scripts - This allows me to update all accounts, but doesn't do what I need
If anyone knows any way of simply storing a function somewhere and calling it within Google AdWords, it would be greatly appreciated.
You can write your function a save it in a Google Drive file and the use it from there:
var scriptFile = getFile(location);
var scriptText = scriptFile.getBlob().getDataAsString();
eval(scriptText);
I have a client script on a page, that calls a dynamic script generated by a user control using ClientScript.RegisterStartupScript. The user controls script is dynamic, the pages' static.
The issue I have, is the page client script cant find the function rendered by the user control. The method signatures match, everything is good.
However, the user controls script is contained on the page after the static script. Would this make a difference? If so, is there a way to render the script before the static script - according to the MSDN api docs the only way is to combine all scripts into one.
I don't have the luxury of doing this because the dynamic script uses the ClientID of the user control to uniquely identify itself - there is more than one occurrence of the user control.
Is there an easy way around this?
Cheers
My advise is that you make this "dynamic" script a static one that takes the control(s) id(s) as parameter. For example you could have something like:
function MyFunction(dynamicElementID)
{
var myelement =document.getElementById(dynamicElementID);
//do something with myelement...
}
And then on your code-behind, you can call this script as so:
ClientScript.RegisterStartupScript(this.GetType(),"myscript","MyFunction('"+control.ClientID+"');");
I find it a little odd that you have dynamic functions that a static scripts knows about? Can you show some of your code? I think there is probably a better approach to resolving your dependencies.
Typically dynamic controls will pass their Id's to generic static functions.