reactioncommerce / reaction-swag-shop Goto Github PK

Static pages

Story
As a user I want to browse content that's not directly related to buying products. That could be terms & conditions, about pages, general information, a blog post, you name it. This user story covers approximately up to 10 static pages.

Acceptance criteria

• For each static page, there needs to be a a link into it. Usually this will be the footer.
• Static pages should be available in different languages, depending on which language is selected

Questions

• Assumption was, that there's no CMS involved for static pages. Not sure, this holds true, though ...

What is the correct way to fix the Unknown asset: plugins/reaction-swag-shop/images/BCTMZ6HTxFSppJESk.jpg issue when running the store using docker-compose?

I've created a customer docker image with the swag-shop. Setting SKIP_FIXTURES=1 works when running reaction locally but how do I fix it if I'm running the store as a docker container?

The 'https://docs.reactioncommerce.com/reaction-docs/master/installation' link doesn't exist.
This link is from your main readme under 'Getting started' chapter, step 1'

Could you update it?

I've been using fake images and badly photoshopped screenshots for the swag shop.

Also it would be great to get real text so I can replace all that dummy text.

@machikoyasuda May I assign this to you? You told that you've somebody at hand who can possibly help us with this?

In Reaction 1.13.1 I used the latest approach described here to extend my Product variants, which would be:

import { Meteor } from "meteor/meteor";
import Schemas from "@reactioncommerce/schemas";
import { Products } from "/lib/collections/index";

const ExtendedSchema = Schemas.ProductVariant.extend({
  customField: {
    type: String,
    optional: true
  }
});

Products.attachSchema(ExtendedSchema, { replace: true, selector: { type: "variant" } });

Placed that in PLUGINROOT/lib and imported it in both client and server.
When subscribing to Products, the custom field is only published to the admin user.
I used meteor Devtools to inspect the clientside MiniMongo DB, for non-admins that custom Field is simply skipped in the publication.

Implement Filtered Grid

Story
As an user, I'd like to be able to filter available products according to different traits, like color or brand. This allows me to comfortably discard all products I'm not interested in and helps me to find the specific products I've seen before faster.

Acceptance criteria

• After selecting appropriate traits in FilterBar and optionally select a sorting specification, I expect to find a list of products that match the search criteria previously entered.

• When the values in the filter grid changes, an updated search should be executed immediately. There's no need to submit the FilterBar's changes.

• Clicking on a search result should navigate away from current page to the PDP of the clicked product.

Hello, I followed the Installation guide in the README, first creating a reaction commerce with the command: reaction init, the commerce worked well at localhost:3000 but after adding the plugin following the instructions in the README when going to localhost:3000 a white screen is displayed and in the console I get:

modules-runtime.js?hash=5e485d3e2a49d2506f7ca0df72fcd6a3216a83a5:241 Uncaught Error: Cannot find module './product-admin'
    at makeMissingError (modules-runtime.js?hash=5e485d3e2a49d2506f7ca0df72fcd6a3216a83a5:241)
    at require (modules-runtime.js?hash=5e485d3e2a49d2506f7ca0df72fcd6a3216a83a5:251)
    at index.js (index.js:1)
    at fileEvaluate (modules-runtime.js?hash=5e485d3e2a49d2506f7ca0df72fcd6a3216a83a5:353)
    at require (modules-runtime.js?hash=5e485d3e2a49d2506f7ca0df72fcd6a3216a83a5:248)
    at index.js (index.js:1)
    at fileEvaluate (modules-runtime.js?hash=5e485d3e2a49d2506f7ca0df72fcd6a3216a83a5:353)
    at require (modules-runtime.js?hash=5e485d3e2a49d2506f7ca0df72fcd6a3216a83a5:248)
    at plugins.js (plugins.js:1)
    at fileEvaluate (modules-runtime.js?hash=5e485d3e2a49d2506f7ca0df72fcd6a3216a83a5:353)
