reactioncommerce / reaction

Mailchimp Open Commerce is an API-first, headless commerce platform built using Node.js, React, GraphQL. Deployed via Docker and Kubernetes.

Mailchimp Open Commerce (formerly Reaction Commerce)

Open Commerce Website | Twitter | Documentation | Discord | Discussions

Mailchimp Open Commerce is an API-first, headless commerce platform built using Node.js, MongoDB, and GraphQL. It plays nicely with npm, Docker and Kubernetes.

Features

Fast	Returns data in split seconds, and faster queries mean faster web pages
Proven	Open Commerce fuels sites doing 10's of thousands of orders per day with 100's of thousands of products
Composable	A flexible plugin system allows you to pick and choose which integrations work best for you
Multi-tenant	Host multiple shops in the same installation
Scalable	Start out with a single server and scale up to hundreds
Flexible Products	Allows Products, with options and variants to fit a wide variety of needs
Inventory	Track inventory, allow or disallow backorders and more
Shipping	Integrate with a shipping rate provider or build your own custom table
Taxes	Integrate with a tax rate provider or build your own custom tax table
Fulfillment	Flexible fulfillment system allows you create your own fulfillment methods
Order Tracking	View and manage your orders in the included admin system
Emails	Customizable templates for Order confirmations and more
Open	Fully open source. Never be locked in again

Getting started

To start working with your own project built on Mailchimp Open Commerce you can start by using our new CLI. The CLI is the quickest and easiest way to develop on Open Commerce. It allows you to create and work with API, Admin, and Storefront projects all via the command line.

What you need

• We recommend installing nvm

• 14.18.1 ≤ Node version < 16

• Git

• Docker

• Docker Compose

  In addition, you need to have your system setup for SSH authentication with GitHub

Install the CLI

First install the cli by running:

npm install -g reaction-cli

You can test to see if it has worked here by running:

reaction help

Creating a project

You can create your Open Commerce project by running:

reaction create-project api <your-project-name>

This will create an Open Commerce project in the directory . Once this is complete, navigate to the project directory:

cd <your-project-name> 

Install the project dependencies:

npm install 

Finally, start the server in development mode:

reaction develop api

Note: Optionally, from within the project-directory you may issue the above command without mentioning the project type and the CLI would check your package.json for the "projectType" and pick it up from there. This expects that the project itself was built using the latest version of the CLI as explained in the above steps.

Example, instead of the above command, you may skip mentioning 'api' and just use:

reaction develop

This will start the Open Commerce GraphQL server and Mongo Server. Press Ctrl+C to stop.

• A sample custom plugin has been installed, and you should see its output in the logs. (Your Sample Plugin)
• To add a new plugin based on our plugin template run:

reaction create-plugin api <your-plugin-name>

Validate whether the plugin was created in the custom-packages

cd custom-packages

cd <your-plugin-name>

npm install 

You now need to change back up to the root:

cd ../../

now you can run:

reaction develop

This plugin will now be loaded the next time you start Open Commerce.

Congratulations!! You're ready to start developing with Open Commerce

See the Complete CLI instructions for how to create your local storefront and admin.

Go to the complete installation instructions to see how to set up your store

API development

If you are working on core plugins (not developing plugins for your own installation) you should follow these instructions

What you need

• pnpm
• Docker
• Docker Compose

Install PNPM

npm i -g [email protected]

Clone and Start the source

git clone https://github.com/reactioncommerce/reaction.git
cd reaction
pnpm install
cp apps/reaction/.env.example apps/reaction/.env

Start dev-server with mongo on local:

## you must change MONGO_URL in the .env to mongodb://localhost:27017/reaction before start
pnpm run start:dev

Start dev-server with mongodb on docker

docker-compose up -d
pnpm run start:dev

Development Flow

1. Make some changes in one or more packages.
2. Add a changeset in that same PR.
3. Repeat the process of making changes and adding changesets.
4. Create PR

How to release

1. Run release action to create Version PR. This PR will remove all changeset files, bump up packages versions, update CHANGELOG files.
2. Merge Version PR into trunk, CircleCI will publish all the packages into npm.

