Adding a search box popup / modal to the Brooklyn Theme

Adding a search popup.md

Issue

Brooklyn doesn't have a search box by default and adding one to the header somewhat disrupts the aesthetic of the theme. Instead of adding just an icon linking to the search page, why not adding a modal using the already built in popup plugin?

Did you see that fade in?! It's actually very smooth IRL.

Steps:

Step 1. It's built into the theme now! Just uncomment the search icon around line 286.

Step 2. On the next line, assign search_modal to true.

Step 3. Receive hella praise from your super happy merchant.

Notes: I've updated the styling for consitency

Feel free to checkout the rest of the gist if you're curious.

Steps:

theme.liquid

• Add the code below before the </body> tag. This will be hidden by default given the mfp-hide class.

<div id="search_popup" class="mfp-hide">
  {% include 'search-bar' %}
</div>

• Uncomment the search icon around line 280.

• Add mfp target'data-mfp-src="#search_popup" and a class called js-search to the link tag.

• Remove conditional statement for loading in magnific-popup.min.js since it now needs to be loaded on every page.

theme.scss.liquid

See file below.

theme.js

• Finally, add a function to theme.js

// add this to the theme.init function
theme.searchModal();

// add this function right above the productImageZoom function around line 238
theme.searchModal = function() {
  $('.js-search').magnificPopup({
    type: 'inline',
    closeOnContentClick: false,
    closeOnBgClick: true,
    closeBtnInside: false,
    mainClass: 'mfp-fade',
    midClick: true
  }); 
}

theme.scss.liquid

/*================ Search Modal ================*/

$borderRadius: 4px;

.site-nav__link.search-link {
  font-size: 1.35em;
}

#search_popup .search-bar {
  max-width: 400px;
  margin: 0 auto;
  border-radius: 4px;
  box-shadow: 0 0 20px lighten($colorBorder, 65%);

  .input-group-field {
    border-radius: $borderRadius 0 0 $borderRadius !important;
  }

  .btn, .btn--secondary {
    border-radius: 0 $borderRadius $borderRadius 0 !important;
  }
}

.mfp-container:before {
  height: 55%;
}

/* overlay at start */
.mfp-fade.mfp-bg {
  opacity: 0;

  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.9;
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;

  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity:0.9;
}
/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}