Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MWPW-151513: Search results vanished when user clicks on Marquee CTA:Start free trail #2406

Merged
merged 6 commits into from
Jul 11, 2024
Merged

MWPW-151513: Search results vanished when user clicks on Marquee CTA:Start free trail #2406

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
636b39b
added restoring the search hash in modal
mirafedas Jun 14, 2024
06975d6
fixed unit test
mirafedas Jun 14, 2024
e533eed
Merge branch 'stage' into MWPW-151513-search-results
mirafedas Jun 24, 2024
5bb7a45
updated merch-card-collection
mirafedas Jun 24, 2024
a1f928b
Merge branch 'stage' into MWPW-151513-search-results
mirafedas Jun 28, 2024
38ebedf
Merge branch 'stage' into MWPW-151513-search-results
mirafedas Jul 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion libs/blocks/merch-card-collection/merch-card-collection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const fail = (el, err = '') => {
return el;
};

/** Parse andd prepare cards */
/** Parse and prepare cards */
async function getCardsRoot(config, html) {
const cards = `<div>${html}</div>`;
const fragment = document.createRange().createContextualFragment(
Expand Down
8 changes: 8 additions & 0 deletions libs/blocks/modal/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ const CLOSE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="2
</svg>`;

let isDelayedModal = false;
let prevHash = '';

export function findDetails(hash, el) {
const id = hash.replace('#', '');
Expand Down Expand Up @@ -65,6 +66,10 @@ export function closeModal(modal) {
const hashId = window.location.hash.replace('#', '');
if (hashId === modal.id) window.history.pushState('', document.title, `${window.location.pathname}${window.location.search}`);
isDelayedModal = false;
if (prevHash) {
Copy link
Member

@Axelcureno Axelcureno Jul 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How does this work? If prevHash is defined as empty string in L15, wouldn't this if always pass as true?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We set the prevHash value on line 263 in the event listener which gets executed on the hash change. So when the closeModal function gets called, the prevHash may have a value

window.location.hash = prevHash;
prevHash = '';
}
}

function isElementInView(element) {
Expand Down Expand Up @@ -254,5 +259,8 @@ window.addEventListener('hashchange', (e) => {
} else {
const details = findDetails(window.location.hash, null);
if (details) getModal(details);
if (e.oldURL?.includes('#')) {
prevHash = new URL(e.oldURL).hash;
}
}
});
10 changes: 5 additions & 5 deletions libs/deps/merch-card-collection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// branch: develop commit: f499abc85176fc7d34f43457efeeb72adb1e6103 Thu, 30 May 2024 14:05:27 GMT
import{html as a,LitElement as N}from"/libs/deps/lit-all.min.js";var m=class{constructor(e,t){this.key=Symbol("match-media-key"),this.matches=!1,this.host=e,this.host.addController(this),this.media=window.matchMedia(t),this.matches=this.media.matches,this.onChange=this.onChange.bind(this),e.addController(this)}hostConnected(){var e;(e=this.media)==null||e.addEventListener("change",this.onChange)}hostDisconnected(){var e;(e=this.media)==null||e.removeEventListener("change",this.onChange)}onChange(e){this.matches!==e.matches&&(this.matches=e.matches,this.host.requestUpdate(this.key,!this.matches))}};var E="hashchange";function S(r=window.location.hash){let e=[],t=r.replace(/^#/,"").split("&");for(let o of t){let[i,l=""]=o.split("=");i&&e.push([i,decodeURIComponent(l.replace(/\+/g," "))])}return Object.fromEntries(e)}function p(r){let e=new URLSearchParams(window.location.hash.slice(1));Object.entries(r).forEach(([i,l])=>{l?e.set(i,l):e.delete(i)}),e.sort();let t=e.toString(),o=window.scrollY||document.documentElement.scrollTop;window.location.hash=t,window.scrollTo(0,o)}function x(r){let e=()=>{let t=S(window.location.hash);r(t)};return e(),window.addEventListener(E,e),()=>{window.removeEventListener(E,e)}}var g=(r,e={})=>{r.querySelectorAll("span[data-placeholder]").forEach(t=>{let{placeholder:o}=t.dataset;t.innerText=e[o]??""})};var T="(max-width: 1199px)",y="(min-width: 768px)",C="(min-width: 1200px)";import{css as _,unsafeCSS as b}from"/libs/deps/lit-all.min.js";var w=_`
// branch: main commit: dd5f72e1449ed667f48ef5be086043ddf9cc113d Mon, 24 Jun 2024 12:52:40 GMT

Check warning on line 1 in libs/deps/merch-card-collection.js

View workflow job for this annotation

GitHub Actions / Running eslint 

[eslint] reported by reviewdog 🐶
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

Raw Output:
{"fatal":false,"severity":1,"message":"File ignored because of a matching ignore pattern. Use \"--no-ignore\" to override."}
import{html as a,LitElement as N}from"/libs/deps/lit-all.min.js";var m=class{constructor(e,t){this.key=Symbol("match-media-key"),this.matches=!1,this.host=e,this.host.addController(this),this.media=window.matchMedia(t),this.matches=this.media.matches,this.onChange=this.onChange.bind(this),e.addController(this)}hostConnected(){var e;(e=this.media)==null||e.addEventListener("change",this.onChange)}hostDisconnected(){var e;(e=this.media)==null||e.removeEventListener("change",this.onChange)}onChange(e){this.matches!==e.matches&&(this.matches=e.matches,this.host.requestUpdate(this.key,!this.matches))}};var E="hashchange";function S(r=window.location.hash){let e=[],t=r.replace(/^#/,"").split("&");for(let o of t){let[i,l=""]=o.split("=");i&&e.push([i,decodeURIComponent(l.replace(/\+/g," "))])}return Object.fromEntries(e)}function p(r){let e=new URLSearchParams(window.location.hash.slice(1));Object.entries(r).forEach(([i,l])=>{l?e.set(i,l):e.delete(i)}),e.sort();let t=e.toString(),o=window.scrollY||document.documentElement.scrollTop;window.location.hash=t,window.scrollTo(0,o)}function x(r){let e=()=>{if(!window.location.hash.includes("="))return;let t=S(window.location.hash);r(t)};return e(),window.addEventListener(E,e),()=>{window.removeEventListener(E,e)}}var g=(r,e={})=>{r.querySelectorAll("span[data-placeholder]").forEach(t=>{let{placeholder:o}=t.dataset;t.innerText=e[o]??""})};var T="(max-width: 1199px)",y="(min-width: 768px)",C="(min-width: 1200px)";import{css as _,unsafeCSS as w}from"/libs/deps/lit-all.min.js";var b=_`
#header,
#resultText,
#footer {
Expand Down Expand Up @@ -62,7 +62,7 @@
}

/* tablets */
@media screen and ${b(y)} {
@media screen and ${w(y)} {
#header {
grid-template-columns: 1fr fit-content(100%) fit-content(100%);
}
Expand All @@ -81,7 +81,7 @@
}

/* Laptop */
@media screen and ${b(C)} {
@media screen and ${w(C)} {
#resultText {
grid-column: span 2;
order: -3;
Expand Down Expand Up @@ -144,4 +144,4 @@
>${o}</sp-menu-item
>
</sp-action-menu>
`}sortChanged(e){e.target.value===n.authored?p({sort:void 0}):p({sort:e.target.value})}async showMore(){let e=this.page+1;p({page:e}),this.page=e,await this.updateComplete}startDeeplink(){this.stopDeeplink=x(({category:e,filter:t,types:o,sort:i,search:l,single_app:c,page:d})=>{t=t||e,!this.filtered&&t&&t!==this.filter&&setTimeout(()=>{p({page:void 0}),this.page=1},1),this.filtered||(this.filter=t??this.filter),this.types=o??"",this.search=l??"",this.singleApp=c,this.sort=i,this.page=Number(d)||1})}openFilters(e){this.sidenav?.showModal(e)}static styles=[w]};f.SortOrder=n;customElements.define(A,f);export{f as MerchCardCollection};
`}sortChanged(e){e.target.value===n.authored?p({sort:void 0}):p({sort:e.target.value})}async showMore(){let e=this.page+1;p({page:e}),this.page=e,await this.updateComplete}startDeeplink(){this.stopDeeplink=x(({category:e,filter:t,types:o,sort:i,search:l,single_app:c,page:d})=>{t=t||e,!this.filtered&&t&&t!==this.filter&&setTimeout(()=>{p({page:void 0}),this.page=1},1),this.filtered||(this.filter=t??this.filter),this.types=o??"",this.search=l??"",this.singleApp=c,this.sort=i,this.page=Number(d)||1})}openFilters(e){this.sidenav?.showModal(e)}static styles=[b]};f.SortOrder=n;customElements.define(A,f);export{f as MerchCardCollection};
2 changes: 1 addition & 1 deletion test/blocks/merch-card-collection/mocks/merch-card-collection.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@
</div>

<!--this the expected merch-cards element -->
<merch-card-collection filter="all" class="merch-card-collection catalog" limit="18" types="" search="" page="1"><p slot="searchText">Search all products</p><p slot="filtersText">Filters</p><p slot="sortText">Sort</p><p slot="popularityText">Popularity</p><p slot="alphabeticallyText">Alphabetical</p><p slot="noResultText">0 results</p><p slot="resultText">1 result in <strong><span data-placeholder="filter"></span></strong></p><p slot="resultsText"><span data-placeholder="resultCount"></span> results in <strong><span data-placeholder="filter"></span></strong></p><p slot="searchResultText">1 result for <strong><span data-placeholder="searchTerm"></span></strong></p><p slot="searchResultsText"><span data-placeholder="resultCount"></span> results for <strong><span data-placeholder="searchTerm"></span></strong></p><p slot="searchResultMobileText">1 result for: <strong><span data-placeholder="searchTerm"></span></strong></p><p slot="searchResultsMobileText"><span data-placeholder="resultCount"></span> results for: <strong><span data-placeholder="searchTerm"></span></strong></p><p slot="noSearchResultsText">Your search for <strong><span data-placeholder="searchTerm"></span></strong> did not yield any results</p><div slot="noSearchResultsMobileText"><p>Your search for <strong><span data-placeholder="searchTerm"></span></strong> did not yield any results. Try a different search term.</p><p>Suggestions:</p><ul>
<merch-card-collection filter="all" class="merch-card-collection catalog" limit="18"><p slot="searchText">Search all products</p><p slot="filtersText">Filters</p><p slot="sortText">Sort</p><p slot="popularityText">Popularity</p><p slot="alphabeticallyText">Alphabetical</p><p slot="noResultText">0 results</p><p slot="resultText">1 result in <strong><span data-placeholder="filter"></span></strong></p><p slot="resultsText"><span data-placeholder="resultCount"></span> results in <strong><span data-placeholder="filter"></span></strong></p><p slot="searchResultText">1 result for <strong><span data-placeholder="searchTerm"></span></strong></p><p slot="searchResultsText"><span data-placeholder="resultCount"></span> results for <strong><span data-placeholder="searchTerm"></span></strong></p><p slot="searchResultMobileText">1 result for: <strong><span data-placeholder="searchTerm"></span></strong></p><p slot="searchResultsMobileText"><span data-placeholder="resultCount"></span> results for: <strong><span data-placeholder="searchTerm"></span></strong></p><p slot="noSearchResultsText">Your search for <strong><span data-placeholder="searchTerm"></span></strong> did not yield any results</p><div slot="noSearchResultsMobileText"><p>Your search for <strong><span data-placeholder="searchTerm"></span></strong> did not yield any results. Try a different search term.</p><p>Suggestions:</p><ul>
<li>Make sure all words are spelled correctly</li>
<li>Use quotes to search for an entire phrase, such as "crop an image"</li>
</ul></div><p slot="showMoreText">Show more</p></merch-card-collection>
Expand Down
14 changes: 14 additions & 0 deletions test/blocks/modals/modals.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,6 +229,20 @@ describe('Modals', () => {
window.sessionStorage.removeItem('shown:#dm');
el.remove();
});

it('restores the hash when the modal gets closed', async () => {
window.location.hash = '#category=pdf-esignatures&search=acro&types=desktop%2Cmobile';
window.location.hash = '#milo';
await waitForElement('#milo');
init(document.getElementById('milo-modal-link'));
const modal = document.getElementById('milo');
expect(modal).to.exist;
expect(window.location.hash).to.equal('#milo');
const close = document.querySelector('.dialog-close');
close.click();
expect(window.location.hash).to.equal('#category=pdf-esignatures&search=acro&types=desktop%2Cmobile');
window.location.hash = '';
});
});

describe('sendAnalytics', () => {
Expand Down
Loading