These are chat archives for reactioncommerce/reaction

19th
May 2018
wildwolf1991
@wildwolf1991
May 19 2018 03:42
Hello,everyone.
Greetings!
Could please explain how to add slider into my site?
I've just cloned reaction-hydrotik-plugin from github.
But I don't know how to use it.
Abhishek
@thegtagamer
May 19 2018 08:38
Hello everyone, Is there any way we can serve custom js files to the reaction u-i
Abhishek
@thegtagamer
May 19 2018 10:58
Ive been trying to integrate semantic-ui
Got the js bundle to work with meteor but the css files are not being loaded internally, is there any way i can integrate it through cdn and make it available for all the pages.
P.S - i tried to include it as a header in template and serve it using http, also tried to include it into the main.less file...no luck yet
Guus Huizen
@iAmGuus
May 19 2018 11:01
Is it possible to use sass instead of less?
Abhishek
@thegtagamer
May 19 2018 11:05
@wildwolf1991 1. go to this dir using cd projname/imports/plugins/custom 2. then git clone repo link again navigate to your project dir and use reaction cmd
Loan Laux
@loanlaux
May 19 2018 11:06
@iAmGuus Perfectly possible. You'll have to set up a plugin like https://github.com/fourseven/meteor-scss and you'll be good to go.
Abhishek
@thegtagamer
May 19 2018 11:07
@loanlaux Hey thanks for the help yesterday, I was able to write the custom plugins and load it into the pdp :smile:
Loan Laux
@loanlaux
May 19 2018 11:08
@thegtagamer What CSS files are you referring to? Stylesheets from your own app or external assets provided by a third party solution?
Guus Huizen
@iAmGuus
May 19 2018 11:08
@loanlaux alright thanks!
Abhishek
@thegtagamer
May 19 2018 11:08
@loanlaux third party...Ive been trying to include Semantic UI framework
Loan Laux
@loanlaux
May 19 2018 11:08
@wildwolf1991 Are you referring to my fork of reaction-hydrotik-plugin or the original one?
@thegtagamer I got you. You'll probably want to use something like this: https://react.semantic-ui.com/. When integrating front-end frameworks/libs, always bear in mind that Reaction is a React app for the most part. Look for React integrations of these libs and only fall back to the good old <script /> or <link /> way if there's no other solution.
Abhishek
@thegtagamer
May 19 2018 11:13
Ssend.jpg
@loanlaux Heres I installed it to the meteor environment and got this to integrate
Loan Laux
@loanlaux
May 19 2018 11:14
Yes, but for a CSS framework like this that has a set of React components available on NPM, just skip this and use the React lib instead.
@pnewell4_twitter Great work on this issue. I've noticed this litteraly yesterday on a client's marketplace shop and was going to file it after investigating a little deeper. Thanks!
Abhishek
@thegtagamer
May 19 2018 11:16
@loanlaux I did install the css package too...But The problem is i'm not able to make it global for all the files
Loan Laux
@loanlaux
May 19 2018 11:16
@stunjiturner Can you run git remote -v and post the output on here?
Where do you import the CSS from, @thegtagamer?
I would do it from something like /imports/plugins/custom/<your_plugin>/client/index.less
And then @import "<url_of_file>.css";
Abhishek
@thegtagamer
May 19 2018 11:18
@loanlaux i did an meteor npm install in the imports/plugins.custom/pluginname/client/index.less
and then imported the file into the main.less file
Screenshot from 2018-05-19 16-49-05.png
Loan Laux
@loanlaux
May 19 2018 11:20
Oh, that's where the mistake is. You should do {}/node_modules/<stuff> instead of ../../node_modules/<stuff>
{} means <root_of_the_project> in LESS imports
Guus Huizen
@iAmGuus
May 19 2018 11:24

When I import my scss files into the project. I get this error:

   While processing files with fourseven:scss (for target web.browser):
   /client/plugins.scss: Scss compiler error: Error: _includePaths is not iterable
   on line 8 of {}/client/plugins.scss
   >> @import "/imports/plugins/custom/firstplugin/client/index.scss";

I have an index.scss in the /imports/custom/plugin/client/ that imports the style.scss in /imports/custom/plugin/client/styles/ which imports a file with these contents:

