[Blockwishlist] Mismatch class naming between the Share.vue component and the share.tpl file

[ghost]

Describe the bug

The css class in the Share.vue component (line 117) does not match the class provided in the share.tpl file (line 21). If we modify the css in the vue file, all the changes will affect the display of the modal-create instead of the modal-share.

Expected behavior

Replace &-create by &-share into the Share.vue file to match the class in the share.tpl which is "wishlist-share".

Steps to reproduce

1. In the Share.vue file (blockwishlist/_dev/front/js/components/Share/Share.vue), add a background-color : #FFCC00; like this

  .wishlist {
    &-create {
      .wishlist-modal {
        background-color : #FFCC00;
        display: block;
        opacity: 0;
        pointer-events: none;
        z-index: 0;
        &.show {
          opacity: 1;
          pointer-events: all;
          z-index: 1053;
        }
      }
    }
  }

2. compile the module assets npm install then npm run build
3. In the FO, go to the My account's lists page.
4. Click on "Create a new list" : the background is changed by the color set in the Share.vue file. When you click on "Share the list", the background is not changed.

The changes set in the Share.vue file must target only the share modal and not the create modal.

Screenshots:

• Add a new List => NOK, the background shouldn't be changed
  

• Share a list => NOK, the background-color should be yellow
  

Additional context

• Blockwishlist version : 2.0.1
• PrestaShop version : all PS supported by this module ( >= 1.7.6.x)

[hibatallahAouadni]

Hello @a-apare

Could you please provide steps to reproduce the issue and your PS version.
Please check and feedback.

Thanks!

[ghost]

Hello @a-apare

Could you please provide steps to reproduce the issue and your PS version. Please check and feedback.

Thanks!

I have updated the issue, is this OK for you ?

[NeOMakinG]

Describe the bug

The css class into the Share.vue component (line 117) does not match the class provided into the share.tpl file (line 21). If we modify the css in the vue file, all the changes will affect the display of the modal-create instead of the modal-share.

Expected behavior

Replace &-create by &-share into the Share.vue file to match the class into the share.tpl which is "wishlist-share".

Steps to reproduce

1. In the Share.vue file (blockwishlist/_dev/front/js/components/Share/Share.vue), add a "background-color : #FFCC00;" like this
   .wishlist { &-create { .wishlist-modal { background-color : #FFCC00; display: block; opacity: 0; pointer-events: none; z-index: 0; &.show { opacity: 1; pointer-events: all; z-index: 1053; } } } }
2. compile the module assets npm run build
3. In the FO, go to the My account's lists page.
4. Click on "Create a new list" : the background is changed by the color set into the Share.vue file. When you click on "Share the list", the background is not changed.

The changes set into the Share.vue file must target only the share modal and not the create modal.

Additional context

• Blockwishlist version : 2.0.1
• PrestaShop version : all PS supported by this module ( >= 1.7.6.x)

Nice catch! Looks legit to me

[khouloudbelguith]

Hi @a-pare,

I tried to run this command npm run build
But I have this error

What do you think?

Thanks!

[apare-prolaser]

Hi @a-pare,

I tried to run this command npm run build But I have this error

What do you think?

Thanks!

Sorry, I did not mention to execute npm install before building the assets :)

[khouloudbelguith]

@apare-prolaser,

I manage to reproduce the issue with PS1780 & PS1778 using the blockwishlist module v2.0.1
Add a new liste => ok

Share a list => NOK

Thanks for the PR 👍

[florine2623]

Hello all,

I re-open this issue, as it can be reproduced in the Release : PrestaShop/blockwishlist#143

Thanks @khouloudbelguith and @hibatallahAouadni for the tests ^^

[NeOMakinG]

Ok I know, it's only due to the fact that @ghost didn't push assets in his PR

[NeOMakinG]

It will be naturally fixed with others PR, no need to create a new PR for this, close it when you test another PR or the release

[Progi1984]

@florine2623 Could you check again with the latest version of develop branch ?

[Progi1984]

As discussed with @florine2623 & @NeOMakinG, the bug is fixed.