How-to override bpost module?

Override

## Adjust Selectors Based on Your Theme Structure

To customize selectors for the bpostshm module, you can override the module and update your selectors as needed. Below is an example in PHP:

01.// override/modules/bpostshm/bpostshm.php
02.
03.class BpostShmOverride extends BpostShm
04.{
05.  public function getSelectors(): array
06.  {
07.    // Don't use ID
08.    return [
09.        'carrierName' => '.js-delivery-option .carrier-name',
10.        'bpostshmCarrier' => '.bpostshm-carrier',
11.        'deliveryDate' => '.bpostshm-delivery-date',
12.        'deliverySaturdayAlert' => '.bpostshm-saturday-alert',
13.        'deliveryOption' => '.js-delivery-option',
14.        'alert' => '.alert-danger',
15.        'choosePickupBtn' => '.bpostshm-choose-pickup',
16.        'changePickupBtn' => '.bpostshm-change-pickup',
17.        'pickupCarrier' => '.bpostshm-pickup-carrier',
18.        'pickupWidget' => [
19.             'parent' => '.bpostshm-widget',
20.             'map' => 'bpostshm-map',
21.             'marker' => 'bpostshm-marker',
22.             'markerBtn' => '.btn-select-pickup',
23.             'result' => '.bpostshm-result',
24.             'pickupList' => '.bpostshm-pickup-list',
25.             'search' => [
26.                'address' => '.bpostshm-search .poi-address',
27.                'postcode' => '.bpostshm-search .poi-postcode',
29.                'country' => '.bpostshm-search .poi-country',
30.                'deliveryDate' => '.bpostshm-delivery-date select',
31.                'btn' => '.bpostshm-search button',
32.             ],
33.        ],
34.        'pickupAddress' => [
35.             'parent' => '.bpostshm-pickup-point-address',
36.             'address' => 'address',
37.        ],
38.    ];
39.  }
40.}

## Custom CSS Styling

For minor style adjustments, follow these steps:

• 1. Copy /modules/bpostshm/views/css/custom.css to /themes/{votre thème}/modules/bposthm/views/css/custom.css
• 2. Add your custom styles to the copied file.

## Advanced JS/CSS Overrides When Necessary

If you require advanced overrides, follow these steps:

• 1. Copy the following directories/files:

01.   _dev
02.   .bablerc
03.   .eslintignore
04.   .eslintrc.js
05.   .stylelintrc.json
06.   package.json
07.   webpack.config.js

• 2. Paste them in /themes/{votre thème}/modules/bposthm
• 3. Install all dependencies by running the command below. Ensure you have NodeJs 14+ installed:

01.   cd /themes/{votre thème}/modules/bposthm
02.   npm install

• 4. Make your modifications while considering future updates.
• 5. Compile your JS/CSS to apply the changes:

01.   cd /themes/{votre thème}/modules/bposthm
02.   npm run build

• 6. Don’t forget to flush PrestaShop cache after making changes.

### Bonus Tip

To ensure code quality, run js-lint and scss-lint:

01.   cd /themes/{votre thème}/modules/bposthm
02.   npm run scss-lint-fix
03.   npm run js-lint-fix

## Adjust Selectors Based on Your Theme Structure

To customize selectors for the bpostshm module, you can override the module and update your selectors as needed. Below is an example in PHP:

“`php
// override/modules/bpostshm/bpostshm.php

class BpostShmOverride extends BpostShm
{ public function getSelectors(): array

{
// Don’t use ID
return [
‘carrierName’ => ‘.js-delivery-option .carrier-name’,
‘bpostshmCarrier’ => ‘.bpostshm-carrier’,
‘deliveryDate’ => ‘.bpostshm-delivery-date’,
‘deliverySaturdayAlert’ => ‘.bpostshm-saturday-alert’,
‘deliveryOption’ => ‘.js-delivery-option’,
‘alert’ => ‘.alert-danger’,
‘choosePickupBtn’ => ‘.bpostshm-choose-pickup’,
‘changePickupBtn’ => ‘.bpostshm-change-pickup’,
‘pickupCarrier’ => ‘.bpostshm-pickup-carrier’,
‘pickupWidget’ => [
‘parent’ => ‘.bpostshm-widget’,
‘map’ => ‘bpostshm-map’,
‘marker’ => ‘bpostshm-marker’,
‘markerBtn’ => ‘.btn-select-pickup’,
‘result’ => ‘.bpostshm-result’,
‘pickupList’ => ‘.bpostshm-pickup-list’,
‘search’ => [
‘address’ => ‘.bpostshm-search .poi-address’,
‘postcode’ => ‘.bpostshm-search .poi-postcode’,
‘city’ => ‘.bpostshm-search .poi-city’,
‘country’ => ‘.bpostshm-search .poi-country’,
‘deliveryDate’ => ‘.bpostshm-delivery-date select’,
‘btn’ => ‘.bpostshm-search button’,
],
],
‘pickupAddress’ => [
‘parent’ => ‘.bpostshm-pickup-point-address’,
‘address’ => ‘address’,
],
];
}
}
“`

—

## Custom CSS Styling

For minor style adjustments, follow these steps:

• 1. Copy `/modules/bpostshm/views/css/custom.css` to `/themes/{your theme}/modules/bposthm/views/css/custom.css`.
• 2. Add your custom styles to the copied file.

—

## Advanced JS/CSS Overrides When Necessary

If you require advanced overrides, follow these steps:

• 1. Copy the following directories/files:

“`
_dev
.bablerc
.eslintignore
.eslintrc.js
.stylelintrc.json
package.json
webpack.config.js
“`

• 2. Paste them in `/themes/{your theme}/modules/bposthm`.
• 3. Install all dependencies by running the command below. Ensure you have NodeJs 14+ installed:

“`
cd /themes/{your theme}/modules/bposthm
npm install
“`

• 4. Make your modifications while considering future updates.
• 5. Compile your JS/CSS to apply the changes:

“`
cd /themes/{your theme}/modules/bposthm
npm run build
“`

• 6. Don’t forget to flush PrestaShop cache after making changes.

### Bonus Tip

To ensure code quality, run js-lint and scss-lint:
“`
cd /themes/{your theme}/modules/bposthm
npm run scss-lint-fix
npm run js-lint-fix
“`