divanteltd / coreshop-vsbridge

CoreShop Vue Storefront integration - first Progressive Web App (PWA) framework for Pimcore

First Progressive Web App for Pimcore and CoreShop

This projects bring You the Pimcore plus Coreshop support as a backend platform for Vue Storefront - first Progressive Web App for e-Commerce.

Vue Storefront is a standalone PWA storefront for your eCommerce, possible to connect with any eCommerce backend (eg. Magento, Pimcore, Prestashop or Shopware) through the API.

Video demo

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

Pimcore 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 CoreShop and Pimcore data structures

The module is created as a Pimcore Symfony Bundle and provides the native data exchange capabilities of:

• pushing the entities marked as Products (maped in the Pimcore Admin panel) to Elastic Search (including support for configurable products),
• exposing all required dynamic API backends - like shopping cart, user accounts, totals etc.

Setup and installation

The Data Bridge is provided as a Pimcore extension (Symfony Bundle)

Requirements

• php 7.1 or above
• pimcore/pimcore 5.4 or above
• coreshop/core-shop 2.0.x-dev
• vuestorefront and vuestorefront api containers must be visible for pimcore and vice versa

Register bundles

In app/AppKernel.php of Your Pimcore instance please add this line to registerBundlesToCollection:

        if (class_exists('\ONGR\ElasticsearchBundle\ONGRElasticsearchBundle')) {
            $collection->addBundle(new ONGR\ElasticsearchBundle\ONGRElasticsearchBundle);
        }

        if (class_exists('\Cocur\Slugify\Bridge\Symfony\CocurSlugifyBundle')) {
            $collection->addBundle(new \Cocur\Slugify\Bridge\Symfony\CocurSlugifyBundle());
        }

        if (class_exists('\SymfonyBundles\JsonRequestBundle\SymfonyBundlesJsonRequestBundle')) {
            $collection->addBundle(new \SymfonyBundles\JsonRequestBundle\SymfonyBundlesJsonRequestBundle());
        }

        if (class_exists('\Lexik\Bundle\JWTAuthenticationBundle\LexikJWTAuthenticationBundle')) {
            $collection->addBundle(new \Lexik\Bundle\JWTAuthenticationBundle\LexikJWTAuthenticationBundle());
        }

        if (class_exists('\Gfreeau\Bundle\GetJWTBundle\GfreeauGetJWTBundle')) {
            $collection->addBundle(new \Gfreeau\Bundle\GetJWTBundle\GfreeauGetJWTBundle());
        }

        if (class_exists('\Nelmio\CorsBundle\NelmioCorsBundle')) {
            $collection->addBundle(new Nelmio\CorsBundle\NelmioCorsBundle());
        }
        
        if (class_exists('Gesdinet\JWTRefreshTokenBundle\GesdinetJWTRefreshTokenBundle')) {
            $collection->addBundle(new \Gesdinet\JWTRefreshTokenBundle\GesdinetJWTRefreshTokenBundle());
        }

Configure ES connection

In app/config/config.yml of Your Pimcore instance add this ElasticSearch configuration:

ongr_elasticsearch:
    managers:
        default:
            index:
                index_name: vue_storefront_catalog
                hosts:
                    - es1:9200
            mappings:
                - CoreShop2VueStorefrontBundle

Update database schema

Please execute the schema update php bin/console doctrine:schema:update --force

JWT Configuration

1. Inside root pimcore directory run these commands:

mkdir -p config/jwt
openssl genrsa -out config/jwt/private.pem -aes256 4096
openssl rsa -pubout -in config/jwt/private.pem -out config/jwt/public.pem

2. In the main config file - app/config/config.yml please do add the following section:

lexik_jwt_authentication:
    secret_key: '%kernel.project_dir%/config/jwt/private.pem'
    public_key: '%kernel.project_dir%/config/jwt/public.pem' 
    pass_phrase: 'enterYourPhrase' 
    token_ttl:  3600
    token_extractors:
        authorization_header:
            enabled: true
            prefix:  Bearer
            name:    Authorization

        query_parameter:
            enabled: true
            name: token

Vue Storefront Configuration

