These are chat archives for reactioncommerce/reaction

6th
Feb 2017
Nicholas Corder
@niccorder
Feb 06 2017 02:47

Hey all -

I'm working on creating a material design theme for the platform and am trying to wrap my head around the current stack. The docs were helpful, but I'm in a slight rut and was hopeful you could provide some information. Currently, I am trying to replace the bootstrap3 nav-bar with a custom React component. My setup is as follows:

./client/templates/base-layout.html

<template name="baseLayout">
  <!-- to use, implement Template.layout.replaces "coreLayout" -->
  <BaseAppBar class="base-app-bar">{{> Template.dynamic template=layoutHeader}}</BaseAppBar>
  <nav class="reaction-cart-drawer">{{> cartDrawer}}</nav>
  <div class="reaction-dashboard-drawer">{{> Template.dynamic template=dashboard}}</div>
  <main role="main" id="main">
    <div class="container-fluid">
      <span id="layout-alerts">{{> inlineAlerts}}</span>
      {{> Template.dynamic template=template}}
    </div>

    <footer class="reaction-navigation-footer">{{> Template.dynamic template=layoutFooter}}</footer>
  </main>
</template>

./client/templates/base-layout.js

Template.baseLayout.replaces("coreLayout");

./client/templates/toolbar/toolbar.js

import React, { Component } from "react";
import { registerComponent } from "/imports/plugins/core/layout/lib/components"

 export default class BaseAppBar extends React.Component {   .      .      .  }

// Register react component.
registerComponent({
  name: "base-app-bar",
  component: BaseAppBar
});

I assumed that this would change the navbar to my custom react component but upon a clean build I see nothing. Any guidance would be great, thanks.

Nicholas Corder
@niccorder
Feb 06 2017 03:02
Oh also, in response to the build time issue you ran into above. I actually was running into this error karma-runner/karma#1979 while using the cli... It seems you already have had an issue closed for it though(reactioncommerce/reaction-cli#11) so that may not be it :)
Brent Hoover
@zenweasel
Feb 06 2017 03:13
Nicholas, I think you might want to look at other examples where we use React components
I'm not at a computer, but I think the syntax is a little different
In regards to the question about inventory. RC already has an inventory package included
E. G. {{ React nameOfComponent}}
Nicholas Corder
@niccorder
Feb 06 2017 06:14

I believe you are correct, thank you for you for the info. Looking at ./imports/plugins/core/revisions/client/containers/settingsContainer.js it seems as though I need to change it to <div>{{ > BaseAppBar }}</div> and then put export default composeWithTracker(composer)(BaseAppBar); instead of the registerComponent(...) that I have in the toolbar.js above. However, I run into the issue where I can not dynamically add children to my BaseAppBar by doing this, right?

Thank you, by the way, I appreciate the info! I haven't worked with some of these frameworks before (Mustache/Blaze/Meteor), and they make it quite hard to trace back to the source, even w/o obfuscation.

Dennis Öhman
@madsoulswe
Feb 06 2017 07:53
@aaronjudd Actually i'm trying to replicate it locally =)
James Southern
@jms301
Feb 06 2017 09:49
Are there any good example sites of reaction commerce? Didn't spot any.
aswathm78
@aswathm78
Feb 06 2017 14:23
Hi Guys . Can anyone have any blogs or videos how we can deploy reaction commerce in production ?
servers
Aaron Judd
@aaronjudd
Feb 06 2017 14:57
@rodrigomf24 re: inventory: Reaction maintains an inventory collection, where the inventory updated/quantity/status (backorder,shipped,reserved) are maintained using hooks triggered by product/cart updates. You could build UI for that collection if that worked and you just needed UI/reporting (roadmap item)… or you can disable, but write your own hooks to maintain inventory.
@aswathm78 really deploying can be the same as any node.js application (or more specifically -> like any Meteor application). Heroku, AWS, Docker,etc.. our (admittedly lightweight) docs should help as well: https://docs.reactioncommerce.com/reaction-docs/master/deploying)
neil saitug
@niftynei
Feb 06 2017 21:40
hi i'm having some trouble getting a custom theme to show up
i've copied what's in the reaction-example repo (manually instead of via a pull) but i'm not seeing the toolbar turn to red
i've got the following directory structure set up
imports/plugins/custom/example-theme/
     - register.js
     - client/ 
            - index.js
     - styles/
             -main.less
neil saitug
@niftynei
Feb 06 2017 21:45
oh wait, my styles directory should be inside client/
neil saitug
@niftynei
Feb 06 2017 21:57
confirmed fix lol