README

此插件将 quagga2 与 Sylius 产品网格搜索集成。

它通过在搜索栏中添加一个按钮，使购物者可以使用设备的相机搜索 EAN 条形码。

当用户的浏览器支持且用户允许使用相机时，用户可以尝试扫描条形码。目前仅支持标准 EAN 条形码。

随后，如果识别出有效的 EAN 条形码，条形码将被用作搜索条件。在此示例中，产品名称是条形码。然而，可以将 EAN 存储在产品属性中，并配置产品网格将属性包含在搜索过程中。

支持的 Sylius 版本

安装

1. 使用 composer 安装

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

2. 将捆绑包添加到 bundles.php

   # config/bundles.php
   <?php
   
   return [
       ...
       Nedac\SyliusBarcodeSearchPlugin\NedacSyliusBarcodeSearchPlugin::class => ['all' => true],
   ];

3. 覆盖模板

   {# templates/bundles/SyliusShopBundle/Product/Index/_search.html.twig #}
   <div class="ui segment">
       <form method="get" action="{{ path('sylius_shop_product_index', {'slug': app.request.attributes.get('slug')}) }}" class="ui loadable form" id="nedac-sylius-barcode-search-plugin-search-form">
           <div class="ui stackable grid" id="searchbar">
               <div class="column" id="searchbarTextField">
                   {% for filter in products.definition.enabledFilters %}
                       {{ sylius_grid_render_filter(products, filter) }}
                   {% endfor %}
               </div>
               <div class="right aligned column" id="searchbarButtons">
                   <div class="ui buttons">
                       <button type="submit" class="ui primary icon labeled button"><i class="search icon"></i> {{ 'sylius.ui.search'|trans }}</button>
                       <a href="#" class="ui primary icon labeled button" id="nedac-sylius-barcode-search-plugin-start-button">
                           <i class="barcode icon"></i> EAN
                       </a>
                       <a href="{{ path('sylius_shop_product_index', {'slug': app.request.attributes.get('slug')}) }}" class="ui negative icon labeled button">
                           <i class="cancel icon"></i> {{ 'sylius.ui.clear'|trans }}
                       </a>
                   </div>
               </div>
           </div>
       </form>
   </div>
   <div class="ui modal" id="nedac-sylius-barcode-plugin-scan-modal">
       <i class="close icon" id="nedac-sylius-barcode-plugin-scan-modal-close-button"></i>
       <div class="header">
           Scan barcode
       </div>
       <div class="nedac-sylius-barcode-plugin-viewport-container">
           <div id="nedac-sylius-barcode-plugin-interactive" class="viewport"></div>
       </div>
       <div class="actions">
           <div class="ui black deny button" id="nedac-sylius-barcode-plugin-scan-modal-stop-button">
               Stop
           </div>
       </div>
   </div>

4. 安装资产

   bin/console sylius:install:assets

只需四个步骤！现在，您需要配置产品网格，以便包含 EAN 字段的字段被过滤。

设置开发环境

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

运行测试

docker-compose exec php sh
bin/console doc:sch:create
cd ../..
vendor/bin/behat