After successfull Pimcore bundle installation Your Pimcore instance will be handling all the dynamic requests from Vue Storefront. Thereof You need to modify vue-storefront/config/local.json (assuming that Your Pimcore base URL is https://vuestorefrontcoreshop.localhost and ElasticSearch running on)

Note: As the Vue Storefront will be connecting to ElasticSearch from the client's browser You probably should put some kind of Proxy in front of ElasticSearch for scalability and security reasons. Please consider using the vue-storefront-api. It's endpoint /api/catalog works as a ElasticSearch HTTP(s) proxy. You can achieve the same results using nginx either Varnish.

  "elasticsearch": {
    "httpAuth": "",
    "host": "localhost:9200",
    "index": "vue_storefront_catalog",
    "min_score": 0.02,
    "csrTimeout": 5000,
    "ssrTimeout": 1000
  },
 "cart": {
    "create_endpoint": "http://vuestorefrontcoreshop.localhost/vsbridge/cart/create?token={{token}}",
    "updateitem_endpoint": "http://vuestorefrontcoreshop.localhost/vsbridge/cart/update?token={{token}}&cartId={{cartId}}",
    "deleteitem_endpoint": "http://vuestorefrontcoreshop.localhost/vsbridge/cart/delete?token={{token}}&cartId={{cartId}}",
    "pull_endpoint": "http://vuestorefrontcoreshop.localhost/vsbridge/cart/pull?token={{token}}&cartId={{cartId}}",
    "totals_endpoint": "http://localhost:8080/api/cart/totals?token={{token}}&cartId={{cartId}}",
    "paymentmethods_endpoint": "http://vuestorefrontcoreshop.localhost/vsbridge/cart/payment-methods?token={{token}}&cartId={{cartId}}",
    "shippingmethods_endpoint": "http://vuestorefrontcoreshop.localhost/vsbridge/cart/shipping-methods?token={{token}}&cartId={{cartId}}",
    "shippinginfo_endpoint": "http://vuestorefrontcoreshop.localhost/vsbridge/cart/shipping-information?token={{token}}&cartId={{cartId}}",
    "collecttotals_endpoint": "http://localhost:8080/api/cart/collect-totals?token={{token}}&cartId={{cartId}}",
    "deletecoupon_endpoint": "http://localhost:8080/api/cart/delete-coupon?token={{token}}&cartId={{cartId}}",
    "applycoupon_endpoint": "http://localhost:8080/api/cart/apply-coupon?token={{token}}&cartId={{cartId}}&coupon={{coupon}}"
  },
 "orders": {
    "endpoint": "http://vuestorefrontcoreshop.localhost/vsbridge/order?token={{token}}",
  },
  "users": {
    "endpoint": "http://vuestorefrontcoreshop.localhost/vsbridge/user",
    "history_endpoint": "http://vuestorefrontcoreshop.localhost/vsbridge/user/order-history?token={{token}}",
    "resetPassword_endpoint": "http://vuestorefrontcoreshop.localhost/vsbridge/user/reset-password",
    "changePassword_endpoint": "http://vuestorefrontcoreshop.localhost/vsbridge/user/change-password?token={{token}}",
    "login_endpoint": "http://vuestorefrontcoreshop.localhost/vsbridge/user/login",
    "create_endpoint": "http://vuestorefrontcoreshop.localhost/vsbridge/user/create",
    "me_endpoint": "http://vuestorefrontcoreshop.localhost/vsbridge/user/me?token={{token}}",
    "refresh_endpoint": "http://vuestorefrontcoreshop.localhost/vsbridge/user/refresh"
  },  
  "stock": {
    "endpoint": "http://vuestorefrontcoreshop.localhost/vsbridge/stock"
  },
  "images": {
    "baseUrl": "http://vuestorefrontcoreshop.localhost/img/",
    "productPlaceholder": "/assets/placeholder.jpg"
  },   

Data formats and architecture

As Pimcore is a very extensible Framework, the data structures and format may vary. By default we do support official CoreShop data structures. For demonstration purposes we do support all the standard entities like:

• set of required attributes,
• categories,
• products: localized attributes, single photo (can be easily extendend), variants, prices.

Screenshots

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

This is the standard Pimcore panel where You can edit Your products, categories and assets.

Here is the order as it was transmited from Vue Storefront to CoreShop

All the products attributes, description, categories assets and other meta data is synchronized with Vue Storefront in real time

Credits

This module has been initially created by Divante's team:

• Kamil Karkus - @kkarkus,
• Kamil Wręczycki - @kwreczycki

Support

If You have any questions regarding this project feel free to contact us:

• E-mail,
• Slack

Licence

CoreShop VsBridge source code is completely free and released under the MIT License.

coreshop-vsbridge's Issues

Automatically update AppKernel after installation

This can be helpful: https://github.com/sensiolabs/SensioGeneratorBundle/blob/master/Manipulator/KernelManipulator.php#L49

Security issue: User not authenticated properly! User can change other user's info.

When someone makes a POST request to the "/vsbridge/user/me" API, the system checks if the user is authenticated (via the firewall), but then proceeds to edit the user whose email the requester provided, not necessarily the user who is making the request!

So, as long as the user making the request is a customer, they can edit any other customer's details!

Add a Symfony Flex recipe

Up to date alternative to #11.

Support for Elasticsearch 7

If using ES7, an index cannot have more than one type.

Currently, the bundle is trying to place everything into a single index called vue_storefront_catalog, but that's not how VSF currently works with ES7, it creates multiple indices called catalog, catalog_attribute, catalog_category, etc.

Tagging

Latest pull request (12b4bd1) breaks compatibility with coreshop 2.0.4

Please tag versions of coreshop-vsbridge so that such a change don't break compatibility, and set the requirements in composer.json

No need for custom Models

https://github.com/DivanteLtd/coreshop-vsbridge/tree/master/src/CoreShop2VueStorefrontBundle/Model

Currently there is no need for that since you don't have any custom fields in there. Anyway: Imagine other plugins coming for CoreShop and everybody adds a new class, that wouldn't work, so better work with interfaces instead ;)