Prerelease flows

1. All PRs will be merged into prerelease branch before triggering PRERELEASE action.
2. Before merging PRs into prerelease branch, please make sure that all the changesets are added.
3. Manually trigger PRERELEASE action to create Version Packages (next) PR. After merged, the changeset/action will bump up packages versions as {next-version}-next.{number}, update CHANGELOG files.
4. Merge Version Packages (next) PR into prerelease branch, action will publish all the packages into npm.

Get involved

Contribute

⭐ If you like what you see, star us on GitHub.

Find a bug, a typo, or something that’s not documented well? We’d love for you to open an issue telling us what we can improve! This project uses commitlint, please use their commit message format.

We love your pull requests! Check out our Good First Issue and Help Wanted tags for good issues to tackle. Check out our contributors guide for more information

License

Reaction is GNU GPLv3 Licensed

reaction's Issues

Product detail image gallery has strange behavior

After adding a second image to the gallery:

Footer links lose header/wrapper

Static top level pages don't have site wrapper applied (fix in router.js)

Drag and drop performance issue on product grid

On Chrome/Mavericks

When dragging a product on product grid performance is noticeably off. The dragged product lags behind mouse movement in jumpy/glitchy movements.

Unable to add to cart after successful order completion

Check that all sessions and subs for cart have been cleared (used to work)

Embeddable Email Capture JS

https://github.com/ongoworks/reaction-greetramp

Create an embeddable asynchronous javascript that runs on external sites
that:

1. displays a popup modal with an input field to capture email
2. adds email capture to mongo captures collection

Field highlight overlapping on product detail

The blue outline is cut off on Detail Name field of Product Detail page.

Azimuth cms package support

Is there a way to integrate this package and use admin interfaces together? As soon as possible I'll try out reaction with azimuth cms package. I'll start building simple website with azimuth and then adding to it reactioncommerce package. I think it's a good idea to use this package as a cms module and reaction as a shopping module.

Variant field alignment off on right side

Warn field should be aligned with other fields on the right.

Can't assign same tag to other products

Only can add a tag per product, when is supposed to be assigned also to other products.

default images to variant[0], or parent variant

If variant has no images default to variant[0] image

if child variant has no images, default to parent variant image, else variant [0]

When a new created product is purchased it does not appear in basket navbar

1. Clone or create new product and make it visible.
2. Purchase one product, it appears in basket navbar
3. Purchase the other product, in basket navbar only appears one product, not the two purchased.

*) click basket icon --> disappears navbar (ok), press again --> appears correctly basket navbar with the 2 puchased products.

cart drawer display of new items

Automatic open of the cart drawer is currently disabled, problem with refreshing the carousel with Meteor 0.8.0

Todo: auto open when adding new items, refresh cart items in owl carousel.

Likely solution coding the owl-carousel add items rather than refreshing entire owl instance

Mobile select variant / add to cart issues

Selecting / adding works only sporadically. Seems delayed.
Maybe related to to removal of tap events in Meteor 0.8. Researching.

Add connector for Google Analytics

link app gallery cards to app settings page

add link to settings route on the app cards, and remove from main dashboard panel

only link "hasWidget" links in dashboard panel

Saving address in accounts general

Failing with:

Error: MongoError: have conflicting mods in update [409]

Can't unselect tag in product detail

When tag is selected as the hashtag in product detail it can't then be unselected. It seems that it should either be required to make the product live, or allow for unselection.

Product detail display issue on mobile

When logged in as admin, the product detail view has horizontal scroll bar and some elements extend beyond the screen. This happens when the viewport goes below 768px and the elements all stack.

error: no such package: 'reaction-flatrates'

Hi, I was on 5e94d7c and followed the startup , but get error: no such package: 'reaction-flatrates'.

Here is all message:

