Needed an opinion regarding embedded scripts.

[vocal cobalt]

I want to create an embedded script to modify DOM elements on product page.
the modifications will be made depending on product details so I'll need to get the product object.

there are two approaches wix provides

1. self hosting the script
2. using wix cli

which approach is better for this?
also would I be able to make api calls using wix cli?

[surreal meteor]

Hey,
You will be able to achieve that with both options.

With WIX CLI you won't need to take care of:

• Hosting - you can use the CLI to deploy your assets to the cloud for free (by running yarn release )
• Easier start - run npm create @wix/app@latest (quick start guide) and then npm run generate to add your embedded script.
• Easier to extend in the future (again with yarn generate)
• And yes, you will be able to make API calls with the WIX CLI (the syntax should even be a bit simpler with WIX CLI)

Read more about it in our docs:

• Intro to wix frameworks
• Choose the right development framework
• Wix CLI docs

[vocal cobalt]

thanks 🙂

[vocal cobalt]

Hi @surreal meteor again. could you help me on this one.

I've created custom self-hosted app on wix
and then using wix-cli created and embedded script extension on it. The issue is I'm not able to fetch products using products.queryProducts()

here is the code I'm attempting:

embedded.html:
<script type="module" src="./core.js" accesstoken="true"></script>

core.js:

import { createClient } from "@wix/sdk";
import { seo } from "@wix/site-seo"; 
import { products } from '@wix/stores';

console.log("loading product script... test-v1");
const wixClient = createClient({
  auth: site.auth(),
  host: site.host({ applicationId: "<my-app-id>" }),
  modules: {
    seo,
    products,
  },
});

export const injectAccessTokenFunction = wixClient.auth.getAccessTokenInjector();

console.log("Wix Client => ", wixClient);

wixClient.products.queryProducts().find().then((productsResult) => {
  console.log('Products => ', productsResult)
});

wixClient.seo.title().then((title) => {
  console.log("Site title:", title);
});

this was in reference to wix-site npm docs
https://www.npmjs.com/package/@wix/site

here I was able to get the site title which is a frontend module but not the products. (I have products on my test website)

[pine prawn]

👀 Looks like you’re trying to post some code? I can help... probably more eagerly than I should.
-# FYI: My humans sent me back to the Academy to spend more time training my unformatted code detection skills. And now I'm back 😎. This is a friendly test. 🛠️

[pine prawn]

👀 Pssst… here's the quick tip! If you're sharing code, could you drop it in like this?

```js
const myCode = 'here';

export function myFunc() {
return true;
}
```

✨ It formats it all nice and shiny (example below) and makes it waaaay easier for everyone to help you out.
Because messy code? Chaos. Formatted code? Beautiful, helpful chaos. 🛠️

const myCode = 'here';

export function myFunc() {
    return true;
}

Alright. That’s the tip.
— StudioBot 🤖✨

[vocal cobalt]

@surreal meteor also, do embedded script only run on page reloads?

if so I won't be able to modify UI elements on product page when user is browsing through multiple products as wix stores are SPAs

what approach should I use for this then. or it can be achieved using embedded scripts and I'm doing something wrong?

[paper spindle]

@vocal cobalt the script lives even through page navigation.

You can use this for example to get notified on page changes.

https://dev.wix.com/docs/client/api-reference/events/introduction

[vocal cobalt]

@Uri thanks. this is exactly what I needed

[vocal cobalt]

Hi @paper spindle do you know with what event can I get product ids of all products in catalog/all products pages?

I was able to get them on "AddProductImpression" event. but this doesn't trigger on catalog/all products pages of all sites/themes.

is there any other approach I could try. I highly appreciate the help

[surreal meteor]

Maybe https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-plugins/about-site-plugin-extensions will be a better solution for what you're trying to achieve?