README

Asdoria 配置器插件

产品配置器通过直观的视觉环境提高客户体验，从而提升您的销售额！在 Sylius 后台轻松配置复杂产品。

功能

• 我们根据多年的经验创建了配置器。我们了解到配置器必须灵活且易于维护。

因此，这个配置器以最智能的方式尽可能地接近 Sylius 模型构建。它基于产品属性，在保持其简洁性的同时解决复杂问题。

安装

1. 运行 composer require asdoria/sylius-configurator-plugin

2. 在 config/bundles.php 中添加捆绑包。您必须在 SyliusGridBundle 上方放置配置器插件行

Asdoria\SyliusConfiguratorPlugin\AsdoriaSyliusConfiguratorPlugin::class => ['all' => true],
[...]
Sylius\Bundle\GridBundle\SyliusGridBundle::class => ['all' => true],

1. 在 config/routes.yaml 中导入路由

asdoria_product_configurator:
    resource: "@AsdoriaSyliusConfiguratorPlugin/Resources/config/routing.yaml"

1. 在 config/packages/_sylius.yaml 中导入配置

imports:
    - { resource: "@AsdoriaSyliusConfiguratorPlugin/Resources/config/config.yaml"}

1. 将以下内容粘贴到 src/Repository/ProductAttributeRepository.php

    <?php

    declare(strict_types=1);

    namespace App\Repository;

    use Asdoria\SyliusConfiguratorPlugin\Repository\Model\Aware\ProductAttributeRepositoryAwareInterface;
    use Asdoria\SyliusConfiguratorPlugin\Repository\Traits\ProductAttributeRepositoryTrait;
    use Sylius\Bundle\ResourceBundle\Doctrine\ORM\EntityRepository as BaseProductAttributeRepository;

    /**
     * Class ProductAttributeRepository
     * @package App\Repository
     *
     * @author  Philippe Vesin <pve.asdoria@gmail.com>
     */
    class ProductAttributeRepository extends BaseProductAttributeRepository implements ProductAttributeRepositoryAwareInterface
    {
        use ProductAttributeRepositoryTrait;
    }

1. 在 config/packages/_sylius.yaml 中配置存储库

sylius_attribute:
    resources:
        product:
            attribute:
                classes:
                    model: App\Entity\Product\ProductAttribute
+                   repository: App\Repository\ProductAttributeRepository

1. 将以下内容粘贴到 src/Entity/Order/OrderItem.php

<?php

declare(strict_types=1);

namespace App\Entity\Order;

+use Asdoria\SyliusConfiguratorPlugin\Model\Aware\ConfiguratorAwareInterface;
+use Asdoria\SyliusConfiguratorPlugin\Traits\OrderItem\ConfiguratorTrait;
use Sylius\Component\Core\Model\OrderItem as BaseOrderItem;
+use Asdoria\SyliusConfiguratorPlugin\Traits\OrderItem\AttributeValuesTrait;
+use Asdoria\SyliusConfiguratorPlugin\Model\Aware\AttributeValuesAwareInterface;
use Doctrine\ORM\Mapping as ORM;

/**
 * @ORM\Entity
 * @ORM\Table(name="sylius_order_item")
 *
 */
class OrderItem extends BaseOrderItem
+ implements AttributeValuesAwareInterface, ConfiguratorAwareInterface
{    
    +use AttributeValuesTrait;
    +use ConfiguratorTrait;
    
    +public function __construct()
    +{
    +    $this->initializeAttributeValues();
    +    parent::__construct();
    +}

}

1. 将以下内容粘贴到 templates/bundles/SyliusShopBundle/Product/_info.html.twig

{% set product = variant.product %}