Support for CMS blocks / pages

Fix for functional test

Lines below should be uncommented

coreshop-vsbridge/src/CoreShop2VueStorefrontBundle/Tests/Functional/Controller/CustomerControllerTest.php

Line 102 in 280d6bd

/* $address = $responseResult['addresses'][0];

Read sites / stores directly from the database

Currently the site / store config is read from the config file, as seen in #57. We're close to having this not required at all, meaning it could use the structure in the Documents tree, root documents made sites (Pimcore feature) and then Stores from Coreshop stores.

This would remove the requirement of having these be hardcoded in config, making it much more flexible.

New abstract coreshop method not declared in ElasticSearchWorker

in coreshop 2.0.3 added a new method (handleArrayValues) into AbstractWorker class what is not declared in ElasticSearchWorker and this causes an fatal error!

Fatal error: Class CoreShop2VueStorefrontBundle\Worker\ElasticSearchWorker contains 1 abstract method and must therefore be declared

Don't install new Classes in a migration

You are installing already from CoreShop installed classes. It potentially could happen that you overwrite stuff. Better use the ClassUpdater and install fields you need.

coreshop-vsbridge/src/CoreShop2VueStorefrontBundle/Migrations/Version20181203112859.php

Line 16 in 9a266d2

$service = $this->container->get(InstallerService::class);

Multilanguage support

Both VSF and Coreshop support multilanguage, we need a way to create VSF-compatible multilanguage indices (take note in #30).

getCountry() cause internal error

in ResponseBodyCreator.php -> getAddress function
$address['country_id'] = $defaultAddress->getCountry()
is not an array but an object, which causes an internal error.
I think, the right solution is:
$address['country_id'] = $defaultAddress->getCountry()->getId();

[Chore] improve the repo's build process

Some ideas:

• Switch to Github actions
• Add static analysis (PHPStan, Psalm)
• Add mutation testing (Infection)
• Add code style checker (CS Fixer)
• Make it Docker-based so any developer can run it fully locally easily (PHPQA)

Example which can very easily be adapted to do all this:
https://github.com/dkarlovi/xezilaires-dev

Generate (parts of) VSF configuration directly from the bundle

Since Coreshop knows about the available languages (see #33), has support for multistores, currencies, etc, and this bundle will need to know directly about Elasticsearch indices (see #30), it seems there's quite a bit of knowledge which is required to create the VSF config file already available to Pimcore.

It would make sense to provide a simple command which could generate it from the available data:

1. use Pimcore's sites feature
2. use Pimcore's multilanguage feature
3. use Coreshop's stores feature
4. configure ES directly via this bundle
5. codify this into a structure VSF understands, giving a huge UX/DX win here

Enable PHP 7.4 in travis

Add PHP 7.4 to travis matrix, currently is stable release

CoreShop 2.0.4 dependency breaks ElasticSearchWorker - services.yaml argument missing

We just installed the coreshop-vsbridge plugin on a fresh system of pimcore + coreshop (dev-master).

After the installation the following error occurs:

Type error: Too few arguments to function CoreShop\Bundle\IndexBundle\Worker\AbstractWorker::__construct(), 5 passed in /var/www/html/vendor/divante-ltd/coreshop-vsbridge/src/CoreShop2VueStorefrontBundle/Worker/ElasticSearchWorker.php on line 53 and exactly 6 expected

In the services.yaml there are only 5 arguments specified:

CoreShop2VueStorefrontBundle\Worker\ElasticSearchWorker:
        arguments:
            - '@coreshop.registry.index.extensions'
            - '@coreshop.registry.index.getter'
            - '@coreshop.registry.index.interpreter'
            - '@coreshop.index.filter_group_helper'
            - '@coreshop.index.condition.renderer'
        shared: false
        calls:
            - { method: setLogger, arguments: ['@logger'] }
        tags:
            - { name: coreshop.index.worker, type: elasticsearch, form-type: CoreShop2VueStorefrontBundle\Worker\Type\ElasticSearchWorkerType }

this PR from coreshop added the 6th argument without a default -

coreshop/CoreShop#856

I will also open a PR with instructions for the installation & outlining the requirement for "coreshop/core-shop:2.0.x-dev"

---

With coreshop/core-shop:2.0.1- the bridge works perfectly

CreateCart return 0

Greetings,

We are trying to integrate pimcore to VS, so we are using coreshop-vsbridge. However it's not working as expected while creating a cart. It return 0, and then when we try to checkout an order, it return an error expecting CartInterface but got null.

Any idea what am I doing wrong?

Best regards, and thank you so much for this awesome app.

Error when try to get current user

I created a new api :

/**
     * @Route("/vsbridge/product/get/{product}")
     * @Method("GET")
     *
     * @param Request           $request
     *
     * @return JsonResponse
     */
    public function getProduct(
        Request $request
    ) {
        $user = $this->getUser();

        return $this->json([
            'status' => 200,
            'result' => $user,
        ]);
    }

