Skip to content

Comment faire un override du module bpost?

Module bpost pour Prestashop 8

Override

## Ajuster les sélecteurs CSS en fonction de la structure de votre thème

Pour personnaliser les sélecteurs du module bpostshm, vous pouvez faire un override du module et mettre à jour vos sélecteurs selon vos besoins. Voici un exemple en 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.}

 

## Style CSS personnalisé

Pour des ajustements mineurs de style, suivez ces étapes :

  • 1. Copiez /modules/bpostshm/views/css/custom.css vers /themes/{votre thème}/modules/bposthm/views/css/custom.css
  • 2. Ajoutez vos styles personnalisés dans le fichier copié

 

## Overrides JS/CSS avancés

Si vous avez besoin de réaliser des surcharges plus étendues, procédez comme suit :

  • 1. Copiez les répertoires/fichiers suivants :
01.   _dev
02.   .bablerc
03.   .eslintignore
04.   .eslintrc.js
05.   .stylelintrc.json
06.   package.json
07.   webpack.config.js
  • 2. Collez-les dans /themes/{votre thème}/modules/bposthm
  • 3. Installez toutes les dépendances en exécutant la commande ci-dessous. Assurez-vous que NodeJs 14+ est installé :
01.   cd /themes/{votre thème}/modules/bposthm
02.   npm install
  • 4. Effectuez vos modifications en tenant compte des futures mises à jour
  • 5. Compilez votre JS/CSS pour appliquer les changements :
01.   cd /themes/{votre thème}/modules/bposthm
02.   npm run build
  • 6. N’oubliez pas de vider le cache de PrestaShop après les modifications

 

### Conseil supplémentaire

Pour garantir la qualité du code, exécutez js-lint et scss-lint :

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

Compatibilité

  • - Prestashop version 8