A light box that appears only on one specific Category page

Rodrigo_Cerqueira · July 22, 2024, 6:04pm

Question:
[Hi Wix community I need to Create a light box in one specific Category page without appearing on other Category pages? ]

Product:
[Wix Studio Editor.]

What are you trying to achieve:
[A light box in one specific Category page without appearing on other Category pages: https://www.capuloza.com/category/personaliz%C3%A1veis]

What have you already tried:
[ I use this velo code but it appears on the other category pages:
$w.onReady(function () {
$w(“#caixa1”).hide();
setTimeout(() => {$w(“#caixa1”).show(“fade”) ; },500);
} )

export function concordo_click(event) {
$w(“#caixa1”).hide()

}]

CODE-NINJA · July 22, 2024, 6:49pm

Ok, got you!

You are talking about your “green-looking-lighbox” appearing everytime on the screen → what is very annoying !!!

https://www.capuloza.com/category/promoções

Everytime you get the LIGHBOX-OPENED…

But how to determine the right specific category-page?
Well, which options do we have ?

What about the URL ?

As you can see, this could be already the way to our SOLUTION, right?

But what to do and how to get the right function created for this, to generate an automatic process → which will do all the MAGIC for us automatically?

Well let’s have a look !

We know how to differ between different CATEGORIES now, to be able to get a specific category.
The next step is → how to generate the CODE for it.

You can try…

$w.onReady(()=> {
        let url = wixLocationFrontend.url; console.log(url);
});

This should give you the URL of the current page you are currently on.
Something like… →

https://www.capuloza.com/category/capulanas

You could already work with this result.
But isn’t there even more we can do ???

import wixLocationFrontend from "wix-location-frontend";

$w.onReady(()=> {
    let pageLocation = wixLocationFrontend;
    let newPath = pageLocation.path; console.log('Path: ', newPath);
    let url = pageLocation.url; console.log('URL: ', url);
    let prefix = pageLocation.prefix; console.log('Prefix: ', prefix);
    let protocol = pageLocation.protocol;  console.log('Protokoll: ', protocol);
    let query = pageLocation.query; console.log('Query: ', query);
});

What about? → https://dev.wix.com/docs/velo/api-reference/wix-router/introduction

Try to complete my suggestions, with your code, combining them together…

$w.onReady(()=> {
    let pageLocation = wixLocationFrontend;
    let newPath = pageLocation.path; console.log('Path: ', newPath);
    let url = pageLocation.url; console.log('URL: ', url);
    let prefix = pageLocation.prefix; console.log('Prefix: ', prefix);
    let protocol = pageLocation.protocol;  console.log('Protokoll: ', protocol);
    let query = pageLocation.query; console.log('Query: ', query);

    $w('#caixa1').hide();

    if (........) {setTimeout(() => {$w('#caixa1').show('fade') ; },500);}
    else {$w('#caixa1').hide();}
});

Modify and complete the code…

Rodrigo_Cerqueira · July 22, 2024, 7:01pm

Thanks a lot russian-dima for your reply. I´m going to dive on you reply

Rodrigo_Cerqueira · July 23, 2024, 7:59am

Hi @CODE-NINJA. Yesterday your reply landed at dinner time. It was the desert. The URL is https://www.capuloza.com/category/personalizáveis. I´m going to try adjust your code.

CODE-NINJA · July 23, 2024, 9:38am

Take your time → good quality coding → needs time.

Rodrigo_Cerqueira · July 23, 2024, 11:44am

@CODE-NINJA I´m a newbie in velo code. This is my first experience. In general terms I understand the code wants to achieve. I looked for similar code explanations and I found this https://www.analyticsmania.com/post/page-path-vs-page-url-in-google-tag-manager/

Because the site is alive I´ve created a test page: https://www.capuloza.com/category/categoria-teste

First question could you help me to write the path for: ```
let newPath = pageLocation.path; console.log('Path: ', newPath);

The path is: /category/categoria-teste 
The url is https://www.capuloza.com/category/categoria-teste
The prefix is: category
The protocol is: https:\\
The query is: ?????

But I´m not doing it right in the velo code syntax

CODE-NINJA · July 23, 2024, 4:39pm

The better way to present your results is…

Show your current running code.
Show the console-log results on a pic, related to the running code.

Then everyone can see the running code and the related results and make own conclusions.

This will save you time, because you do not have to describe everything in detail.
Instead your helper just take a look onto your code → (pasted as a CODE-BLOCK, not as a pic) and the corresponding LOG (pasted as pic, not as a code).

But so far i can see → you got already what you need.
Didn’t you ?

There are still other ways to resolve this.

Rodrigo_Cerqueira · July 23, 2024, 5:13pm

Thank you @CODE-NINJA for your guidance in this new world (for me).

At the moment I´m stuck with the code syntax errors. I copied the code you give me and try to adjust it to my needs. Could you please help me to write the path for: ```
let newPath = pageLocation.path; console.log('Path: ', newPath) The path is: /category/categoria-teste A then I try to figure out the other parameters ?

[{

$w.onReady(()=> {
let pageLocation = wixLocationFrontend;
let newPath = pageLocation.path; console.log('Path: ', newPath);
let url = pageLocation.url; console.log('URL: ', https://www.capuloza.com/category/Categoria test);
let prefix = pageLocation.prefix; console.log('Prefix: ', prefix);
let protocol = pageLocation.protocol; console.log('Protokoll: ', https://);
let query = pageLocation.query; console.log('Query: ', query);

$w('#caixa1').hide();

if (........) {setTimeout(() => {$w('#caixa1').show('fade') ; },500);}
else {$w('#caixa1').hide();}

});

I couldn’t found a solution for the page.
https://www.capuloza.com/category/personalizáveis

I´m sorry for my limitations…

CODE-NINJA · July 23, 2024, 7:18pm

Ok, i see a lot of → CHAOS <—.

Let us start from scratch again.

1) Your code should start in the very first line with an import of …
import wixLocationFrontend from 'wix-location-frontend';

.
.
2) Followed by…

$w.onReady(()=> {   
   //all other code here.
});

.
.

STEP-I-RESULT:

import wixLocationFrontend from 'wix-location-frontend';

$w.onReady(()=> {console.log('Page ready...');
   //all other code here.
});

3) Now expand your code → step by step, adding more and more FUNCTIONALITY into it…

You add now the following code-part…

    let pageLocation = wixLocationFrontend;
    let newPath = pageLocation.path; console.log('Path: ', newPath);
    let url = pageLocation.url; console.log('URL: ', url);
    let prefix = pageLocation.prefix; console.log('Prefix: ', prefix);
    let protocol = pageLocation.protocol;  console.log('Protokoll: ', protocol);
    let query = pageLocation.query; console.log('Query: ', query);

.
.

STEP-II-RESULT: (your code should now look like…)…

import wixLocationFrontend from 'wix-location-frontend';

$w.onReady(()=> {console.log('Page ready...');
    let pageLocation = wixLocationFrontend;
    let newPath = pageLocation.path; console.log('Path: ', newPath);
    let url = pageLocation.url; console.log('URL: ', url);
    let prefix = pageLocation.prefix; console.log('Prefix: ', prefix);
    let protocol = pageLocation.protocol;  console.log('Protokoll: ', protocol);
    let query = pageLocation.query; console.log('Query: ', query);
});

Run this code on the page of your choice (LIVE-SITE)
Open the console and find the logs, beginning with → Page is ready…
Do a screenshot and show the results.
Also do deactivate → WARNINGS ← in your logs, no need for debugging. You can reactivate them later again.

2024-07-23 21_17_16-Window436×463 9.12 KB

You should get some logs in your console…
What did you get? → screenshot ?

Rodrigo_Cerqueira · July 30, 2024, 11:18am

Hi @CODE-NINJA. Thank you for your detailed post. Could you check the message I send you via your website.

CODE-NINJA · July 30, 2024, 7:20pm

Please resend here your message —> russian-dima@hotmail.de

Rodrigo_Cerqueira · July 31, 2024, 2:32pm

Hi @CODE-NINJA could you check the spam?

CODE-NINJA · July 31, 2024, 5:02pm

You got → REPLY. → Yes, found your e-mail in my spam, sorry.

Topic		Replies	Views
wixLocation.path (Specific Page) Ask the community code , question	23	2438	January 28, 2018
Link to product category using wixcode Ask the community code , question	6	530	July 5, 2019
How to create a specific page for each category? Ask the community code , wix-stores , question	9	1572	December 19, 2017
Hide an element in lightbox depending on path of url Ask the community code , question	15	587	April 2, 2019
- SOLVED - Stay on the same page on Log in if user is on a specific URL Ask the community code , wix-stores , question	4	365	January 20, 2019

A light box that appears only on one specific Category page

https://www.capuloza.com/category/capulanas

Related topics