diff --git a/_includes/pbc/all/install-features/202311.0/install-the-service-points-customer-account-management-feature.md b/_includes/pbc/all/install-features/202311.0/install-the-service-points-customer-account-management-feature.md index fb3d4786dce..a16cdd614b6 100644 --- a/_includes/pbc/all/install-features/202311.0/install-the-service-points-customer-account-management-feature.md +++ b/_includes/pbc/all/install-features/202311.0/install-the-service-points-customer-account-management-feature.md @@ -188,7 +188,11 @@ Adjust TWIG templates to display the service point selector: ```twig {% raw %}{% block globalComponents %} .... - {% include molecule('main-overlay') only %} + {% include molecule('main-overlay') with { + attributes: { + 'is-open': data.isOverlayOpen, + }, + } only %} {% endblock %}{% endraw %} ``` @@ -206,38 +210,37 @@ If the `cross` icon is already defined in the project, it's not necessary to add {% endinfo_block %} -3. For `/resources/form/form.twig` of `ShopUi` module, adjust `choice_widget_expanded` and `checkbox_widget` blocks: +3. In `tsconfig.yves.json` of the `ShopUi` module, adjust the `paths` section: + +```json +{ + "compilerOptions": { + "paths": { + ... + "ServicePointWidget/*": [ + "./vendor/spryker-shop/service-point-widget/src/SprykerShop/Yves/ServicePointWidget/Theme/default/*" + ] + } + } +} +``` + +4. To the `address` view of the `CheckoutPage` module, add `ClickAndCollectServicePointAddressFormWidget`: ```twig -{% raw %}{% block choice_widget_expanded -%} - ... - {{- form_widget(child, { - parent_label_class: label_attr.class|default(''), - choices_attr: choices_attr | default({}), - }) -}} - ... -{%- endblock choice_widget_expanded %} - -{%- block checkbox_widget -%} - ... - {%- set inputClass = attr.class | default ~ ' ' ~ choices_attr.class | default -%} - - {% define attributes = { - id: id, - name: full_name, - checked: checked | default(false), - required: required | default(false), - disabled: disabled ?: attr.disabled | default(false), - value: value | default(), - } %} - ... -{%- endblock -%}{% endraw %} +{% raw %}{% widget 'ClickAndCollectServicePointAddressFormWidget' args [data.form] only %}{% endwidget %}{% endraw %} ``` -4. To the `addres` view of the `CheckoutPage` module, add `ClickAndCollectServicePointAddressFormWidget`: +{% info_block infoBox "Adding of ClickAndCollectServicePointAddressFormWidget is automated" %} + +If you are using `ShipmentTypeAddressFormWidget`, `ClickAndCollectServicePointAddressFormWidget` is added automatically. + +{% endinfo_block %} + +5. Optional: For a multi-shipment, to the `address-item-form-field-list` molecule of the `CheckoutPage` module, add `ClickAndCollectServicePointAddressFormWidget`: ```twig -{% raw %}{% widget 'ClickAndCollectServicePointAddressFormWidget' args [data.checkoutAddressForm] only %}{% endwidget %}{% endraw %} +{% raw %}{% widget 'ClickAndCollectServicePointAddressFormWidget' args [item] only %}{% endwidget %}{% endraw %} ``` {% info_block infoBox "Adding of ClickAndCollectServicePointAddressFormWidget is automated" %} @@ -246,7 +249,7 @@ If using the `ShipmentTypeAddressFormWidget` widget, the `ClickAndCollectService {% endinfo_block %} -5. Build assets: +6. Build assets: ```bash console frontend:yves:build diff --git a/_includes/pbc/all/install-features/202311.0/install-the-shipment-customer-account-management-feature.md b/_includes/pbc/all/install-features/202311.0/install-the-shipment-customer-account-management-feature.md index 0cacdff6b77..fe47b001f5e 100644 --- a/_includes/pbc/all/install-features/202311.0/install-the-shipment-customer-account-management-feature.md +++ b/_includes/pbc/all/install-features/202311.0/install-the-shipment-customer-account-management-feature.md @@ -3,13 +3,9 @@ This document describes how to install the [Shipment](/docs/pbc/all/carrier-management/{{page.version}}/base-shop/shipment-feature-overview.html) + [Customer Account Management](/docs/pbc/all/customer-relationship-management/{{page.version}}/base-shop/customer-account-management-feature-overview/customer-account-management-feature-overview.html) feature. -## Install feature core +## Prerequisites -Follow the steps below to install the Shipment + Customer Account Management feature. - -### Prerequisites - -To start feature integration, integrate the required features: +Install the required features: | NAME | VERSION | INSTALLATION GUIDE | |-----------------------------|------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| @@ -37,7 +33,7 @@ console data:import glossary {% info_block warningBox "Verification" %} -Make sure that the configured data is added to the `spy_glossary_key` and `spy_glossary_translation` tables in the database. +Make sure the configured data has been added to the `spy_glossary_key` and `spy_glossary_translation` tables. {% endinfo_block %} @@ -47,9 +43,9 @@ Enable the following plugins: | PLUGIN | SPECIFICATION | PREREQUISITES | NAMESPACE | |--------------------------------------------------------------|---------------------------------------------------------------------------|---------------|------------------------------------------------------------| -| ShipmentTypeCheckoutAddressCollectionFormExpanderPlugin | Expands the checkout address form with the `ShipmentType` subform. | None | SprykerShop\Yves\ShipmentTypeWidget\Plugin\CustomerPage | -| ShipmentTypeCheckoutMultiShippingAddressesFormExpanderPlugin | Expands the checkout multi-shipping address form `ShipmentType`. | None | SprykerShop\Yves\ShipmentTypeWidget\Plugin\CustomerPage | -| ShipmentTypeAddressFormWidgetCacheKeyGeneratorStrategyPlugin | Skips caching of the `ShipmentTypeAddressFormWidget` widget. | None | SprykerShop\Yves\ShipmentTypeWidget\Plugin\ShopApplication | +| ShipmentTypeCheckoutAddressCollectionFormExpanderPlugin | Expands the checkout address form with the `ShipmentType` subform. | | SprykerShop\Yves\ShipmentTypeWidget\Plugin\CustomerPage | +| ShipmentTypeCheckoutMultiShippingAddressesFormExpanderPlugin | Expands the checkout multi-shipping address form `ShipmentType`. | | SprykerShop\Yves\ShipmentTypeWidget\Plugin\CustomerPage | +| ShipmentTypeAddressFormWidgetCacheKeyGeneratorStrategyPlugin | Skips caching of the `ShipmentTypeAddressFormWidget` widget. | | SprykerShop\Yves\ShipmentTypeWidget\Plugin\ShopApplication | **src/Pyz/Yves/CustomerPage/CustomerPageDependencyProvider.php** @@ -116,7 +112,7 @@ Register the following plugins to enable widgets: | PLUGIN | SPECIFICATION | PREREQUISITES | NAMESPACE | |-------------------------------|---------------------------------------------------------------|---------------|--------------------------------------------| -| ShipmentTypeAddressFormWidget | Enables shipment type selection during the checkout address step. | None | SprykerShop\Yves\ShipmentTypeWidget\Widget | +| ShipmentTypeAddressFormWidget | Enables shipment type selection at the checkout address step. | | SprykerShop\Yves\ShipmentTypeWidget\Widget | **src/Pyz/Yves/ShopApplication/ShopApplicationDependencyProvider.php** @@ -142,17 +138,47 @@ class ShopApplicationDependencyProvider extends SprykerShopApplicationDependency } ``` -## 4) Set up the FE part +## 4) Set up the frontend Adjust TWIG templates to display the shipment types: -1. For a single shipment, to the `address` view of the `CheckoutPage` module, add `ShipmentTypeAddressFormWidget`: +1. In `/resources/form/form.twig` of the `ShopUi` module, adjust `choice_widget_expanded` and `checkbox_widget` blocks: + +```twig +{% raw %}{% block choice_widget_expanded -%} + ... + {{- form_widget(child, { + parent_label_class: label_attr.class | default, + choices_attr: choices_attr | default({}), + }) -}} + ... +{%- endblock choice_widget_expanded %} + +{%- block checkbox_widget -%} + ... + {%- set inputClass = attr.class | default ~ ' ' ~ choices_attr.class | default -%} + + {% define attributes = { + ... + disabled: disabled ?: attr.disabled | default(false), + ... + } %} + + {%- set modifiers = modifiers | merge([attributes.additionalModifier], choices_attr.modifiers | default([])) -%} + ... +{%- endblock -%}{% endraw %} +``` + +2. For a single shipment, to the `address` view of the `CheckoutPage` module, add `ShipmentTypeAddressFormWidget`: ```twig {% raw %}{% widget 'ShipmentTypeAddressFormWidget' args [data.form] with { data: { deliveryContainerClassName: deliveryContainerClassName, - billingSameAsShippingContainerClassName: embed.jsAddressClass ~ '__wrapper-billingSameAsShipping', + billingSameAsShippingContainerClassName: billingSameAsShippingContainerClassName, + shipmentTypesClassName: validatorTriggerClassName, + servicePointClassName: shippingValidationContainerClassName, + deliverySelectClassName: deliverySelectClassName, }, } only %} {% endwidget %}{% endraw %} @@ -161,13 +187,15 @@ Adjust TWIG templates to display the shipment types: {% info_block infoBox "Attribute description" %} * `deliveryContainerClassName`: class name of the container delivery form and address selector. -* `embed.jsAddressClass ~ '__wrapper-billingSameAsShipping'`: container class name for the **Billing same as shipping** checkbox. +* `billingSameAsShippingContainerClassName`: container class name for the **Billing same as shipping** checkbox. +* `validatorTriggerClassName`: trigger class name for the `validate-next-checkout-step` molecule. +* `shippingValidationContainerClassName`: container class name for the shipping validation. +* `deliverySelectClassName`: class name of the address selector. {% endinfo_block %} -2. (Optional) For a multi-shipment, follow these steps: - 1. Add the `ShipmentTypeAddressFormWidget` widget, as described in step 1 (for the single shipment). - 2. To the `address` view of the `CheckoutPage` module, add the `multiple-shipment-toggler` molecule: +2. Optional: For a multi-shipment, adjust the `CheckoutPage` module by following these steps: + 1. To the `address` view, add the `multiple-shipment-toggler` molecule: ```twig {% raw %}{% include molecule('multiple-shipment-toggler', 'CheckoutPage') with { @@ -181,41 +209,56 @@ Adjust TWIG templates to display the shipment types: } only %}{% endraw %} ``` - {% info_block infoBox "Attribute description" %} - - * `isMultipleShipmentSelected`: flag that indicates if the multiple shipment is selected. - * `singleDeliveryContainerClassName`: class name of the container address selector and the `ShipmentTypeAddressFormWidget`. - * `deliverySelectClassName`: class name of the address selector. - - {% endinfo_block %} - - 3. To the `address-item-form-field-list` molecule of the `CheckoutPage` module, add `ShipmentTypeAddressFormWidget`: - - ```twig - {% raw %}{% widget 'ShipmentTypeAddressFormWidget' args [item] with { - data: { - deliveryContainerClassName: deliveryContainerClassName, - shipmentTypesClassName: data.validatorTriggerClassName, - servicePointClassName: data.itemShippingClassName, - }, - } only %}{% endwidget %}{% endraw %} - ``` - - 4. In the `CheckoutPage` module, adjust the `address-item-form` molecule by adding the `extra-triggers-class-name` attribute property for the `validate-next-checkout-step` molecule to validate `pickup` shipment type: - - ```twig - {% raw %}{% include molecule('validate-next-checkout-step', 'CheckoutPage') with { - class: validatorClassName, - attributes: { - 'container-selector': '.' ~ itemShippingClassName, - 'target-selector': '.' ~ data.jsAddressClass ~ '__form-submit', - 'dropdown-trigger-selector': '.' ~ addressSelectClassName ~ ':not(.' ~ data.hiddenClassName ~ ')', - 'extra-triggers-class-name': validatorTriggerClassName, - 'parent-target-class-name': config.jsName ~ '__items', - 'is-enable': false, - }, - } only %}{% endraw %} - ``` + {% info_block infoBox "Attribute description" %} + + * `isMultipleShipmentSelected`: flag that indicates if the multiple shipment is selected. + * `singleDeliveryContainerClassName`: class name of the container address selector and the `ShipmentTypeAddressFormWidget`. + * `deliverySelectClassName`: class name of the address selector. + + {% endinfo_block %} + + 2. To the `address-item-form-field-list` molecule of the `CheckoutPage` module, add `ShipmentTypeAddressFormWidget`: + + ```twig + {% raw %}{% widget 'ShipmentTypeAddressFormWidget' args [item] with { + data: { + deliveryContainerClassName: deliveryContainerClassName, + shipmentTypesClassName: data.validatorTriggerClassName, + servicePointClassName: data.itemShippingClassName, + }, + } only %}{% endwidget %}{% endraw %} + ``` + + 3. Move the `is-next-checkout-step-enabled` and `validate-next-checkout-step` molecules from the `address-item-form-field-list` molecule to the `address` view. Put them before the `address-form-toggler` molecule. + + 4. To validate the `pickup` shipment type, adjust the `address` view by adding the `extra-target-selector` attribute property for the `is-next-checkout-step-enabled` molecule: + + ```twig + {% raw %}{% include molecule('is-next-checkout-step-enabled', 'CheckoutPage') with { + attributes: { + 'trigger-selector': '.' ~ deliverySelectClassName, + 'target-selector': '.' ~ multishipmentValidatorClassName, + 'extra-target-selector': '.' ~ validatorClassName, + }, + } only %}{% endraw %} + ``` + + 5. To validate the `pickup` shipment type, adjust the `address` view by adding the `extra-container-selector` and `extra-triggers-class-name` attribute properties for the `validate-next-checkout-step` molecule : + + ```twig + {% raw %}{% include molecule('validate-next-checkout-step', 'CheckoutPage') with { + class: validatorClassName, + attributes: { + 'container-selector': '.' ~ shippingValidationContainerClassName, + 'extra-container-selector': '.' ~ deliveryContainerClassName, + 'target-selector': '.' ~ embed.formSubmitClassName, + 'dropdown-trigger-selector': '.' ~ deliverySelectClassName ~ ':not(.' ~ hiddenClassName ~ ')', + 'extra-triggers-class-name': validatorTriggerClassName, + 'parent-target-class-name': singleDeliveryContainerClassName, + 'is-enable': false, + }, + } only %}{% endraw %} + ``` 3. Build assets: @@ -225,10 +268,10 @@ console frontend:yves:build {% info_block warningBox "Verification" %} -Make sure the following widgets were registered: +Make sure the following widget has been registered: -| MODULE | TEST | +| MODULE | VERIFICATION | |--------------------------------|---------------------------------------------------------------------------------| -| ShipmentTypeAddressFormWidget | Go to **Address Checkout Step** and make sure that you can select shipment type. | +| ShipmentTypeAddressFormWidget | Go to **Address Checkout Step** and make sure that you can select a shipment type. | {% endinfo_block %}