vuestorefront / vue-storefront Goto Github PK

Categories, home page should be loaded using this feature (/vue-storefront/src/client-entry.js:7)

All CSS rules related to colors, font sizes and types, margins & paddings should be atomic. Now there are some components (e.g ColorButton.vue) with very simple and repeatable css rules which should be atomic.

Please add unified terms and conditions for contributing, eg. in a form of file contributing.md. like here https://github.com/DivanteLtd/open-loyalty/blob/master/CONTRIBUTING.md

We need POST method for /order resource extended to sync IndxedDb orders collection with server to ensure seamless experience across user devices

This action should be used on category.vuex #19

To have order history view on client side it's as easy as modifying the service worker to set proper flag instead of removing the order from local storage OR (sometimes in the future) we can store orders and orders history separately

Offline subscriptions should also be queued while offline. This issue is only to not forget it :)

At this point we don't support any form of user login and registration - not to mention the sync with Magento2. But of course, it would be great to have so, to have order history etc.

I can imagine adding the Passport layer for authorization to https://github.com/DivanteLtd/vue-storefront-api and then JWT based authentication to the checkout process.

At the moment, we're not synchronizing stock-quantities. For MVP it's even fine but eventually, we have to handle this issue.

I suggest adding a special method to https://github.com/DivanteLtd/mage2nosql - to synchronize the stocks separately.

Another case is to create webhook and Magento2 module to have this info almost real-time

I believe we can get special_price from M2API - and it's the result of catalog promotion rules applied; but what to do with cart rules? It seems we need to send out each cart to Magento and calculate the prices there which does make no sense as we're trying to be platform agnostic :D

Style sidebar menu according to FIgma.

[email protected] that is written in the github readme do not exist.
Final-Recipient: rfc822; [email protected]
Action: failed
Status: 5.0.0
Diagnostic-Code: smtp; 550-5.1.1 The email account that you tried to reach does not exist. Please try
550-5.1.1 double-checking the recipient's email address for typos or
550-5.1.1 unnecessary spaces. Learn more at

Please put a contact information for sending invitations to new members in the slack chat.

To display properly the items stored (step 1) and then style it (step 2h

Assigned to: @patrykpiston
Take a look at: /src/pages/Category.vue:118:

          if (attrToFilter !== 'price') {
            for (let option of res.aggregations['agg_terms_' + attrToFilter].buckets) {
              self.filters[attrToFilter].push({
                id: option.key,
                label: self._attributeOptionName(attrToFilter, option.key)
              })
            }
          } else { // special case is range filter for prices
            for (let option of res.aggregations['agg_range_' + attrToFilter].buckets) {
              self.filters[attrToFilter].push(option.key)
            }
          }
        }

The second part. To change the logic here we need to change the data model as well (the same file lines from 170):

      filters: { // filters should be set by category, and should be synchronized with magento
        color: [{'id': 165, 'label': 'red'}, {'id': 166, 'label': 'blue'}],
        size: [
            {'id': 50, 'label': 'XS'},
            {'id': 51, 'label': 'S'},
            {'id': 52, 'label': 'M'},
            {'id': 53, 'label': 'L'},
            {'id': 54, 'label': 'XL'}
        ],
        price: ['0.00 - 50.00', '50.01 - 100.00', '100.01 - 150.00', '150.01 and more']
      }
    }

we need to have something like:

        price: [ { from: 0, to: 50, label: '0 - 50PLN'} ... ] 

Does it make sense?

Wouldn't be cool! :)??

It can be usefull because doing so we don't have to request server or service worker and have quick access for routing purposes (category page is more elegant then :) and supports numerous categories)

The question is about invalidation because it's getting more complicated than having simple service worker.

As for now we can invalidate the categories store each time it's populated by SW

What do you think about extending the default login by another method known from airlines/booking.com etc

Pin code auth to get back your history of orders etc. It could be used to obtain the user token required for server synchronisation and in the result to get back all your customer data across many devices