makeMissingError @ modules-runtime.js?hash=5e485d3e2a49d2506f7ca0df72fcd6a3216a83a5:241
require @ modules-runtime.js?hash=5e485d3e2a49d2506f7ca0df72fcd6a3216a83a5:251
index.js @ index.js:1
fileEvaluate @ modules-runtime.js?hash=5e485d3e2a49d2506f7ca0df72fcd6a3216a83a5:353
require @ modules-runtime.js?hash=5e485d3e2a49d2506f7ca0df72fcd6a3216a83a5:248
index.js @ index.js:1
fileEvaluate @ modules-runtime.js?hash=5e485d3e2a49d2506f7ca0df72fcd6a3216a83a5:353
require @ modules-runtime.js?hash=5e485d3e2a49d2506f7ca0df72fcd6a3216a83a5:248
plugins.js @ plugins.js:1
fileEvaluate @ modules-runtime.js?hash=5e485d3e2a49d2506f7ca0df72fcd6a3216a83a5:353
require @ modules-runtime.js?hash=5e485d3e2a49d2506f7ca0df72fcd6a3216a83a5:248
(anonymous) @ app.js?hash=37254a6cdf467abe4795742e417d491f39ed0f86:129210
modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:35205 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `Reaction(SwagShopFooter)`.
    in Reaction(SwagShopFooter) (created by Reaction(coreLayout))
    in div (created by Reaction(coreLayout))
    in Reaction(coreLayout) (created by Route)
    in Route
    in Switch (created by Reaction(App))
    in div (created by Reaction(App))
    in Reaction(App) (created by Tracker(Reaction(App)))
    in Tracker(Reaction(App))
    in TranslationProvider (created by Tracker(TranslationProvider))
    in Tracker(TranslationProvider)
    in Router (created by BrowserRouter)
    in BrowserRouter
