Here is the issue I am trying to solve with creating dynamic routes in NextJS.
-products
-[category]
-[size]
-[product]
The issue is some products don't have a size parameter and would need to bypass this parameter to get to the product landing page. Here is an example of the different routes I would like to have:
/products/ceiling-lighting/2x4/light-one
/products/ceiling-lighting/2x4/light-two
/products/ceiling-lighting/2x2/light-one
/products/ceiling-lighting/2x2/light-two
/products/light-switch/switch-one
/products/light-switch/switch-two
Is this possible to do with dynamic routes?
Nope it will not work, you have to pass required number to parameters/segments to reach that specific dynamic page, but as juliomalves said, you can use catch all routes, after using this you will get your parameters in the form of array and you can navigate programmatically depending on number of parameters or whatever logic you want.
Related
I'm now in the process of developing my small project and I'm not sure if it's even possible to do this the way I will describe below, so... I have dynamic routes like "/[community]/[townName]". How can I generate static paths where [townName] is constrained to [community]?
In other words - let's say we have townName "abc1". This town is in community "xyz1" so the page /xyz1/abc1 should be accessible and NOT throw 404. But there is also town with the same name "abc1" in "xyz2". So the path /xyz2/abc1/ should also be accesible.
However there is no town with same name in community xyz3 so I do not want to generate page for /xyz3/abc1/ - user should see 404 error.
Of course each town has it's unique ID in database and I could use it to generate pages, but I want my url to be SEO friendly.
All help and tips are appreciated. Thanks!
You should check getStaticPaths and dynamic routes from official Next.js website. It has more than one way to do what you want but there are additional customization options.
I'm building a small application and want to build a simple routing system but I got into a small issue.
I have my category page which is dynamic, and a single post which will be category/post-name now I want that my category page to be only accessible when the user goes to website.com/category1/ or website.com/category2/ or website.com/category3/ but not on other dynamic routes.
Is there a way to do it?
Predefined routes take precedence over dynamic routes, and dynamic routes over catch all routes. For example:
pages/category/category1.js - Will match /category/category1
pages/category/caregory2.js - Will match /category/category2
pages/category/category3.js - Will match /category/category3
pages/category/[category_id].js - Will match /category/category4, /category/category5, etc. But not /category/category1, /category/category2, /category/category3.
Using the WooCommerce API I want to send an HTTP GET request to download all products with a specific attribute.
The documentation says the URL to do this with is this
/wp-json/wc/v3/products
And I can add parameters to the URL in order to filter the products.
I have successfully added filters for page and page count:
wp-json/wc/v3/products?per_page=100&page=10
I have also managed to get only available products with this parameter:
wp-json/wc/v3/products?&stock_status=instock
However, I cannot manage to add a filter for the attributes. I have tried the following ways to write the URL and non of them work
wp-json/wc/v3/products/?attribute=1
wp-json/wc/v3/products/?
wp-json/wc/v3/products/?attribute_pa_емаг=Да
wp-json/wc/v3/products/?filter[pa_емаг]=10
What would be the correct way to write the URL?
(Note: The attribute is pa_емаг and its value is Да)
The correct call would be:
/wp-json/wc/v3/products?attribute={attribute-taxonomy}&attribute_term={term-id/tag_ID}
Where attribute-taxonomy would be full slug in your case "pa_емаг", and term-id/tag_ID the id of "Да".
I need to change the name of the route when I change the language. For example, I have a route /en/career but when I change to Czech language, I need a route /cs/kariera. Basically I need the URLs to be localized. Right now, when I'm on /en/career and change language to cs, I get /cs/career. This page should not exist at all and when I render the page on server, I correctly get 404. Can I do something like this with next-i18next package? If so, how?
I found this package https://github.com/vonschau/next-routes-with-locale which probably does exactly what I need but it's apparently no longer maintained and doesn't work under next.js 8.
What I did eventually was to use next-routes package and defined specific route for every page, such as:
module.exports = routes()
.add('en-career-listing', '/en/career/:listing', 'career/listing')
.add('cs-career-listing', '/cs/kariera/:listing', 'career/listing')
.add('en-career', '/en/career', 'career')
.add('cs-career', '/cs/kariera', 'career')
.add('en-our-story', '/en/our-story', 'our-story')
.add('cs-our-story', '/cs/nas-pribeh', 'our-story')
And I also had to create a custom Link component based on next/link where I manually added the language to URL.
next-i18next supports this functionality, it called locale subpaths.
You need to configure: new NextI18Next({ localeSubpaths: 'foreign' }), and then use the Link & Router that NextI18Next instance has on it, not the next/router.
I have a Drupal site and I have setup a view to power the front page.
My goal is to be able to pass 0-2 arguments to the home page, that get passed into the view. However, I still need the normal Drupal pages to work. The list of arguments is known.
For example:
mysite.com/berlin/birds would pass in "berlin" as the first argument and "birds" as the second argument to the view that powers the front page.
mysite.com/berlin would just pass in one argument, "berlin"
mysite.com/admin would load the normal admin pages in Drupal
I'm not clear on how to achieve this. Is there a hook I can use? I can't find one or think of one. Is there a way to specify this in the argument for the view itself? Perhaps I can write a hook that interjects when the URL is being loaded, and rewrite in the background?
The solution I currently have is to add these paths (since my arguments are known) to the menu system. This works, except that when I the pages they aren't the front page, so the pages don't use the node themes I want (they use the node details theme).
I don't think you can really do this without custom code. The View needs a path before it starts taking arguments, and your URLs start with the arguments. What you can do is fake it with custom code. I've used something like this:
/**
* Implements hook_init().
*/
function mymodule_custom_init() {
$item = menu_get_item(); // Matching Drupal path
if (!$item) { // There is no matching Drupal path.
$_GET['q'] = 'view_path/' . $_GET['q']; // Fake path path.
} // if
} // mymodule_custom_init
Then you give the view a path of "view_path" and it responds to everything that doesn't match anything else in Drupal's paths.
There is a spot in the views UI for "Argument handling code" that takes a small snippet of php - http://drupal.org/node/70145
You could run some code there that checks to see if you are on the front page (or arguments are not present or whatever)and insert the arguments you want.
Another way is to set arguments via a hook_views_pre_view or hook_views_pre_build. Is better because you are sure you don't break other stuff (like another view block).
function MYMODULE_views_pre_view(&$view){
if ($view->name == 'your_view_name' && drupal_is_front_page()) {
$view->set_arguments(array('you_argument','you_second_argument'));
}
}