.rui.navbar {
  & .brand {
    font-size: 20px;
    font-weight: 900;
    height: 61px;
    letter-spacing: 0;
    text-transform: uppercase;
  }
}
Loan Laux
@loanlaux
May 19 2018 11:27
@iAmGuus Same answer as above. Use {} to refer to the root of the project. See https://guide.meteor.com/build-tool.html#%3Cspan%20class='highlight'%3Eless%3C/span%3E.
Abhishek
@thegtagamer
May 19 2018 11:27
@loanlaux still no luck
Loan Laux
@loanlaux
May 19 2018 11:27
Any error in your console @thegtagamer?
Abhishek
@thegtagamer
May 19 2018 11:27
nope, its running just fine
But when im writing a button component using the new stylesheet its not working
Loan Laux
@loanlaux
May 19 2018 11:28
How do you write your button component?
Guus Huizen
@iAmGuus
May 19 2018 11:30
@loanlaux thank you so much
Abhishek
@thegtagamer
May 19 2018 11:31
@loanlaux
class SemanticButton extends Component {
render() {
return (
<div>
<button className="ui button">Test Button</button>
</div>
);
}
}
Loan Laux
@loanlaux
May 19 2018 11:32
@thegtagamer As I said earlier, I would advise using semantic-ui-react instead. Here's an example straight from the docs:
import React from 'react'
import { Button } from 'semantic-ui-react'

const ButtonExampleButton = () => (
  <Button>Click Here</Button>
)

export default ButtonExampleButton
Abhishek
@thegtagamer
May 19 2018 11:35
@loanlaux Thanks I'll try this...Is there any way we can Globally serve the file from the semantic-ui cdn repo ?
Loan Laux
@loanlaux
May 19 2018 11:36
Well, you won't technically serve them since the CDN already takes care of that. What do you mean by "serve the file"?
Abhishek
@thegtagamer
May 19 2018 11:36
include them in the <head></head> of the core layout files
Guus Huizen
@iAmGuus
May 19 2018 11:37
I changed the import statement to @import "{}/imports/plugins/custom/firstplugin/client/styles/style.scss"; but still getting the same error, where should I exactly use {} to refer to project root if I can use relative paths instead?
Abhishek
@thegtagamer
May 19 2018 11:39
@loanlaux in this way ill just over ride the existing classes to use the new ui component classes instead of writing react components separately for each structure
Loan Laux
@loanlaux
May 19 2018 11:39
That's not quite the way Meteor works. @import'ing them from a LESS file in your Reaction plugin should do just fine. However I just noticed that Semantic UI has a Meteor package, which is probably what you're looking for. https://semantic-ui.com/introduction/integrations.html
But once again I strongly advise you to simply use the React components provided by semantic-ui-react.
wildwolf1991
@wildwolf1991
May 19 2018 13:16
Hi, Loan
How are you?
I have another question for my project.
Could you please explain how to add slider into my homepage?
Do I have to do theme customization or import slider plugin?
Loan Laux
@loanlaux
May 19 2018 13:43
@wildwolf1991 You should be fine following the custom home page tutorial that's in the docs and using your favorite React slider package
wildwolf1991
@wildwolf1991
May 19 2018 13:47
@loanlaux I want to use your plugin.
But it does not work.
Loan Laux
@loanlaux
May 19 2018 13:47
Which one?
wildwolf1991
@wildwolf1991
May 19 2018 13:47
Please check this image.
loan1.png
reaction-hydrotik-plugin-master
Loan Laux
@loanlaux
May 19 2018 13:49
Please check the project's readme file. The installation instructions explain how to install Slick, which is required to use this theme.
wildwolf1991
@wildwolf1991
May 19 2018 13:50
Thanks
wildwolf1991
@wildwolf1991
May 19 2018 14:32
@loanlaux I just did following installation instructions.
But I got this result.
image.png
Now I can not see any nav bar.
Loan Laux
@loanlaux
May 19 2018 14:33
Hmm. Are you sure you ran reaction reset -n before restarting Reaction?
wildwolf1991
@wildwolf1991
May 19 2018 14:33
nope.
Loan Laux
@loanlaux
May 19 2018 14:34
Same as before, that was in the installation instructions. :-)
Globally speaking, Reaction requires you to either reaction reset or flush the Packages collection every time you install a plugin
wildwolf1991
@wildwolf1991
May 19 2018 14:37
And what about database? I am scare reaction reset -n will remove all datas from my database.
Yesterday, I used this instruction and lost whole my work.
Loan Laux
@loanlaux
May 19 2018 14:39
It will. And if you can't flush the database altogether, simply flush the Packages collection and restart Reaction. However, I recommend that you set up product fixtures so that you can run reaction reset without blowing up all your products. Keep in mind that Meteor's built-in development Mongo shouldn't be seen as a viable, persistant DB.
wildwolf1991
@wildwolf1991
May 19 2018 15:40
Thank you.
@loanlaux I have another question. When I do theme customization, where do I start? Where should register.js be created? imports/plugins/custom or client/themes from root directory.
Loan Laux
@loanlaux
May 19 2018 15:46
I suggest that you start by reading the docs about this topic. The customization guide is a good place to start: https://docs.reactioncommerce.com/reaction-docs/master/plugin-creating-2. Then, follow the "creating a theme" tutorial: https://docs.reactioncommerce.com/reaction-docs/master/creating-a-theme.