What are the Slack Archives?

It’s a history of our time together in the Slack Community! There’s a ton of knowledge in here, so feel free to search through the archives for a possible answer to your question.

Because this space is not active, you won’t be able to create a new post or comment here. If you have a question or want to start a discussion about something, head over to our categories and pick one to post in! You can always refer back to a post from Slack Archives if needed; just copy the link to use it as a reference..

hello, is somebody know, how to add javascript in spryker backoffice? What is the best way to do it?

Options
U031MRXNNV7
U031MRXNNV7 Posts: 8 🧑🏻‍🚀 - Cadet

hello, is somebody know, how to add javascript in spryker backoffice? What is the best way to do it?
I created new module, now I need to add javascript in table view. Of course, I can write it in twig templates, but it seems there are better way.
I found this article - https://docs.spryker.com/docs/scos/dev/front-end-development/zed/overriding-webpack-js-scss-for-zed-on-project-level.html#webpack - as I understand, I need create new file src/Pyz/Zed/OrderApiLogging/assets/Zed/js/index.entry.js
I did it with content “alert(‘test’);” - but it does not work after running npm run zed command

Comments

  • U01K43ADW5N
    U01K43ADW5N Posts: 69 🧑🏻‍🚀 - Cadet
    Options

    Have you configured your environment to look up for js files in the project level?

  • U031MRXNNV7
    U031MRXNNV7 Posts: 8 🧑🏻‍🚀 - Cadet
    Options

    of course no ) how to do it?

  • U01K43ADW5N
    U01K43ADW5N Posts: 69 🧑🏻‍🚀 - Cadet
    edited October 2022
    Options

    OOTB the demo shop uses the build config from the oryx-for-zed to build zed.
    zed script in package.json:

    "zed": "node ./node_modules/@spryker/oryx-for-zed/build",
    
  • U01K43ADW5N
    U01K43ADW5N Posts: 69 🧑🏻‍🚀 - Cadet
    edited October 2022
    Options

    we created one for our project, it may look different based on your needs.
    it looks roughly like this (removed project specifics):

    const oryx = require("@spryker/oryx");
    const oryxForZed = require("@spryker/oryx-for-zed");
    const path = require('path');
    const merge = require('webpack-merge');
    
    const mergeWithStrategy = merge.smartStrategy({
        plugins: 'prepend'
    });
    
    const myCustomZedSettings = mergeWithStrategy(oryxForZed.settings, {
        entry: {
            dirs: [path.resolve('./src/Pyz/Zed/')] // Path for entry points on project level
        },
    });
    
    const copyAssetsCallback = require('./lib/copy');
    
    oryxForZed.getConfiguration(myCustomZedSettings)
        .then(configuration => oryx.build(configuration, copyAssetsCallback))
        .catch(error => console.error('An error occurred while creating configuration', error));
    
  • U01K43ADW5N
    U01K43ADW5N Posts: 69 🧑🏻‍🚀 - Cadet
    Options

    after you are done with the build config you have to change your package.json file to use the new build.js file:

      "scripts": {
        ...
        "zed": "node ./frontend/zed/build",
        "zed:watch": "node ./frontend/zed/build --dev",
        "zed:production": "node ./frontend/zed/build --prod"
      },
    
  • U031MRXNNV7
    U031MRXNNV7 Posts: 8 🧑🏻‍🚀 - Cadet
    Options

    did it. Created frontend/zed/build.js file with content above. Changed package,json. Run npm run zed. But still the same issue. I am expecting to see an alert on my page, but nothing changed. It seems I missed something

  • U01K43ADW5N
    U01K43ADW5N Posts: 69 🧑🏻‍🚀 - Cadet
    edited October 2022
    Options

    First let's check if your javascript code was built.
    If you look for mentions of your code in your project, do you see any in the dir /public/Backoffice/assets/js ?

  • U031MRXNNV7
    U031MRXNNV7 Posts: 8 🧑🏻‍🚀 - Cadet
    Options

    Thank you! Found it! Thanks a lot!!!!

  • U01K43ADW5N
    U01K43ADW5N Posts: 69 🧑🏻‍🚀 - Cadet
    Options

    Great, if it's there you just need to import it in your twig file