https://github.com/4c0n/syliusbarcodesearchplugin

Adds a button to the search form that uses the camera on your shop user's device to scan a EAN barcode and uses the corresponding code to search.
https://github.com/4c0n/syliusbarcodesearchplugin

Last synced: 19 days ago
JSON representation

Adds a button to the search form that uses the camera on your shop user's device to scan a EAN barcode and uses the corresponding code to search.

• Host: GitHub
• URL: https://github.com/4c0n/syliusbarcodesearchplugin
• Owner: 4c0n
• Created: 2020-02-29T18:25:08.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-05-19T22:40:23.000Z (over 4 years ago)
• Last Synced: 2024-05-01T12:34:04.353Z (9 months ago)
• Language: JavaScript
• Homepage:
• Size: 12 MB
• Stars: 3
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


This plugin integrates [quagga2](https://github.com/ericblade/quagga2) with the Sylius product grid search.

It does so by adding a button to the search bar that enables shoppers to use the camera on their device to search for a EAN barcode.

![Search bar](search_bar.png)

When the user's browser supports it and the user gives permission to use the camera, the user can attempt to scan a barcode. Currently only standard EAN barcodes are supported.

![Modal](barcode_scan_modal.png)

Subsequently, if a valid EAN barcode is recognised, the barcode will be used as search criteria. In this example the name of the product is the barcode.

However, it is possible to store the EAN in a product attribute and configure the product grid to include the attribute in the search process.

![Search result](search_result.png)

##### Supported Sylius versions:

    1.61.7

#### Installation:

1. Install using composer:

    ```bash

    composer require 4c0n/sylius-barcode-search-plugin

    ```

2. Add bundle to bundles.php:

    ```php

    # config/bundles.php

     ['all' => true],

    ];

    ```

3. Override template:

    ```twig

    {# templates/bundles/SyliusShopBundle/Product/Index/_search.html.twig #}

    


        

            


                


                    {% for filter in products.definition.enabledFilters %}

                        {{ sylius_grid_render_filter(products, filter) }}

                    {% endfor %}

                

                


                    


                         {{ 'sylius.ui.search'|trans }}

                        

                             EAN

                        

                        

                             {{ 'sylius.ui.clear'|trans }}

                        

                    

                

            

        

    

    


        

        


            Scan barcode

        

        


            


        

        


            


                Stop

            

        

    

    ```

4. Install assets:

    ```bash

   bin/console sylius:install:assets

    ```

Just four steps!

Now it's up to you to configure the product grid in such a way that a field containing the EAN is being filtered.


#### Setup development environment:

```bash

docker-compose build

docker-compose up -d

docker-compose exec php composer --working-dir=/srv/sylius install

docker-compose run --rm nodejs yarn --cwd=/srv/sylius/tests/Application install

docker-compose run --rm nodejs yarn --cwd=/srv/sylius/tests/Application build

docker-compose exec php bin/console assets:install public

docker-compose exec php bin/console doctrine:schema:create

docker-compose exec php bin/console sylius:fixtures:load -n

```

#### Running tests:

```bash

docker-compose exec php sh

bin/console doc:sch:create

cd ../..

vendor/bin/behat

```