How it sounds from UX and security perspective?

@karolbzik @filrak

Add scss support to webpack config.

At this point we can ignore the currency BUT having such single point it would be easy to add some rate calculation logic

Regarding https://community.magento.com/t5/Programming-Questions/Magento2-customizing-swatch-values-through-web-api/td-p/27877

We're not currently able to get any swatch color options for selected option (for color attribute). We're getting only optionid (which is integer) and then label (which is string)

We assume as for now that label = hex repr. of color (can be named html color like "Red" as well).

We need to create an api extenshion to get the color swatch values or uploaded files

Under src/resource there are some json files to be used across app. Only order has it own validation schema under src/models

It's more for documentation purposes for now and to keep models logic coherent

We're using Ajv validator (take a look at store/modules/checkout.js):

const Ajv = require('ajv') // json validator
    const ajv = new Ajv()
    const validate = ajv.compile(require('../../models/order_schema.json'))

More on that: https://github.com/epoberezkin/ajv

Migration documentation: https://github.com/DivanteLtd/vue-storefront-api/blob/master/doc/1.%20Data%20schema%20and%20migrations.md

it should be added in vue-storefront-api project

The intent here is to have data source for product tags on ProductTile:

The migration should add some random tags to the existing products database

T&Cs, Help, and others. I think that the best way would be to create component for static content which can get content from specific URL (JSON/HTML/MD? Maybe https://www.npmjs.com/package/vue-markdown-loader) under /resources

Doing so, we can easily integrate it with any CMS later on

Yeah, I know its scheduled next week - I've put it here only to not forget :)

Hi All!

If you're using local vue-storefront-api as data api please execute the following commands after pulling out new code:

npm run migrate
npm run restore

New data dump with attributes is added, then new elastic schema is applied

Connected to #26. Newsletter claim should be stored in localstorage (you can add sth like "claims Collection" in /store/index.js:21)

Vue.prototype.$db = {
  ordersCollection: localForage.createInstance({
    name: 'shop',
    storeName: 'orders'
  }),

  categoriesCollection: localForage.createInstance({
    name: 'shop',
    storeName: 'categories'
  }),

  cartsCollection: localForage.createInstance({
    name: 'shop',
    storeName: 'carts'
  })
}

global.db = Vue.prototype.$db // localForage instance

Then add the logic to new store "user" added under store/modules.
Finally, adding new claim should execute SW trigger to send this claim out to the server as orders are synchronized (service-worker-ext.js for details), sth like this should be executed:

import * as sw from 'lib/sw'
sw.postMessage({ config: config, command: types.USER_NEWSLETTER_SIGNUP }) // add user to newsletter

in service-worker-ext.js

  if (event.data.command === 'user/NEWSLETTER_SIGNUP') {
...
}

And then - of course you should add new resource type under vue-storefront-api

Add the search widget feature.

Business scenarios:

• As a Customer I can open search widget by clicking the button on the top;
• As a Customer, I can type searched product (phrases like name of the product, SKU number, product category etc.) and as the result, I will instantly see the grid of products in search widget;
• As a Customer, I can modify searched phrase and the product grid will be instantly updated;
• As a Customer, I can click any product on the grid in search widget and move to the product card.

The design of the view:

To have properly worked faceted search in the categories we should synchronize the Attribute dictionaries, not only the product itself. We should have filter-attributes stored per category to properly build the filters. At MVP it would be even hard-coded and limited to "color" and "size" as it's for fashion.

Right now the vuex stores returns PoJ (Plain Old Json ;)) objects. Kind of DTO's. So it's quite hard to add some logic or helper methods and it becomes more procedural development (with external helper classes) than OOP

Just thinking. The attribute data model is an example for this case

Now we have 3 events for toggling overlay, microcart and sidebar. It would be much better if we move all ui-related common events to one store. There is ui-store.js atm providing overlay, microcart and sidebar interactions but it's not used.

