I have re-designed and deployed our commercial site using 100% Ember using pushState to increase the search engines capability to browse the site content.
But, I have one issue that I am not sure how to solve. I am using "actions" to redirect to Ember App routes.
As an example, here an "a" tag:
<a {{action "doSales"}} title="Sales and after sales services">Sales and after sales services</a>
The associated action:
doSales: function(router, event) {
router.transitionTo('sales');
},
And the route:
sales: Ember.Route.extend({
route: '/:locale/sales',
But, in the DOM, the final a tag will look like:
<a data-ember-action="9" title="Sales and after sales services">Sales and after sales services</a>
As you can see there's no href="/en/sales"
Which means that if I ask a browser to browse my site, it won't be able to dig down the site structure.
Does anyone knows
Action href support was removed with the new router.
If you want href's on your anchor tags, you will either need to move to using the {{#linkTo}} helper (which generates them automatically) or add in the href values manually.
Related
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
I have a webpage with a fixed Header. There I have the items "Main Accounts" and "Sub Accounts". The pages are completly the same and have the same functionality except that they call different routes of the API to fetch different data. I dont want two different files for that. Everything should be one file and I just read a variable and change the url depends on that.
My header has some nav-items:
<b-nav-item to="/accounts">Main</b-nav-item>
<b-nav-item to="/accounts">Subs</b-nav-item>
Now I need to pass a variable to that redirection, that I can read in the accounts page and then change the link for getting datas.
I tried so far:
<b-nav-item to="/accounts?main=true">Main</b-nav-item>
<b-nav-item to="/accounts?main=false">Subs</b-nav-item>
I can read the parameter in that url with this.$route.query.main, but my problem is, the page doesnt reload, if I switch between the 2 pages. The url is changing, but I dont know how to react to that change.
I tried it with a click event and force reload:
#click="$router.go({path:'/accounts', force:true})
but that forces to reload the complete page.
My favourite solution would be to create a folder structure or whatever. Then have two routes:
/mainaccounts and /subaccounts but both lead to the same file and in that file I read that the parameter and then decide what route I have to call depending on the link
Okay, found a solution.
I created the following file tree:
accounts/_test/index.vue
And in my header I have a nuxt-link:
<NuxtLink :to="{name:'accounts-test', params: {test: 'main'}}>
And it works as expected.
I want to link the logo of my site (in my main header) to the homepage of my store. I could do so by linking to the absolute URL (e.g., https://www.example.com), but that doesn't work when I'm testing on a development server that isn't hooked up to my domain name.
I know that I can link to pages using <a href="{{ pages.example.url }}">, where example is the page I want to link to. But using <a href="{{ pages.index.url }}"> doesn't seem to work — I'm assuming because index is not actually considered a page.
Is there an easy way to link to my store's homepage using a liquid tag?
You can use {{ shop.url }} as listed on this variable cheat sheet and in the Shopify developer reference.
Returns the full URL of a shop.
http://johns-apparel.com
Homepage
You also have the option of using the secure version {{ shop.secure_url }}
Returns the full URL of a shop prepended by the https protocol.
https://johns-apparel.com
Homepage
I also found in a quick test that it will also return the preview URL when previewing an unpublished page e.g. k29ijan0ye0r5g7k-51325174.shopifypreview.com
I figured it out, for those curious: Just link to "/". So, a link to the homepage of your site should appear as follows in your header.liquid file:
Link
Link This doesn't work for multilanguage stores.
I think better solution is: {{ routes.root_url }}
Does anyone know how to expand this theme ( https://github.com/gilbitron/wp-rest-theme ) in order to theme specific pages? For example, I would like to create a page called "Menu" which has a unique navigation to click through to child pages Breakfast, Lunch, Dinner, etc without reload. I'm used to creating individual .php files to theme specific pages to my liking via page-{slug}.php - Is there an equivalent workflow using vue.js and wp rest api?
Instead of using page-menu.php to customize the /menu page, I would imagine I'd need to create something like a menu-page.vue file and add a custom method to specifically call that page in order to template it.
I can't find any examples of this process. Any help would be greatly appreciated.
What I did was add a field using Advanced Custom Fields that determined which template the page should use. I wrapped the display in a component called PageContent that looks like this:
<div :is="page.template"
:page="page"
v-if="!$loadingRouteData"
transition="fade"
transition-mode="out-in">
</div>
router:
'/:slug': {
component: PageContent,
name: 'Page'
}
So when someone navigates to that route, I fetch the page based on the slug param. The page variable then has a template attribute through ACF, which determines the component to display and defaults to a generic page:
if(pages[0].acf.template){
return pages[0].acf.template;
}
return 'page'
You need the WP JSON API plugin as well as the ACF plugin that adds ACF data to the json
My site uses this setup, happy to share more code if you have more questions.
I say I have a section of a page like this (rough HTML to give an idea):
www.mydomain.com/contact-us
<div class="regional-offices">
<div class="south-west">
South West
<div class="south-west-content">South west office address</div>
</div>
<div class="north-east">
North East
<div class="north-east-content">North east office address</div>
</div>
...
...
Currently, these are a set of accordions that expand to show the content when the link is clicked. What I would like to do is treat them as individual URLs so that they can be seperately indexed by Google, as of course at the moment they are just part of a single page.
I have been researching the History API and can see how I would do this as far as creating unique URLs for each section, but where my understanding falls down is how Google or other search engines will handle these links if the required info is already part of the page and not stored at its own seperate URL.
For instance, the first step would be to change the <a> tag to be something like:
North East
We can then use JS to preventDefault() going directly to the URL, and instead provide the user with an expanded accordion, bring the page scroll down to the accordion and a unique URL using the History API. This is all well and good if we visit the URL directly, or click any of the links.
But the problem is that as far as I know, the Google crawler will try to follow the link and be faced with a 404 because there's no Javascript preventing access to the resource in the URL. And nor do I want there to be.
Or is it the case that I will need a unique location holding the contents of the accordion, which is indexable, and also pulled in with AJAX when a collapsed accordion is interacted with?
Apologies if I haven't made anything clear.
I had to deal with the same thing. What I did was to make a rewrite rule so that the link that google follow is actually posted to the page that handle the the request. to display the data. Angular might save you a lot of trouble to dealing with accordions.