=> Started proxy.
=> Started MongoDB.
iron-router: updating npm dependencies -- connect...
simple-schema: updating npm dependencies -- string...
data-man: updating npm dependencies -- mime, simple-bufferstream, request, temp...
cfs-filesystem: updating npm dependencies -- chokidar, mkdirp...
cfs-gridfs: updating npm dependencies -- mongodb, gridfs-stream...
handlebars-server: updating npm dependencies -- handlebars...
reaction-commerce: updating npm dependencies -- node-geocoder, phantomjs, >node-phantom...
cfs-s3: updating npm dependencies -- aws-sdk...
reaction-paypal: updating npm dependencies -- paypal-rest-sdk...
=> Errors prevented startup:

While building the application:
error: no such package: 'reaction-flatrates'

=> Your application has errors. Waiting for file change.

client/templates/layout not on git

With a fresh pull and mrt update.

$ ./bin/reset
Project reset.
[[[[[ ~/Proyectos/initiumsys/reaction ]]]]]

=> Started proxy.
=> Started MongoDB.
=> Errors prevented startup:

While building package reaction-commerce:
error: File not found: client/templates/layout/notFound/notFound.html

=> Your application has errors. Waiting for file change.

(client/templates/layout doesn't exist)

checks for server side methods

add check(doc,schema) and isOwner to all server side methods

Logout doesn't work unless rerendered

Logout dropdown closes, but doesn't change the toggle state. Needs to re-render on fadeout.

progressbar for image uploads

add progressbar to image uploads - right now just a broken image shows until image is loaded.

click image should also select associated variant

Entry to product with multiple variants should not select initial variant.

When no variant is selected:

Images should be collection of all primary images for variants (variant.media.0)

Selecting variant, or an image, should select variant and display child variant options.

Delay in adding items to cart

When adding a product to cart from detail view, there is a moment when the cart opens and it says "we're sad..." and the cart appears empty, then the product fills in. It seems that the cart shouldn't appear until your item is loaded or at least shouldn't show the big "we're sad" message, even for a second, when the customer has just opted to start purchasing something.

Tag focus jumps if editing both sections on detail view

If you start editing the top bar tags while on a product detail page, then go down and start adding tags to the product, the focus keeps jumping back up to the top bar even though you were adding tags to the product.

Variant Option fieldset background color confusing

The fieldset background of Variant Options turns green when in focus. Because it is the same green that is used to indicate field autosave in other areas, it can be confusing to see this same green color but with a different meaning.

Placeholder text should disappear when field is in focus

When clicking to edit a field on a product that still has placeholder text, the text should disappear to indicate that the field is ready to accept your input (and then reappear if you click out of focus without entering any characters). Currently the placeholder text remains when the field is in focus which makes it feel to the user as if you aren't editing the field.

Product detail tags section needs spacing on mobile

The spacing between tag fields on product detail is really tight on mobile. Could use a little breathing room vertically, even just a pixel or two.

Hero Manager

Hero manager:

• Drag and drop images into a carousel that can be placed on any page.
• Individual items should have date range, and links
• Should be able to accept html as well as images. (to allow advanced usage)
• Add links to tracking.

Package updates from remote

Flat rate shipping manager

Flat rates are stored in ConfigData collection, add manager screens in dashboard to modify contents.

 "shipping" : [ 
        {
            "name" : "Flat Rate Service",
            "serviceAuth" : "",
            "serviceSecret" : "",
            "serviceUrl" : "",
            "format" : "json",
            "methods" : [ 
                {
                    "name" : "Free",
                    "group" : "Ground",
                    "label" : "Free Shipping",
                    "rate" : "0",
                    "handling" : "0",
                    "validRanges" : [ 
                        {
                            "begin" : "0",
                            "end" : "0"
                        }
                    ],
                    "validDestinations" : [ 
                        {
                            "US" : true,
                            "CA" : true,
                            "UK" : false
                        }
                    ],
                    "validOrigination" : [ 
                        {
                            "US" : true
                        }
                    ]
                }, 
                {
                    "name" : "Free",
                    "group" : "2-Day",
                    "label" : "Express 3-Day",
                    "rate" : "2.99",
                    "handling" : "0",
                    "validRanges" : [ 
                        {
                            "begin" : "0",
                            "end" : "0"
                        }
                    ],
                    "validDestinations" : [ 
                        {
                            "US" : true,
                            "CA" : true,
                            "UK" : false
                        }
                    ],
                    "validOrigination" : [ 
                        {
                            "US" : true
                        }
                    ]
                }
            ],
            "containers" : [ 
                {
                    "envelope" : true
                }
            ]
        }
    ]

Variant option field spacing is off

Fields are not vertically centered within the container.

Dropdown menu style issues on mobile

A few styling issues on the dropdown menu on mobile.

Errors in displaying order dashboard

Meteor 0.8 induced errors:

Exception in Meteor UI: undefined debug.js:43
Exception from Deps recompute function: undefined debug.js:43
Exception from Deps recompute function: undefined debug.js:43
Exception from Deps recompute function: Error: Can't call non-function: [object Object]
at Spacebars.call (http://localhost:3000/packages/spacebars.js?5d478ab1c940b6f5a88f78b8adc81a47f022da77:176:13)
at Spacebars.mustacheImpl (http://localhost:3000/packages/spacebars.js?5d478ab1c940b6f5a88f78b8adc81a47f022da77:110:25)
at Object.Spacebars.dataMustache (http://localhost:3000/packages/spacebars.js?5d478ab1c940b6f5a88f78b8adc81a47f022da77:142:39)
at Template.define.HTML.LI.HTML.DIV.Spacebars.With.UI.block.self (http://localhost:3000/packages/reaction-commerce.js?6535bb2f9a99a2b61efab0b7aad7a16eccfdcc07:27424:22)
at http://localhost:3000/packages/ui.js?b523ef986d3d39671bcb40319d0df8982acacfe8:2013:23
at callWithNoYieldsAllowed (http://localhost:3000/packages/deps.js?7afb832ce6e6c89421fa70dc066201f16f9b9105:74:5)
at _.extend.compute (http://localhost:3000/packages/deps.js?7afb832ce6e6c89421fa70dc066201f16f9b9105:212:7)
at new Deps.Computation (http://localhost:3000/packages/deps.js?7afb832ce6e6c89421fa70dc066201f16f9b9105:144:10)
at Object..extend.autorun (http://localhost:3000/packages/deps.js?7afb832ce6e6c89421fa70dc066201f16f9b9105:361:13)
at http://localhost:3000/packages/ui.js?b523ef986d3d39671bcb40319d0df8982acacfe8:2010:17

Error saving GA Settings

Editing of tags broken

Tag editing broken in Meteor 0.8.0 refactor

Connectors Documentation

Line appearing in end user view of product grid

Using Chrome 34.0.1847.116 on OSX Mavericks

Package controller in admin

Warn @ text spacing is off

The "Warn @" label is too far from the field in the variant settings. It would make more sense if the label was over directly next to the field.

Click cart product should take you to product / variant / child variant page

Broken since 0.8 - click cart product should bring up pdp with selected variants.

user view of orders/accounts information

a user view of orders and account information, linked in their account dropdown.

Add support for more file types in media gallery

Currently only image types are supported in the media gallery. It would be useful to be able to include videos as well.

Clicking save on variant doesn't update main price

When updating the price of a selected variant, the main price doesn't change as soon as you click the save button.

To reproduce:

• Select and open a variant
• Change Price
• Click "Save"
• Note that while the variant price changed, the big price did not. Only when you click the variant bar again does the price update.

When run the latest source nothing display

When run the latest source it is the bank page,nothing display.
it is because of the Meteor 0.8.0 ?

Package system documentation

product hashtags managed as array, most recent used in url

add hashtags (handles) as an array, so when you change hashtags you redirect to new one, old hashtags for products direct to newest.

Detail name and information fields overlap on mobile

When logged in as admin the two fields in the details section of the product detail view are overlapping.

Google Analytics Connector

Package to add google analytics tracking:

Users should be able to select a GA package and then login to GA and choose a reporting profile.

GA profile information should be stored in

reaction_config {userid:packages:ga}

Template should be created to add GA tracking (generic) and track events where elements have been configured as

    data-track="Open slideshow" data-track-attrs="{ show: 'Xmas' }"