printWarning @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:35205
warning @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:35229
createElement @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:34194
renderNavigation @ footer.js:148
render @ footer.js:303
(anonymous) @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:141407
measureLifeCyclePerf @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:140687
_renderValidatedComponentWithoutOwnerOrContext @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:141406
_renderValidatedComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:141433
performInitialMount @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:140973
mountComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:140869
mountComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:133724
mountChildren @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:139995
_createInitialChildren @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:137221
mountComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:137040
mountComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:133724
performInitialMount @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:140982
mountComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:140869
mountComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:133724
performInitialMount @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:140982
mountComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:140869
mountComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:133724
performInitialMount @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:140982
mountComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:140869
mountComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:133724
mountChildren @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:139995
_createInitialChildren @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:137221
mountComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:137040
mountComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:133724
performInitialMount @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:140982
mountComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:140869
mountComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:133724
performInitialMount @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:140982
mountComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:140869
mountComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:133724
performInitialMount @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:140982
mountComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:140869
mountComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:133724
performInitialMount @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:140982
mountComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:140869
mountComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:133724
performInitialMount @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:140982
mountComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:140869
mountComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:133724
performInitialMount @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:140982
mountComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:140869
mountComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:133724
performInitialMount @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:140982
mountComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:140869
mountComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:133724
mountComponentIntoNode @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:145835
perform @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:134675
batchedMountComponentIntoNode @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:145857
perform @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:134675
batchedUpdates @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:143563
batchedUpdates @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:133363
_renderNewRootComponent @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:146050
_renderSubtreeIntoContainer @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:146132
render @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:146153
(anonymous) @ browserRouter.js:159
Tracker.Computation._compute @ tracker.js?hash=997515fa2d5b0530ba07741da556c4b36963ef3b:339
Tracker.Computation._recompute @ tracker.js?hash=997515fa2d5b0530ba07741da556c4b36963ef3b:358
Tracker._runFlush @ tracker.js?hash=997515fa2d5b0530ba07741da556c4b36963ef3b:532
onGlobalMessage @ meteor.js?hash=cbcc712d51de4298c275e8dcf25c66c29914f19a:448
postMessage (async)
setImmediate @ meteor.js?hash=cbcc712d51de4298c275e8dcf25c66c29914f19a:468
requireFlush @ tracker.js?hash=997515fa2d5b0530ba07741da556c4b36963ef3b:151
Tracker.Computation.invalidate @ tracker.js?hash=997515fa2d5b0530ba07741da556c4b36963ef3b:292
Tracker.Dependency.changed @ tracker.js?hash=997515fa2d5b0530ba07741da556c4b36963ef3b:459
(anonymous) @ startup.js:125
(anonymous) @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:29277
done @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:29380
(anonymous) @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:29395
loadResources @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:29331
setLng @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:29394
changeLanguage @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:29404
load @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:29272
init @ modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:29282
(anonymous) @ startup.js:102
(anonymous) @ livedata_connection.js:1508
(anonymous) @ livedata_connection.js:1364
_.each._.forEach @ underscore.js?hash=cde485f60699ff9aced3305f70189e39c665183c:149
_runAfterUpdateCallbacks @ livedata_connection.js:1363
_performWrites @ livedata_connection.js:1353
_flushBufferedWrites @ livedata_connection.js:1316
_livedata_data @ livedata_connection.js:1284
onMessage @ livedata_connection.js:274
(anonymous) @ stream_client_sockjs.js:174
_.each._.forEach @ underscore.js?hash=cde485f60699ff9aced3305f70189e39c665183c:149
self.socket.onmessage @ stream_client_sockjs.js:173
REventTarget.dispatchEvent @ sockjs-0.3.4.js:87
SockJS._dispatchMessage @ sockjs-0.3.4.js:1072
SockJS._didMessage @ sockjs-0.3.4.js:1130
that.ws.onmessage @ sockjs-0.3.4.js:1277
meteor.js?hash=cbcc712d51de4298c275e8dcf25c66c29914f19a:992 Exception from Tracker recompute function:
meteor.js?hash=cbcc712d51de4298c275e8dcf25c66c29914f19a:992 Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `Reaction(SwagShopFooter)`.
    at invariant (http://localhost:3000/packages/modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:35359:15)
    at instantiateReactComponent (http://localhost:3000/packages/modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:140550:56)
    at instantiateChild (http://localhost:3000/packages/modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:140360:28)
    at http://localhost:3000/packages/modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:140387:16
    at traverseAllChildrenImpl (http://localhost:3000/packages/modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:141996:5)
    at traverseAllChildrenImpl (http://localhost:3000/packages/modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:142012:23)
    at traverseAllChildren (http://localhost:3000/packages/modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:142091:10)
    at Object.instantiateChildren (http://localhost:3000/packages/modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:140386:7)
    at ReactDOMComponent._reconcilerInstantiateChildren (http://localhost:3000/packages/modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:139944:41)
    at ReactDOMComponent.mountChildren (http://localhost:3000/packages/modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:139983:27)

modules.js?hash=4a348c643f6b8cb348e264a10b7d6ddcea2620ac:35205 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `Reaction(SwagShopFooter)`.
    in Reaction(SwagShopFooter) (created by Reaction(coreLayout))
    in div (created by Reaction(coreLayout))
    in Reaction(coreLayout) (created by Route)
    in Route
    in Switch (created by Reaction(App))
    in div (created by Reaction(App))
    in Reaction(App) (created by Tracker(Reaction(App)))
    in Tracker(Reaction(App))
    in TranslationProvider (created by Tracker(TranslationProvider))
    in Tracker(TranslationProvider)
    in Router (created by BrowserRouter)
    in BrowserRouter

Expected behavior

When I click the search button/icon a search interface must show.

Actual behavior

There is no response when search button is clicked.

Possible fix

in ./import/plugins/custom/reaction-swag-shop/client/components/navBar.js change function renderSearchButton() from:

renderSearchButton() {
    if (this.props.searchEnabled) {
      return (
        <div onClick={this.handleOpenSearchModal} className="search" role="presentation">
          <Components.FlatButton
            icon="fa fa-search"
            kind="flat"
          />
          <Components.Translation className="search-label" defaultValue="search" i18nKey="admin.dashboard.searchLabel" />
        </div>
      );
    }
  }

to

renderSearchButton() {
    if (this.props.searchEnabled) {
      return (
<div>
        <div onClick={this.handleOpenSearchModal} className="search" role="presentation">
          <Components.FlatButton
            icon="fa fa-search"
            kind="flat"
          />
          <Components.Translation className="search-label" defaultValue="search" i18nKey="admin.dashboard.searchLabel" />
        </div>
       <Components.SearchSubscription
              open={this.state.searchModalOpen}
              onClose={this.handleCloseSearchModal}
            />
</div>
      );
    }
  }

Problem

When I go to https://swag.getreaction.io/ and log in with the default admin credentials, the browser subscribes to all 4300+ account records.

Reproduce

1. Go to https://swag.getreaction.io/ and log in with the default admin credentials
2. Notice there is some lag in signing in. Enter ReactionCore.Collections.Accounts.find().count() in console.

Solution

I didn't investigate, but my guess is that the reset script is using the same value for some field for all accounts, and that value is used in the accounts publication selector.

A new Shop.layout structure is necessary to accommodate the PDP page's visual layout, along with appropriate React components.

I followed the exact same steps mentioned in README, but when I run reaction command, i keep getting following error:

Error: Unknown asset: plugins/reaction-swag-shop/images/BCTMZ6HTxFSppJESk.jpg
at getAsset (/Users/vineeth/Projects/epm/.meteor/local/build/programs/server/boot.js:328:19)
at Object.getBinary (/Users/vineeth/Projects/epm/.meteor/local/build/programs/server/boot.js:342:16)
at Object.methods.importProductImages (imports/plugins/custom/reaction-swag-shop/server/methods.js:128:31)

I get an error after clone and run reaction with reaction-swag-shop plugin:
Error: Cannot find module 'meteor/aldeed:simple-schema' at Function.Module._resolveFilename (module.js:538:15) at Function.resolve (internal/module.js:18:19) at Object.require (/home/pkhung/ecomerceProject/newecomm/.meteor/local/build/programs/server/boot.js:288:32) at makeInstallerOptions.fallback (packages/modules-runtime.js:651:18) at require (packages/modules-runtime.js:244:16) at tags.js (imports/plugins/custom/reaction-swag-shop/lib/collections/schemas/tags.js:1:31)

Console told me that package meteor/aldeed:simple-schema is missing. So I run meteor add aldeed:simple-schema and restart reaction again but still get an error about SimpleSchema:
Error: Invalid definition for pick field. at packages/aldeed_simple-schema.js:1429:13 at Function._.each._.forEach (packages/underscore.js:147:22) at new SimpleSchema (packages/aldeed_simple-schema.js:1426:5) at tags.js (imports/plugins/custom/reaction-swag-shop/lib/collections/schemas/tags.js:6:19)

I try to change import { SimpleSchema } from "meteor/aldeed:simple-schema";
to import SimpleSchema from "simpl-schema"; in two file swagProducts.js and tags.js. But still get error:
Error: You may not pass an array of schemas to the SimpleSchema constructor or to extend() at SimpleSchema.extend (/home/pkhung/ecomerceProject/avgecomm/node_modules/simpl-schema/dist/SimpleSchema.js:564:40) at new SimpleSchema (/home/pkhung/ecomerceProject/avgecomm/node_modules/simpl-schema/dist/SimpleSchema.js:138:10) at tags.js (imports/plugins/custom/reaction-swag-shop/lib/collections/schemas/tags.js:7:19)

Please help!
P/S: I find that reaction now using npm package 'simpl-schema' instead of 'aldeed:simple-schema'.

There's this form in the footer, which I don't know where it should point. AFAIK, we removed the enquiry form from our main homepage. I could need some advise on how we want to proceed with that feature.

URL: swagproject.reactioncommerce.com

The landing page should feature a grid with different, featured products

Story
As a user, the landing page presents me a couple of featured products. These could be "teaser products" or products that have some discounts applied - it doesn't matter. The featured products are not dependant on the user's behaviour or his/her preferences in general.

Acceptance criteria
When browsing the landing page, there's a section that promotes "featured products". These products should be

• displayed in a responsive grid
• clicking on it should navigate away from current page to the PDP of the clicked product
• depending on the available screen estate, the list of featured products may be pruned according to a rule that needs to be defined yet.

Questions

• Desktop: Are all featured products displayed, or only up to a max number? If not all products are visible, how to determine which ones are hidden?
• Mobile: According to specs for small screens only 1 item is rendered. Which one would that be?

User can filter available products on different selectable traits, like color, brand or type:

Story
As an user, I'd like to be able to filter available products according to different traits, like color or brand. This allows me to comfortably discard all products I'm not interested in and helps me to find the specific products I've seen before faster.

Acceptance criteria (these may change again, because they are dependant on the answers of the questions blow )

• Selecting beautiful stuff from the dropdown list 'brand' will yield all available products from beautiful stuff(t.b.d., see questions below: regardless of the active tag in NavBar)?

• After selecting appropriate traits in FilterBar and optionally select a sorting specification, I expect to find a list of products that match the search criteria previously entered.

• When the values in the filter grid changes, an updated search should be executed immediately. There's no need to submit the FilterBar's changes.

Questions:

1) How does the filter bar correlate with selected tags navigation bar?

Because hashtags itself are already another kind of filter, their functionality seems to overlap in part with the filter bar. On the other hand, it's not possible to just re-use the tagging concept for the filter bar, because tags are bound to a product itself, not specific variants of a certain product. This makes it impossible to use tags for traits that are implemented via variants, like size or color.

2) Are the values in FilterBar dependant on the active tag in Navbar?

-> Scenario 1: Would changing the tag in Navbar mean that the FilterBar has different traits/options available?
-> Scenario 2: What would be the expected behaviour if the the user selects blue as color to filter for? Should all blue items be displayed, regardless of category (tag in Navbar)?

3) Not sure what TYPE and COLLECTIONS traits stand for.

4) Need the filter drop-downs to be multi-selectable?

=> Started proxy.
app/client/plugins.less.css: warn: There are some @import rules those are not taking effect as they are required to be in the beginning of the file.
=> Errors prevented startup:

While processing files with less (for target web.browser):
reaction-swag-shop/client/styles/classes/footer.less:22:34: variable @screen-xs-max is undefined
reaction-swag-shop/client/styles/classes/header.less:58:12: variable @navHeight is undefined
reaction-swag-shop/client/styles/classes/landing.less:30:7: variable @mobile is undefined
reaction-swag-shop/client/styles/classes/header.less:262:32: variable @screen-xs-max is undefined

=> Your application has errors. Waiting for file change.
=> A patch (Meteor 1.6.1.1) for your current release is available!
Update this project now with 'meteor update --patch'.
=> Started MongoDB.

1 - Fresh (and working) installation of reaction.
2- Cloned reaction-swag-shop git to inside /imports/plugins/custom/
3 - ERROR:

Errors prevented startup:

While processing files with ecmascript (for target web.browser):

---

---

The new decorators proposal is not supported yet. You must pass the "**decoratorsLegacy**": true
option to @babel/preset-stage-2

Is babel7 incompatible with current reaction-swag-shop?

I tried dozens of solutions, no success.
My package.json has already "decoratorsLegacy": true" on babel plugin description.

reaction versions:
` reaction -v

Node: 8.11.3
NPM: 5.6.0
Meteor Node: 8.11.3
Meteor NPM: 5.10.0
Reaction CLI: 0.29.0
Reaction: 1.13.1
Reaction branch: master`

During testing against the latest master branch a blank screen shows, with no errors in the browser javascript console

"You might also like" grid for product detail page

Story
As a user I want to browse similar products on the product detail page. So that I can get an overview of products that I might also be interested in.

Acceptance criteria
When browsing to a product detail page and there're similar products for the currently active product defined, it should be

• displayed in a grid
• clicking on it should navigate away from current page to the PDP of the clicked product

Desktop design

Implement header

Implemented. Deliberately assigned 2 story points to it, so it can serve as reference task.

Notice: This issue only deals with desktop design. For header design on small screens, see this mobile related issue: #16

Assumptions

• Hashtag is static text with no functionality
• News in utility bar can be implemented as hard coded link.

Desktop design

Doc just says this updates demo.reactioncommerce.com, which is not responding.

This is being deployed on https://swag.getreaction.io/ (should we / are we going to run this on demo)?

Update eslintrc to match and make any necessary changes

Implement overall swag store style sheet

For some reason, the top bar always re-renders whenever a page loads, which makes the website look very strange to customers. I've had a look and can't seem to figure out why

Navigation and styling

Tasks

• Tagging hierarchy
• Tagging products
• Styling for mobile
• Styling for desktop

Mobile design

Collapsed menu

Expanded menu

Header

Landing page should feature an area with image tiles for each product category.

Story
As an user – when entering the shop – I want to get a quick overview what product categories are available. This allows me to quickly find the product I'm interested in.

Acceptance criteria

• Given that there's a navigation tag called MEN there will be a corresponding category tile that displays an image that represents the category MEN.
• The image tile is clickable. When clicking it, the user navigates away from current page to a new page "Cat Grid" (#6)
• When navigating into a image tile, the resulting "Cat Grid" view shows only products that have the pertinent top-level tag assigned (e.g.: MEN).
• The behaviour of clicking an image tile is indifferent of clicking the corresponding tag link in the navigation bar.

Questions & Remarks

• The categories could correlate to product hashtags
• Categories (hashtags) needs to be linked to images somehow. The easiest (, but most inflexible) way would be to hardcode this in page template.
• For small screens, not all categories would be displayed. Are the hidden categories invariant?

Is it necessary to have the FilterBar modifiable in admin UI?

If yes, how should it behave exactly?

Expected behavior

Browsing between different PDP views and then using back button of browser should route to previous product.

Actual behavior

Back navigation does work, however the product picture does not update accordingly

Steps to reproduce the behavior

• Navigate to PDP of product A
• Navigate to PDP of product B
• Use browser back button
• Although the product text is refering to product A , the product image is still from product B

• - Test swag-shop with 1.10
• - If there are code or documentation changes that need to be made, make them
• - Update the README.md of this repo to note that this has been updated to be compatible with 1.9

Code expects images in `/public/plugins/reaction-swag-shop/images/ but the README just says copy the public folder

Whenever I am trying to update any product from the admin panel, I am receiving the following error

Error: Tag shopId is required in Tags insert

I am also getting the same error after starting the reaction project via reaction command although it does not break the project initialization, please fins the log below

10:21:49.380Z  INFO Reaction: Load default data from /private/data/
10:21:51.283Z ERROR Reaction: Bypassing loading Products default data.
  Error: Tag shopId is required in Tags insert

my reaction --version outputs to below

Node: 10.6.0
NPM: 6.2.0
Meteor Node: 8.11.3
Meteor NPM: 5.10.0
Reaction CLI: 0.29.0
Reaction: 1.13.1
Reaction branch: master

Additionally, I am using mongoDB shell version 3.2.20.

NOTE: Everything works fine as expected when I do not include this custom plugin

This epic is divided into two parts: 1) the FilterBar and 2) the FilteredGrid

See User Stories for more detail.

Implement Footer

C:\Users\tienl\AppData\Local.meteor\packages\meteor-tool\1.6.1\mt-os.windows.x86_64\dev_bundle\server-lib\node_modules\fibers\future.js:280
throw(ex);
^

Error: Cannot find module '../../../../../core/collections'
at makeMissingError (packages\modules-runtime.js:231:12)
at require (packages\modules-runtime.js:241:19)
at tags.js (imports/plugins/custom/reaction-swag-shop/lib/collections/schemas/tags.js:1:29)
at fileEvaluate (packages\modules-runtime.js:343:9)
at require (packages\modules-runtime.js:238:16)
at index.js (imports/plugins/custom/reaction-swag-shop/lib/collections/schemas/index.js:1:14)
at fileEvaluate (packages\modules-runtime.js:343:9)
at require (packages\modules-runtime.js:238:16)
at index.js (imports/plugins/custom/reaction-swag-shop/server/index.js:1:14)
at fileEvaluate (packages\modules-runtime.js:343:9)
at require (packages\modules-runtime.js:238:16)
at plugins.js (server/plugins.js:1:3419)
at fileEvaluate (packages\modules-runtime.js:343:9)
at require (packages\modules-runtime.js:238:16)
at C:\Users\tienl\OneDrive\Desktop\reaction-commerce.meteor\local\build\programs\server\app\app.js:110338:1
at C:\Users\tienl\OneDrive\Desktop\reaction-commerce.meteor\local\build\programs\server\boot.js:411:36
at Array.forEach ()
at C:\Users\tienl\OneDrive\Desktop\reaction-commerce.meteor\local\build\programs\server\boot.js:220:19
at C:\Users\tienl\OneDrive\Desktop\reaction-commerce.meteor\local\build\programs\server\boot.js:471:5
at Function.run (C:\Users\tienl\OneDrive\Desktop\reaction-commerce.meteor\local\build\programs\server\profile.js:510:12)
at C:\Users\tienl\OneDrive\Desktop\reaction-commerce.meteor\local\build\programs\server\boot.js:470:11
=> Exited with code: 1

I'm having this issue while trying to run reaction swag shop . Is anyone have a solution ??

Hey there.

I set up a fresh reaction and a fresh instance of the swag shop plugin.

My pictures are in this directory: "imports/plugins/custom/reaction-swag-shop/images/"

I am 100% sure the path is correct.

On startup (export SKIP_FIXTURES=1 && reaction) everything look fine first but then ends in

Error: Unknown asset: imports/plugins/custom/reaction-swag-shop/images/h2v7MYCXBtjMm7Piv.jpg

The product ID comes out of the plugin data of reaction-swag-shop, which leads me to believe the setting of the ENV variable SKIP_FIXTURES is working well. Otherwise Reaction would try to load a picture with the name of "BCTMZ6HTxFSppJESk.jpg" as this is the first product of the default fixures.

I ran out of clues. Am I the only one with this problem or is this a bug?

Regards
bebob

is obsoleted reaction-swag-shop in reaction 2.0?
what different between reaction-next-starterkit and reaction-swag-shop?

Expected behavior

When choosing a t-shirt from different colors, I'd expect to see this product's image in the cart.

Actual behavior

In the cart, the first product image is showing up, regardless of chosen color.

Steps to reproduce the behavior

• As a admin, add another product variant with a different t-shirt color to the ladies t-shirt product.
• As a user, put two t-shirts with different colors in the basket
• Navigate to "MY CART"
• See both items having the same color.

Responsive image gallery

Story
As an user, I should see a tiled section with different images (could be linked to an URL) above the footer. These tiles will serve as possibility to provide secondary information in a visually attractive way.

Acceptance criteria

• Some images may link to other URLs. When clicking on a clickable URL, the user navigates away from current page.
• Depending on the screen estate, the pictures with no user-interaction (no linked URLs) are shrinking more than others. (Assumption should be re-affirmed through design office).

Questions

• Should these images be static/invariant? Or do they need to be maintainable through admin backend?

Work: Update the plugin so that it works with release 1.14.0.

"You might also like" grid for product detail page

As an admin you want to somehow correlate products to each other in a way they can be used for displaying the "You might also like" grid on page PDP.

PDP: Configuring products

Story
As an user I want to be able to choose from different product options like color or size when dealing with a certain product. The product detail page give this opportunity along with further product information. This is also the place, where items are put into the shopping cart. The swag shop incorporates at most two traits on how a certain product can be configured. These traits can be chosen independently from each other. E.g. for T-shirts, there's a size and color trait. These can be chosen independently from each other (as long as the combination in question is in stock).

Acceptance criteria

• Given that the product is a T-shirt the following traits should be displayed to choose from: color and size
• These traits can be selected independently from each other
• Changing the color trait should result in a different image displayed
• Changing the size trait should NOT result in a different image displayed
• As an admin, the available options can be configured in backend.

@aldeed made some changes to the shops template, that were merged into the 1.16 branch. Seems like a good place to set a solid and reliable production ready reaction-swag-shop

Expected behavior

When you increase the number of items to add the cart on the pdp page and you click add to cart, that number of products must be added to cart/

Actual behavior

add to cart button always adds one item to cart at the time, regardless of the use number input.

Steps to reproduce the behavior

• On the pdp increase the number of items to add to cart next to the add to cart button.
• Click add to cart.
• Check number of items in cart.

Implement Product Detail Page (PDP)

Tasks for this ticket

• A new Shop.layout structure is necessary to accommodate the PDP page's visual layout, along with appropriate React components.

Linked Tickets with own estimations:

• PDP: Show similar products (#8)
• PDP: Product area (#9)

Desktop design

Implement landing page

Tasks for this ticket

• Big blue hero image
• A new Shop.layout structure is necessary to accommodate page's visual layout, along with appropriate React components.
• Wise words - static text

Linked Tickets with own estimation:

• Header (#1) ==> Not estimated as part of this epic
• Tag/Cateogory tiles (#12)
• Products We Love (#13)
• Responsive gallery (#14)
• Footer (#3) ==> Not estimated as part of this epic

Story
As an admin, I want to mark products as Featured for usage in "Products we love" in the admin backend. Theses featured products allows me to display them prominently on the landing page as eye-catcher products.

Acceptance criteria

• Given that we mark a product as "Featured" in product admin view it should become a candidate for the "Products we love" section on the landing page.
• Because the screen estate for "products we love" will vary from device to device, NOT all featured products will be shown simultaneously in all circumstances.
• The number of shown products is dependant on the space available and the images are chosen randomly from the featured set.
• Clicking on a featured product will navigate to PDP or clicked product.