Giter Club home page Giter Club logo

magento1-vsbridge's Introduction

Vue Storefront support for Magento 1.9

This projects enables You to use Magento 1.9 as a backend platform for Vue Storefront - first Progressive Web App for e-Commerce.

Home page of Magento1 demo

Vue Storefront is a standalone PWA storefront for eCommerce. It can be conencted with any eCommerce backend (eg. Magento, Pimcore, Prestashop or Shopware) through the API.

See how it works!

Sign up for a demo at https://vuestorefront.io/ (Vue Storefront integrated with Magento2 or Magento1).

Magento 1.9 data bridge

Vue Storefront is platform agnostic - which mean: it can be connected to virtually any eCommerce CMS. This project is a data connector for Magento 1.9.

From 26th of Feb 2019 this is module is finally MIT licensed with full support for shopping carts, orders and users sync!

Areas for improvements:

  • performance (right now it's single threaded but can be easily modified to use node-cluster),
  • dynamic-requests handling (user accounts, shopping carts, orders).

Setup and installation

Magento 1.9 bridge uses it's own Magento API which is available as standard Magento module. The second part is a node.js app which is used to consume the API results.

Requirements: Magento 1.9x Community or Enterprise; Node.js >= 8; vue-storefront and vue-storefront-api installed.

Magento module setup

First, please clone the whole repository locally:

git clone https://github.com/DivanteLtd/magento1-vsbridge.git magento1-vsbridge
cd magento1-vsbridge
cp magento1-module/app/* <MAGENTO_FOLDER>/app/

Magento module uses JWT tokens authorization method based on standard Magento admin users account system. Please create a dedicated admin account for magento1-bridge purposes only with minimal access (ACL) to the catalog part.

Then, please configure the JWT Secret in Magento configuration: System > Configuration > Services > VueStorefront Bridge.

Then please clean the Magento cache. To make sure that the module works just fine You can try to authorize the user using Postman:

Postman test

Magento 1 data indexer setup

Vue Storefront is using the ElasticSearch middleware for querying the catalog and static data. To inorder to have the data indexed You may chose the native Magento1 module or use node-app middleware provided.

Native/recommended option

In order to have all the products, categories and CMS pages indexed into Elastic Search please do install magento1-vsbridge-indexer module and set-up proper connection to the Elastic Search that Your vue-storefront-api is using.

Read the install instruction

Alternative option

As You've probably noticed in the cloned directory there is a second folder called node-app. This is a consumer application that's responsible for synchronizing the Magento1 data with the ElasticSearch instance.

This tool requires an ElasticSearch instance up and running. The simplest way to have one is to install vue-storefront and vue-storefront-api and run docker-compose up inside vue-storefront-api installation as the project contains Docker file for Vue Storefront.

Then you need to modify the configs:

cd node-app
cp config.example.json config.json
nano config.json

In the config file please setup the following variables:

  • auth section to setup Magento's user login and password and the previously set JWT secret
  • 'endpoint' should match your Magento 1.9 URL,
  • elasticsearch.indexName should be set to Your ElasticSearch index which then will be connected to the Vue Storefront. It can be fresh / non-existient index as well (will be created then). For example You may have: vue_storefront_magento1

Vue Storefront setup

Please note: current version of magento1-vsbridge requires the latest version of VS, from 'develop' branch installed. Please make sure youre using the most recent code.

By default Vue Storefront uses ES index named vue_storefront_catalog. Please apply the changes accordingly to:

  • vue-storefront config file local.json to point to right index name,
  • vue-storefront-api config file local.json to point to right index name.

Restart vue-storefront and vue-storefront-api.

Vue Storefront API setup

Please note: The vue-storefront-api Magento1 support is available from PR190, 26th of Feb 2019 - please make sure You're using the latest vue-storefront-api version.

After installing the vue-storefront-api You need to change the config/local.json to change the platform settings:

  "platform": "magento1",
  "magento1": {
    "url": "http://magento-demo.local",
    "imgUrl": "http://magento-demo.local/media/catalog/product",
    "api": {
      "url": "http://magento-demo.local/vsbridge",
    }
  },

Available commands

The bridge works on temporary, versioned ES indexes. You decide when the index should be published (when all data objects are properly set). All commands exec from node-app/src directory.

Note: We're offering a native, Magento1 data indexer that's a Magento1 module - instead of node.js app. Please check out magento1-vsbridge-indexer for details!

Create new version of index (for example: vue_storefront_magento1_1):

cd node-app/src
node index.js new

Index data:

node index.js attributes
node index.js taxrules
node index.js categories
node index.js products
node index.js cms

Please note that if you want import / update data only for cms pages / blocks / hierarchy you can use this commads:

node index.js cms --pages (import / update only cms page data)
node index.js cms --blocks (import / update only cms block data)
node index.js cms --hierarchy (import / update only cms hierarchy data)
node index.js cms (without any params import all instances at once)

Publish new version of index (creates an alias with prod. name of the index: vue_storefront_magento1_1 -> vue_storefront_magento1):

node index.js publish

Congratulations! After this step You should have got the ES index synchronized with the Magento1 instance!

Screenshots

Please visit Vue Storefront site to check out why it's so cool!

List of synchronized products

As you may observed, configured products do work perfectly well after imported to Vue Storefront!

Configurable product

Customization & contributions

Please feel free to extend Magento module or Node app and contribute Your changes to the community!

Some ideas for contributions:

  • authorized users checkout.

License

magento1-vsbridge source code is completely free and released under the MIT License.

magento1-vsbridge's People

Contributors

afirlejczyk avatar dimasch avatar doliwa-divante avatar jensderond avatar mtarld avatar phoenix-bjoern avatar pkarw avatar resubaka avatar svenehmer avatar tdugue avatar upandfine avatar vladimirplastovets avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

magento1-vsbridge's Issues

Addresses limit

Post /user/me api now manage only one address as default shipping and one address as default billing.

the address is entered only if it has the flag default_shipping or default_billing is set to true, if the flags are absent, the address is not insert.

I have added to UserController.php this code:

if($updatedAdress["default_billing"] == false && $updatedAdress["default_shipping"] == false) { $bAddress = Mage::getModel("customer/address"); $updatedAdress["parent_id"] = $customer->getId(); $bAddress->setData($updatedAdress)->save(); }

Insert please in next version

Thanks

Schema invalid: Missing extension_attributes field from order-history

As written in doc/VueStorefrontBridge API specs.md:3307, response body must contain extension_attributes field which is not returned for now by the bridge.

That creates a bug when trying to see a single order from customer history: [Vue warn]: Error in render: "TypeError: this.order.extension_attributes is undefined"

Schema invalid: Invalid value types

In Magento1 vsBridge, json response is created using json_encode with JSON_NUMERIC_CHECK flag.

Therefore, every string that look like integer is casted as integer.
That's a good thing, but that creates some bugs:

  • Fields such as telephone, postcode, ... must be strings according to vsf schema. That's why vsf doesn't validate data.
  • Numbers like '06467' will always be returned as '6467'
  • cart id is returned as integer but should be string (then order cannot be placed)

Some servers caching the answers

In case you use a varnish or other technics the bridge answers would be cached.
So it would be nice if the answers add a "no-cache" header.

i haven't seen a case where it should anything.

Pull cart with unknown token

Although it should not happen but if vuesf tries to pull the server cart with a cart-token for which magento does not have a quote it returns 200 with and empty cart instead of 500 and the message that there is no cart with this token. This causes serveral problems in the frontend.

Order History API

If i have a product without shipping, for example a downloaded product, if the customer have a order with this product the api return a php error

<br /> <b>Fatal error</b>: Call to a member function getData() on boolean in <b>/opt/UNI/swreleases/catalogo/releases/20210427155517/app/code/community/Divante/VueStorefrontBridge/controllers/UserController.php</b> on line <b>333</b><br />

Documentation unclear / missing all setup required steps

  1. The "Available commands" section should be renamed to "pushing data to elasticsearch."

  2. Docs mention only docker-compose up from vue-storefront-api is needed because we only need elasticsearch running, but that doesn't seem to be true. it seems actually FULL install of vue-storefront-api is needed for vue-storefront to work. Even if you follow https://github.com/DivanteLtd/vue-storefront-integration-boilerplate as an example you can see it requires you to implement /catalog endpoint for elasticsearch which is not provided by the magento1 module within this repository. and vue-storefront needs it, so my guess is: you need more than JUST elasticsearch from vue-storefront-api.

  3. Docs doesn't explain how to point vue-storefront-api to magento1 vsbridge, especially when it comes to "magento2" config node.

Please update the docs by trying to setup the whole thing from scratch. The current one doesn't allow to setup working instance on VueSF based on Magento 1.9.X. Not by JUST following the steps exaplained.

Schema incompatible for latest VS/VSAPI

The magento1-vsbridge generates a different schema compared to mage2vs. In result you can not retrieve products because the filter parameter for "is_in_stock" does not match. The same is maybe true for the categories.

Here an example: magento1-vsbridge uses a flat schema for products and is_in_stock is saved on the same level as all other attributes in ES. mage2vs however uses a nested object in ES and it looks like this:

          "stock" : {
            "item_id" : 9,
            "product_id" : 9,
            "stock_id" : 1,
            "qty" : 1000,
            "is_in_stock" : true,
            "is_qty_decimal" : false,
            "show_default_notification_message" : false,
            "use_config_min_qty" : true,
            "min_qty" : 0,
            "use_config_min_sale_qty" : 1,
            "min_sale_qty" : 1,
            "use_config_max_sale_qty" : true,
            "max_sale_qty" : 10000,
            "use_config_backorders" : true,
            "backorders" : 0,
            "use_config_notify_stock_qty" : true,
            "notify_stock_qty" : 1,
            "use_config_qty_increments" : true,
            "qty_increments" : 0,
            "use_config_enable_qty_inc" : true,
            "enable_qty_increments" : false,
            "use_config_manage_stock" : true,
            "manage_stock" : true,
            "low_stock_date" : null,
            "is_decimal_divided" : false,
            "stock_status_changed_auto" : 0
          },

VS however generates the following query:

curl 'https://demo.vuestorefront.io/api/catalog/vue_storefront_catalog/product/_search?size=18&from=0&sort=' -H 'Accept: application/json' -H 'Content-Type: application/json' \ --data-binary '{"query":{"bool":{"must":[{"range":{"visibility":{"gte":3,"lte":4}}},{"range":{"status":{"gte":0,"lt":2}}},{"match":{"stock.is_in_stock":true}}]}}}'

So stock.is_in_stock doesn't match any product in Elasticsearch.

The schema definition os magento1-vsbridge, mage2vs, VS and VSAPI needs to be aligned. Otherwise one will always fall apart.

Problem with dynamic field mapping

When a new node index.js new is executed the mapping for Elasticsearch is created from the file node-app/src/meta/elastic.js. All other fields, especially for the products, are created by Elasticsearch's dynamic field mapping functionality (https://www.elastic.co/guide/en/elasticsearch/reference/current/dynamic-field-mapping.html). While this works in general some there are some attributes where it doesn't work.

So when the first product which references an attribute has an empty value or "0", which is a default for values stores in catalog_product_entity_int|decimal, is saved in ES, it is trying to "guess" the type for the mapping and assumes an "integer" field. When next product with has a value, lets say "37.5" is saved in ES, it throws an error like this:

response: '{"error":{"root_cause":[{"type":"mapper_parsing_exception","reason":"failed to parse [configurable_children.width]"}],"type":"mapper_parsing_exception","reason":"failed to parse [configurable_children.width]","caused_by":{"type":"number_format_exception","reason":"For input string: \\"37.5\\""}},"status":400}',

Similar situations can happen for multiselects etc. So eelying on dynamic field mapping is not a stable solution as it only will work for some fields.

So a better approach would be to update the mapping from the attributes. From the attributes we can create the correct field mapping as we know which value to expect.

Endpoint for handling new product reviews written via VSF

It would be great to be able to send reviews to Magento1 from VSF.

We would need an extended Magento1 platform in the API and at least one endpoint in the bridge. Depending on what the user should be able to do with its own reviews in his customer account.

We have planned to extend this in the future, because we need it for our implementation.
So, if you are not planning to add this feature (?), I will leave a short note here when I start with it.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.