I am needing to do an internal link that is in FAQs on a site using Vue 3 and Inertia.js? - vue.js

I have an array of content coming from a database that will be displayed on a page as a group of FAQs. Some of the content will have links to other internal pages on the site. How do I link to the pages using Inertia's link component so that a full page refresh doesn't happen?

It depends on what is returned after using the link. If you return a full view in the response, the page is reloaded. If you return a small JSON object or something else, you can process it without full loading.

Related

How to find DotNetNuke pages that point to my dnn page

I have updated an existing user DNN page with some text. I can preview this page using the Page Management page. Since I didn't create this page I don't know which other pages/menus contain a link to this page. How can I find out which pages/menus link to this page?
Thanks
Who or what created the page?
What is the URL that you visit to edit the page? (Edit the URL here to use a phony name.)
Getting the exact number of links to a page is almost impossible without the use of a site crawler, as the page could be referenced in many ways.
Via HTML Content on a Page - This would be in the HTMLText table of the database
Via a Page-Link Menu Item - This would be in the Tabs table of the database
Via a URL-Link Menu Item - This would be in the Tabs table as well, just tied by the URL rather than the TabId
There is no report/link in the DNN Platform to list all usages.

Force SPA route navigation to return 200

I published my website (a SPA made with vue) to Github-Pages. This website uses "history mode", so the # does not appear when navigating to a different "page".
When direct URL navigation (user types website.com/downloads for example) or a refresh while not on the root page happens, the website tries to display 404.html.
When the 404.html loads, it redirects to the homepage, passing the route name taken from the URL:
<script>
const segment = 1;
//Gets the relative path and the hash of the URL.
sessionStorage.redirect = location.pathname.split('/').slice(0, 1 + segment).join('/');
sessionStorage.hash = location.hash;
//Forces the navigation back to the main page, since it's the only entry point that works.
location.replace('/' + location.pathname.slice(1).split('/').slice(segment).join('/'));
</script>
For the user, it is a bit noticeable, but it will display the correct page.
But while loading, it will report a 404 in the network tab, which could cause issues in integrations with other websites.
Is there anyway to fake a 200 response when loading these pages?
This is a typical issue with Single Page Applications using history mode (history.pushState) to simulate a full URL so that a page isn’t reloaded when the URL changes.
Since vue.js is an SPA framework, it means there is only one HTML and tag containing the “app” id. Due to this disadvantage, Google bots would not be able to read the content of a particular landing page and your website might not get the higher rankings. To make Google bots read the content, you can use two method, “Pre-rendering” and “Server-side rendering.”
Also you can try using routing in <li> and <a> tags and buttons instead of href=“/path”. Using a router link makes page navigation very fast and it benefits the SEO of your website as well.

Routing to a page with sections in two slots

I have a question regarding routing.
We have a detail page that consists of two different sections.
However, these two components/sections are in different slots.
How does the routing work in such a case ?
How can we access the detail page ?
Is that even possible ?
Routing in Spartacus is not directly related to the structure of the CMS page. A url is connected to a page structure by using the following flow:
If it's a custom application route, spartacus will not touch it
if it's a product or category route, use configurable routing to match the product or category page from the cms
otherwise it's treated as a ContentPage, the CMS is queried for a matching page.label (or part of it).
if non of the above is found, the not-found content page is loaded.
The page structure which is loaded from the CMS is rendered on the page. The LayoutComponent is used to render the template, the PageComponent is used to render the page slots and the ComponentWrapperDirective is used to map the cms components to JS components.
If you have 2 different "sections", I assume you're talking about slots. In order to render the slots, you need to configure the Layout Configuration, see https://sap.github.io/cloud-commerce-spartacus-storefront-docs/page-layout/. Since the CMS doesn't provide any info on the order an location of slots, this additional configuration is required.
There's much more to it, but I hope this gives you a start at least.

Vuejs SPA Change meta tag content from third party api

I've tried to change meta tag content like
document.title = response.data.seo_page_title[0].text;
document.head.querySelector('meta[name=description]').content = response.data.seo_description;
it change the content when inspect the page but not when i use view soure. So Google, FB and Twitter can't recognize the updated content and doesn't load the proper text when i try to share the page on social media.
View Source shows the original source that has been fetched from the network - it is not the current snapshot of the page. As you have noticed - the current snapshot of the page is available in the DevTools. If you need Google / FB / etc. to see the proper text - you will have to produce this text on the server side (when composing the HTML template) instead of in the browser.

Creating custom product page on BigCommerce

I'm trying to create a modified product page in my BigCommerce Cornerstone theme and I'm following the video on the following link:
https://stencil.bigcommerce.com/docs/custom-layout-templates
The video claims that I need to use a live URL when I create a new HTML under /template/pages/custom/product and map it in the .stencil file.
The way I created a new live URL is that I created a completely empty web page. The first difference I notice though, compared to the video is that when I navigate to the page it's not completely empty as shown in the video but shows the header and footer of the website.
When the video asks to copy the contents of the original product.html into my newly created HTML under /template/pages/custom/product, the HTML markup doesn't get picked up i.e. the page will not show components of a product page.
I got stuck at this point and cannot continue with modifying the template.
If you are creating a custom product template, you would need to map it to the live URL for a product in your store. Mapping a custom product template to a web content page won't work.
It's important to note the difference between page types. If you are creating a custom category template, you would map it to an existing category page in your store, etc.
After you map the product page URL in your .stencil file, be sure to restart Stencil CLI. You'll need to restart to see the changes reflected on localhost in your browser (i.e. a blank page at the product page url if you mapped an empty html file to it).