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.
Related
I am using spartacus framework for storefront. I want to show tabs in my application and load pages based on selected tab. Is there any existing cms component or configuratio with which we can do or can i extent the cmscategorynavigation component and customize?
The CMSTabParagraphContainer is used on the product details page to display tabs. A CMSTabParagraphContainer can contain SimpleCMSComponents but not for example ContentPages. You would have to extend the CMSTabParagraphContainer on the backend to also accept ContentPages, ProductPages etc. and then extend the frontend components as well. To extend Spartacus components have a look at: https://sap.github.io/spartacus-docs/customizing-cms-components/
To be honest: This seems like a lot of work if you just want a visual change to the navigation
Im building vue spa with vue router and on FAQ page i want to dynamically add meta title, description and permalink for each question (using accordion), so to show up them individually on google serp and on click, page to be auto scrolled on it.
Can you give me some hints how to do it?
A single page application isn't great for search engines. But if you don't want the hassle of moving your current vue project to another framework such as Nuxt.js, id recommend using vue-meta to add the meta tags to each page in your route, and the vue-prerender spa plugin, to build the static html files for search engines to scan the meta data of each page:
vue-meta:
https://www.npmjs.com/package/vue-meta
vue-prerender:
https://github.com/chrisvfritz/prerender-spa-plugin
When creating a custom Page Template for use as Home Page, "Display as Home Page
Yes, display this page as the home page of my store " the "carousel" data element is null, making it impossible to use stencil CLI. Is there a work-around for this?
You'll want to be sure to include carousel: true in the front matter for your page.html template. The custom template you create will pick up its context from page.html. Hope that helps!
I'm trying to build a simple web app with VueJS. Until now, I've been able to follow the documentation.
My Problem
I want to implement a generic page template that fetches the page metadata from my database.
However, pages are at the top-level of the navigation (/), so I can't use Vue route parameters to dynamically fetch the content from my database, because some of the pages have their own templates.
What I've Considered...
I've considered doing the following to get around the problem:
Implementing top-level parameter like this...
{ path: '/:slug', component: User }
..but this doesn't work for some reason.
Using a slot in the page component for the custom content, and just creating a new component for every page, but I want to stay DRY.
...but I don't want to have to create a new component for every page.
My Question
How do you implement top-level paging with a database backend in VueJS? Am I missing something simple here?
I have a custom component that requires the standard Joomla breadcrumb module. I tried using the following and it didn't do anything:
<jdoc:include type="modules" name="position-2" />
Keep in mind this code came from the template index file and I am trying to integrate the module into a custom component
That is not how to do it. This is for use in Joomla templates to include the module position. You need to make the breadcrumbs programmatically from within your component. See this tutorial on how to do this: http://docs.joomla.org/How_to_add_breadcrumbs
NB: Once you have done this ensure that you have the breadcrumbs module published and the position is set correctly for your specific template.
This link will also be useful - http://docs.joomla.org/JPathway/1.6
[EDIT]
Try add this in your view.html.php for your component:
$app = JFactory::getApplication();
$pathway = $app->getPathway();
$pathway->addItem('Google', 'http://www.google.com');
This will add a breadcrumb that says "Google" and when clicked will link to www.google.com
In terms of creating your breadcrumbs you need to use your url to determine how far you are into you component e.g. "Home // Category // Weblinks" would have a url like:
http://www.domain.com/index.php?option=com_weblinks&cid=2:dogs&id=54:link-to-google
cid = 2 tells us that we are at least in the category, so we can add a breadcrumb for this.
id = 54 tells us we are looking at a weblink so we can add a breadcrumb for the page before which is the list of weblinks within the category