Definition of done: sidebar, overlay and microcart ui interactions are fired from ui-store.js not from global event bus

To sign off the order requests and restore client data across devices. It should be generated based on PIN and some additional unique to client data like email or user identifier (numeric?)

Related to: #22

Would be cool to have a totals calculator as Action(?) in /store/modules/cart. I believe it would be great to have such calculator in shared class/helper to use it on placed orders as well.

We should probably store the totals along with items - so we have to change indexedDb format of cart from simple list of items eventually to object (please consider changing /store/index.js where is the logic of syncing the cart vuex store with localForage)

/src/pages/Category.vue:22 - right now it's the Exception thrown when specific category page doesn't exist; need to be fixed - with global exception handler and custom exception class OR simply showing 404

We need "no result's message" anyway - when ES return no results

@filrak

It hasn't been tested well since the project start -it should work

It's connected to #35 - but here it's about special_price field

Right now nothing is happening when specific filter is selected. We should add in Category.vue data.filters - something like:

filters: {
 price: { from:0, to: 50},
 color: 157,
 query: 'full text query'
}

and update it (and also mark the selection on UI) regarding filters

@karolbzik @patrykpiston

It's last thing to do to finish the filters

How do we support nested categories in navigation? Right now it's not supported (/src/themes/default/components/core/blocks/SidebarMenu/SidebarMenu.vue:16 need to be changed) - the categories object already consist of hierarchical data:

{  
  "_index":"vue_storefront_catalog",
  "_type":"category",
  "_id":"29",
  "_version":1,
  "_score":1,
  "_source":{  
    "id":29,
    "parent_id":2,
    "name":"Promotions",
    "is_active":false,
    "position":6,
    "level":2,
    "product_count":0,
    "children_data":[  
      {  
        "id":30,
        "parent_id":29,
        "name":"Women Sale",
        "is_active":true,
        "position":1,
        "level":3,
        "product_count":224,
        "children_data":[  

        ]
      },
      {  
        "id":31,
        "parent_id":29,
        "name":"Men Sale",
        "is_active":true,
        "position":2,
        "level":3,
        "product_count":39,
        "children_data":[  

        ]
      },
      {  
        "id":32,
        "parent_id":29,
        "name":"Pants",
        "is_active":true,
        "position":3,
        "level":3,
        "product_count":247,
        "children_data":[  

        ]
      },
      {  
        "id":33,
        "parent_id":29,
        "name":"Tees",
        "is_active":true,
        "position":4,
        "level":3,
        "product_count":192,
        "children_data":[  

        ]
      }
    ],
    "tsk":1505573191094
  }
}

We need to style Microcart component according to Figma.
Thiis task includes creating all components required for microcart to look like in Figma

Migrations should be stored in separate Json files in vuestorefront-api and executed using alias like: npm run migration

Add product listing with horizontal filters.
The view should use the same filters like on the already developed product listing with vertical filters: color, size, price.

The design of the view:

I've just added support for nested categories in sidebar and it stopped working .. Please take a look @filrak @patrykpiston

The example is in _margin.scss

It would be much more elegant and easier to understand and wirte if components in themes can be refered to their path via simple alias e.g "theme/components" being alias for theme's root like "components" now is an alias for base components root

It should be placed within /components or /pages:

• /vue-storefront/src/themes/default/components/core/blocks/SidebarMenu/SidebarMenu.vue

Add migration for adding special_price field (and populating it by random data) to Product catalog

Migration documentation:
https://github.com/DivanteLtd/vue-storefront-api/blob/master/doc/1.%20Data%20schema%20and%20migrations.md

Right now https://github.com/DivanteLtd/vue-storefront-api is in charge for providing catalog information from ElasticSearch/MongoDB to the frontend. Which is cool but would be even better when we add graphql support :)

Some reference projects:
https://github.com/vrann/m2graphql -> http://m2graphql.com/graphiql/

Would be great to have @vrann support here :) have to convince him :)