Link to product category using wixcode

Discussion Ask a question
,
1

Hi, I want to click on picture then go to products page and there to be shown an specific products category using wix code (or other way if it’s possible, like anchor).
Here is my code:

$w.onReady(function () {  
   $w("#image14").onClick((event) => {       
     console.log("test...find... ......")       
     wixLocation.to("/jewelry-collection");        
     wixData.query("HANDMADE").find().then( (results) => {  if(results.items.length > 0) {  let firstItem = results.items[0];     
      } else {       
      console.log("not fond filter category ......") }})   
      .catch( (err) => {  let errorMsg = err;   } ); });

Also I tried the following code:

$w.onReady(function () {     
$w("#image14").onClick((event) => {         
console.log("test...find... ......")         
wixLocation.to("/jewelry-collection");         
wixData.query("HANDMADE") .find()     });
});

what is wrong?
Please help me. Thanks

2

Don’t put it right underneath your onReady function for the page as it might think it should be running that onClick event as soon as the page loads.

You will need to click on the image that you want to be linked and if it is straight to an anchor on the page, then you can use the link settings in the Wix Editor to do that already, simply by linking the image to an anchor. - https://support.wix.com/en/article/linking-an-element-to-an-anchor

To do it through code with an onClick event, then you will need to click on the image you want to be linked and add an onClick event to the properties panel for the element.
https://support.wix.com/en/article/corvid-tutorial-adding-custom-interactivity-with-events

You will then get a piece of code at the bottom of your page code appear which begins with export function (then your image element ID name) with either _onClick or _click after it.

So where it says //Add your code here, simply delete this line and use Wix Location to take the user to the appropriate page as like this below
https://www.wix.com/corvid/reference/wix-location.html#to

$w.onReady(function () {

export function your-image-element_onclick(event) {
wixLocation.to(`/Wix-URL-goes-here`); 
}
3

Thanks givemeawhisky ,
Now the problem is: how can I link an anchor to my category displayed on filter products page?
So, I have a page /all-collection, on this page are all my products, also I have some filters here (Filter by price, colors, size). I want to create an anchor which redirect the user on /all-collection, where is applied a specific filter.
My problem is the filter, because I wouldn’t to create a page which these product (like: /all-collection/blue-products).

I tried the following code to filter the product, but it doesn’t work:

wixData.query("blue products").find().then( (results) => {      console.log(results.items); } );

I want to specified that “blue products” is a category created on store products page.

I found the same questions here: https://www.wix.com/corvid/forum/community-discussion/linking-to-products-store-with-specific-filters-set but no answers :frowning:

4

It’s actually OK to add an onClick() event handler to a component in the page’s onReady() function. Even though it’s being defined in the onReady() function, it doesn’t run. The event handler will only be invoked when the even is triggered - that is, when the image is clicked.

The main issue that I see with your code is that you have code after the wixLocation.to() . That code will never run since you just told the code to go to another page. Without diving into all of the details of what you are trying to do, what you can do is:

on the current page

  • perform the query

  • save the result in local storage using wix-storage

on the page you just jumped to

  • check if there’s something in local storage

  • if so, retrieve the local storage data

  • if not, then just use the default display for the page

  • clear the local storage

  • use the data retrieved from local storage to display the appropriate information

5

Hi Yisrael,

Thank you for answer.
I am not familiar with wix in general. Can I perform a query on my products, if I don’t have dataset? Exist a default database where are saved all my products and is possible to perform a query in that database?

Is possible to link an element to a product category, or link to all products page with filter already applied?

Thanks,
Teodor

6

In order to familiarize yourself with Wix, you should consult the Corvid documentation . See the Wix Data Corvid docs to see what you can do with Corvid and Wix database collections.

7

Yes you are right, I overlooked that fact that the data query is after the location, so it would have sent the user to another page and not ran the code afterwards.