Gridsome & hubspot page tracker integration - api

I am a beginner developer and I recenty started taking on clients. One asked me to integrate their current website that i created with the hubspot page tracker.
i have checked on their developer page, and it doesnt give specific instructions for gridsome rather SPA's as a whole.
I dont know where to embed the code provided.
https://developers.hubspot.com/docs/api-/events/tracking-code
My applicaiton is an SPA and i am using gridsome.
my project can be found at https://github.com/chs242/ezras-nashim
i am so lost. If someone can take the time to help a little i'd be super grateful
regards

To embed the code, add the HubSpot script (replace the xxxxxxx with your HubId) in src/main.js:
export default function (Vue, { router, head, isClient }) {
Vue.component('Layout', DefaultLayout)
head.script.push({
src: 'https://js.hs-scripts.com/xxxxxxx.js',
body: true
})
}

Related

Dynamic Routes in NextJs don't load on different param

I am currently doing a project with NextJs about a blog posting application similar to medium.com. However, I am facing a little problem when it comes to dynamic routes.
Background Info: My pages structure looks like this:
pages
|-> profile
|-> [username].tsx
url path example: /profile/[username]
Use case: I am in the profile page of someone (/profile/someone), and in the navbar, which is globally accessible, you have the ability to go into your profile (/profile/yourName). Howerver, if you click View Your Profile, the url does update, but the page does not appear to load and therefore, you cannot see your profile.
Original Code:
<Link href={`/profile/${username}`}>
<button>View Profile</button>
</Link>
Current Solution:
if (router.asPath.includes('profile'))
router.replace({
pathname: '/profile/[username]',
query: { username: username },
}).then(() => router.reload())
else
router.push(`/profile/${username}`)
The solution provided works, but load times significally increases when compared to the "Original Code" block or when asPath does not include 'profile'. I think this is because I am using reload(). I want to know if there is another solution that will improve loading time.
Thank you

Add "forgot password" link to react-admin's login page

I am building an admin web interface using react-admin and at the moment, I am trying to find a way to add a link under the Login button on react-admin's login page so that I can take the user through the account recovery process.
I have everything in place -- custom routes, custom components, API support for server-side checks and operations, the works. I just need to add that one link component on the login page to integrate the account recovery infrastructure with the rest of the site.
I have been googling for possible solutions and have found a few questions people asked in the past, but most of them were dealing with custom routes etc. and they did not really seem to be related to my issue. I have also looked at the official docs here, but they only talk about changing the background image on the login page.
Has anybody dealt with and solved this problem?
I am using react-admin 3.5.0.
Customizing the login page/form is often not attempted because the react-admin team made it easy to just "adopt" that login page (template) into any app set-up. Thanks, guys!!
Ok, not too fast. But what if I seriously want/need to customize the login page?
I met this challenge when I needed to refactor the login fields.
Let's take a closer look at how the <Login> is rendered:
First, you actually need to pass the loginPage prop to the <Admin/>;
<Admin loginPage={CustomLoginPage} />
Then, within the CustomLoginPage, render the form and include any other relevant info (in this case, your "forgot password" link)
import { Form } from 'react-final-form';
const CustomLoginPage = props => {
// any other logic
return (
<div>
<Form {...props} render={() => (<form>...</form>)} />
<a href='...'>Forgot Password?</a>
</div>
)
};
This code for the react-admin demo login-page will help you understand that last part further.

How to shopify storefront navigation menu get with API?

If anyone can please help me with how to retrieve the navigation menu with REST and Graphql API.
If no API is available, then how can I write a custom Navigation API?
We need to get the below data with API. see screenshot
Use this in query. it worked for me. Remember to replace "main-menu" with the header code of your site.
{
menu(handle:"main-menu"){
items{
id
tags
title
}
}
}
currently, there is no API endpoint that would allow you to access the navigation. However, seeing that the navigation in your screenshot mainly contains collections, probably it would be a good starting point for you to read those? This can actually be done via this call:
GET /admin/api/2020-01/collection_listings.json
You can find more info here:
https://shopify.dev/docs/admin-api/rest/reference/sales-channels/collectionlisting#index-2020-01
Hope this helps,
Roman

getJson method returns an error using woocommerce JSON API plugin

I'm using woocommerce JSON API to retrieve the data of some products like price, SKU, etc...
The thing is that I get an error using this API. I've installed the plugin succesfully and activated it in the WordPress Dashboard.
I've tried the example given in GitHub exactly as the author says.
Here's my javascript code:
$(document).on('pageinit','#restau' ,function(){
var url = 'http://danielvivancos.com/edu/wordpress/shop/?callback=?';
params = { action: 'woocommerce_json_api', proc:"get_products"};
params.arguments = {token: 1234, per_page: 2, page: 1}
jQuery.getJSON(url,params).done(function (data) {
alert("success");
console.log(data);
console.log(url);
}).error(function(jqXHR, textStatus, errorThrown){
alert(jqXHR.responseText);
});
});
At first it didn't do anything, and I didn't understand what was happening but then I added the .error() function and it threw me an error...
Here http://danielvivancos.com/edu/directebre_app_jquerymobile/ you will find the three alerts displayed when you click on any of the three products.
Hope someone can help me or give me some ideas to solve it.
Thank you all!
The API Almost always returns some kind of error string and error code. The one time when it wouldn't would be if there was a PHP error (Even then it tries to catch the error and return something).
One thing you may need to do is to visit the users settings page, setup your permissions, and then save the settings for that API User. Whenever a new method is added to the API you will have to visit this page and resave it.
Another thing to do is to try and run php tests/get_products.php and see what happens. Most of the API functions have a tests file that you can run from the command line to test the API.
Also, while I am very happy you are using it :) it is still unfinished and in the early stages of development.
It looks like your example is working though?
Could you post a bit more about what error you are getting?
When I click on one of the items, it takes me to a page where a popup shows up with a bunch of HTML, this normally means that your API page is not setup properly (if it is making an api request). You will need to setup the API page ( Just create a wordpress page, or use an existing one) Then in the WooCom menu select JSON Api, and set the API page from the dropdown list. Remember to save.

Rally 2.0 example provided will not load

So I've recently decided to upgrade to Rally SDK 2.0. I'm using the starter kit and following the directions on the website. All I've done so far is added:
launch: function() {
this.iterationCombobox = this.add({
xtype: 'rallyiterationcombobox'
});
}
To the js file. Ran the rake command, loaded App.html into a browser. It is blank. According to the website, there should be a small combobox on the top left of the screen. I don't know what I missed, I assumed the example would work as the website displayed.
edit I should add that this isn't the only thing contained in the HTML file. I just meant that rake generates an HTML file at the beginning that adds //Add Code Here to the javascript function. I meant that the above code is the only tihng I've changed.
I tested your code snippet and it works in my testing. Did you paste the App code into a Custom HTML App in Rally? Or are you running outside of Rally?
If the latter, you'll need to modify the src attribute of the script tag in App.html:
<script type="text/javascript" src="https://rally1.rallydev.com/apps/2.0p5/sdk.js"></script>
So that it contains a fully-qualified reference to the AppSDK2 JS library.
The AppSDK API Docs have some good Examples of simple starter Apps. The Grid examples are good places to start. You can click on the "View Source" link within any of the Example apps and see the source code.