How to use it in our PS module ?

[CreativeBulma]

Hi,

in the README you say:

Note: If you use PrestaShop, there's no need to install – the UI kit is already installed in PrestaShop.

But when I copy/paste some code from http://build.prestashop.com/prestashop-ui-kit like the select box component into my configure.tpl file I get the old design and not the one from PSUI.

Do we have to do something special to use it in our module development ?

Regards

[TheTakylo]

Is there a solution ? Because even when importing css / js files there are style conflicts with PrestaShop

[matks]

Ping @NeOMakinG

[NeOMakinG]

On legacy page, how the module team does is that they import the UIKit inside a new parent class/id, so they only have the last uikit release on their app without creating conflict with the existing BO style @TheTakylo

[TheTakylo]

@NeOMakinG Okay, so how can I make it look the same as here for example

[NeOMakinG]

@TheTakylo import it by using npm install --save prestakit, then import it inside a scss selector like this :

#myModulePageSelector {
  @import '~prestakit/dist/bootstrap-prestashop-ui-kit.css';
}

That should be fine and override the style from the BO, I think that's how the module team does...

I agree that's dirty as hell, but we're trying to improve that :)

[justeen35]

Hi, just tested that it works 👍

You might want to add this to documentation https://devdocs.prestashop.com/ I add trouble finding this

[NeOMakinG]

@justeen35 sorry for the late answer, I think I'm gonna work on that after the next uikit release which will be way complete and reusable!

[JS-starlord]

@justeen35 sorry for the late answer, I think I'm gonna work on that after the next uikit release which will be way complete and reusable!

Any news about the release of the next uikit ?

[NeOMakinG]

@JS-starlord It's released

https://github.com/PrestaShop/PrestaShop/pull/18396 currently working on the BO theme to use source files!

[JS-starlord]

Is it possible to use uikit without entering in conflict with Prestashop BO's bootstrap ? If i compare popovers on ui storybook and popovers on my module, there is clearly a visual difference (see attachment). How can i get the exact same visual of prestaui kit when developing a module ?

on my module's back-office :

on https://build.prestashop.com/prestashop-ui-kit/?path=/docs/popovers--popovers

[NeOMakinG]

I think @PrestaShop/prestashop-modules team does include the UIKit inside a specific selector in order to override the default theme bootstrap on a legacy controller

[JS-starlord]

I don't see any prestashop official modules using uikit, do you have some hint to guide me ? I have try to put my uikit import in a body selector for my module, but it's don't seem to totally override the default theme

[NeOMakinG]

@PrestaShop/prestashop-modules do you've some modules using the UIKit ?

[alisamie97]

@TheTakylo import it by using npm install --save prestakit, then import it inside a scss selector like this :

#myModulePageSelector {
  @import '~prestakit/dist/bootstrap-prestashop-ui-kit.css';
}

That should be fine and override the style from the BO, I think that's how the module team does...

I agree that's dirty as hell, but we're trying to improve that :)

i tried but no changes. i installed prestashop-ui-kit by npm in /<myshop>/modules/<mymodule>/src/ and it created node_modules directory

then i made a file named back.scss and loaded it in module config page like this: $this->context->controller->addCSS('back.scss') and checked through view page source and it is loaded

then i write this part you mentioned #myModulePageSelector { @import '~prestakit/dist/bootstrap-prestashop-ui-kit.css'; } not working and tried this #myModulePageSelector { @import '../../node_modules/prestakit/dist/bootstrap-prestashop-ui-kit.css'; }

[NeOMakinG]

Hey @stifler97, did you properly add the selector (might be stupid but I prefer to ask)?

Also, $this->context->controller->addCSS('back.scss') won't work, you need a preprocessor such as Webpack to "compile" the SCSS in order to import the CSS