But I get the error :

Call to a member function isAdmin() on null (500 Internal Server Error)

I confirm that first I called the login method, and with the token from /login I call this new api.
You have an idea @pkarw, @kwreczycki ? thx in advance

Import in bulk instead of one by one

Elasticsearch has a Bulk API. Using that in the importer command would mean we would do way less HTTP requests at a time, likely improving performance and robustness of the import process.

Since this package uses ongr Elasticsearch bundle to abstract interacting with ES, this would likely need to be supported there first.

Alternatively, this package could switch to Elastica which already supports bulk operations (but the switch would likely be quite a bit of work).

Enable php 7.3 in .travis.yml

Due to incompatibility of elasticsearch/elastichsearch and ongr/elastichsearch-bundle with PHP 7.3, this job is temporarily commented (#13).

Symfony-bundles/json-request-bundle deleted

Hello everyone,

The Symfony-bundles/json-request-bundle package was deleted from github, so when we try to install the project, we have an error.

Is there any solution to fix that?

Best regards,

IndexableInterface

Allow custom objects to be ingested, useful after #44 and #54.

Should be used here:

coreshop-vsbridge/src/CoreShop2VueStorefrontBundle/EventListener/ProductListener.php

Lines 61 to 65 in 6f20920

	private function shouldSynchronizeWithVue($object): bool
	{
	return $object instanceof CategoryInterface
	|| $object instanceof ProductInterface;
	}

Move class CustomCartContext to Bridge namespace

coreshop-vsbridge/src/CoreShop2VueStorefrontBundle/Cart/CustomCartContext.php

Line 43 in 9a266d2

public function __construct(

Setup travis ci

Direct access to Pimcore Object instead of CoreShop Repository

You directly access the Product Class here. The problem is, that any class potentially could be the product class, thats why CoreShop has the Repository Layer above that.

coreshop-vsbridge/src/CoreShop2VueStorefrontBundle/Repository/ProductRepository.php

Line 51 in 9a266d2

$list = new Listing();

Reason for Elasticsearch Index?

Whats the reason for this? This seems to integrate Elasticsearch with the CoreShop Index Bundle? Do you need that in this Bundle?

coreshop-vsbridge/src/CoreShop2VueStorefrontBundle/Worker/ElasticSearchWorker.php

Line 19 in 9a266d2

class ElasticSearchWorker extends AbstractWorker

Add support for `url_path` field

As for the Vue Storefornt 1.9 we're supporting the product.url_path and category.url_path that defines the exact URL path for products and categories (including nested level / etc). This is how mage2vuestorefront - our reference implementation handles this field: https://github.com/DivanteLtd/mage2vuestorefront/blob/c71788e1c918225685344657f9d6ca0b2417d801/src/config.js#L7

The only req. is that url_path should be unique and seo friendly

Update composer.json to support 2.2?

Wait for DB service ready in travis

Most of travis failed job was due to connection problems in the before_script section, most people fix this with a simple sleep prior to send commands to BD.

https://docs.travis-ci.com/user/database-setup/#mongodb-does-not-immediately-accept-connections