<div class="ui header">
    {% if variant.hasImages %}
        {% include '@SyliusShop/Product/_mainImage.html.twig' with {'product': variant, 'filter': 'sylius_shop_product_tiny_thumbnail'} %}
    {% else %}
        {% include '@SyliusShop/Product/_mainImage.html.twig' with {'product': product, 'filter': 'sylius_shop_product_tiny_thumbnail'} %}
    {% endif %}
    <div class="content">
        <a href="{{ path('sylius_shop_product_show', {'slug': product.slug}) }}">
            <div class="sylius-product-name" {{ sylius_test_html_attribute('product-name', item.productName) }}>{{ item.productName }}</div>
            <span class="sub header sylius-product-variant-code" {{ sylius_test_html_attribute('product-variant-code', variant.code) }}>
                {{ variant.code }}
            </span>
        </a>
    </div>
</div>
{% if product.hasOptions() %}
    <div class="ui horizontal divided list sylius-product-options" {{ sylius_test_html_attribute('product-options') }}>
        {% for optionValue in variant.optionValues %}
            <div class="item" data-sylius-option-name="{{ optionValue.name }}" {{ sylius_test_html_attribute('option-name', optionValue.name) }}>
                {{ optionValue.value }}
            </div>
        {% endfor %}
    </div>
{% elseif item.variantName is not null %}
    <div class="ui horizontal divided list">
        <div class="item sylius-product-variant-name" {{ sylius_test_html_attribute('product-variant-name') }}>
            {{ item.variantName }}
        </div>
    </div>
{% endif %}

+{% include '@AsdoriaSyliusConfiguratorPlugin/Shop/Cart/Summary/_attribute_value.html.twig' with {'item': item|default()} %}

1. 将以下内容粘贴到 templates/bundles/SyliusAdminBundle/Product/_info.html.twig

<div class="ui header">
    {% include '@SyliusAdmin/Product/_mainImage.html.twig' with {'product': product, 'filter': 'sylius_admin_product_tiny_thumbnail'} %}
    <div class="content">
        <div class="sylius-product-name" title="{{ item.productName }}">{{ item.productName }}</div>
        <span class="sub header sylius-product-variant-code" title="{{ variant.code }}">
            {{ variant.code }}
        </span>
    </div>
</div>
{% if product.hasOptions() %}
    <div class="ui horizontal divided list sylius-product-options">
        {% for optionValue in variant.optionValues %}
            <div class="item" data-sylius-option-name="{{ optionValue.name }}">
                {{ optionValue.value }}
            </div>
        {% endfor %}
    </div>
{% elseif item.variantName is not null %}
    <div class="ui horizontal divided list">
        <div class="item sylius-product-variant-name">
            {{ item.variantName }}
        </div>
    </div>
{% endif %}

+{% include '@AsdoriaSyliusConfiguratorPlugin/Admin/Order/Summary/_attribute_value.html.twig' with {'item': item|default()} %}

演示

您可以点击以下链接尝试在线配置器插件：链接。

请注意，我们为 Sylius 开发了其他几个开源插件，它们的演示和文档列在以下链接中：链接。

商店使用

1. 在前端，转到 /en_US/configurators/{slug} 路由。 这里！
2. 您可以使用自己的 JavaScript（VueJs、React 等..）通过 ajax 请求 路由获取配置器的结构。然后，在 /en_US/configurators/{slug} 路由中 POST 负载。

{
    "asdoria_configurator_add_to_cart":
    {
        "step": "xxx (id)",
        "cartItem":
        {
            "quantity": "1",
            "variant": "xxx (id)",
            "attributes":
            [
                {
                    "localeCode": "en_US",
                    "attribute": "xxx (code)",
                    "value": "xxx"
                }
            ]
        },
        "additionalItems":
        [
            {
                "cartItem":
                {
                    "quantity": "1"
                    "variant": "xxx (id)"
                }
            }
        ]
    }
}

后台使用

1. 在后台，转到 配置器 路由。

2. 点击 步骤管理 并为您的配置器创建不同的步骤。

3. 创建 您的第一个配置器。

   • 选择您的目标产品和您的计算器。
   • 转到 配置器项页面 以管理您的行。您可以创建一个属性项行或一个附加项行。如果属性项行与多选属性匹配，您可以在产品表中指定每个产品的可用选项。

4. 转到前端 /en_US/configurators/{slug} 路由。

贡献

如果您想，可以打开一个问题或拉取请求！谢谢！