README

将B2B增值税开关器添加到页眉组件，让客户决定如何展示他们的价格；包括或排除增值税。该决定将保存到浏览器存储中。

由于magento中有许多价格，有一个可重用的alpine组件可以在实时之间切换价格。它只需要包含和排除价格。

带有alpine组件的示例

            <div x-data="initVatSwitcherPrice()" x-spread="eventListeners">
                <span class="price-incl" x-show="vatMode == 'including'" x-html="hyva.formatPrice('<?= $priceModel->getValue() ?>')"></span>
                <span class="price-excl" x-show="vatMode == 'excluding'" x-html="hyva.formatPrice('<?= $priceModel->getBaseAmount() ?>')"></span>
            </div>

            <script>
                function initVatSwitcherPrice() {
                    return {
                        vatMode: vatSwitcher.getVatMode(),

                        eventListeners: {
                            ['@vat-switch.window'](event) {
                                this.vatMode = event.detail;
                            }
                        }
                    }
                }
            </script>

带有现有alpine组件的示例

有时您可能需要从已经存在的价格组件中获取价格信息，因为在alpine中从父组件传递数据到子组件比较困难。在这种情况下，您只需简单地将vatmode: vatMode: vatSwitcher.getVatMode(), 和 eventListener 添加到现有组件中

function initExistingComponent() {
    return {
        vatMode: vatSwitcher.getVatMode(),

        eventListeners: {
            ['@vat-switch.window'](event) {
                this.vatMode = event.detail;
            }
        }
    }
}

并确保现有组件使用: x-spread="eventListeners"。现在您也可以在现有组件中使用类似的代码

    <div x-data="initExistingComponent()" x-spread="eventListeners">
        <span class="price-incl" x-show="vatMode == 'including'" x-html="hyva.formatPrice('<?= $priceModel->getValue() ?>')"></span>
        <span class="price-excl" x-show="vatMode == 'excluding'" x-html="hyva.formatPrice('<?= $priceModel->getBaseAmount() ?>')"></span>
    </div>