markdown 将搜索框弹出/模态添加到布鲁克林主题

Posted 2021-05-06

/*================ 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;
}

### 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?

![image](http://g.recordit.co/n9Kl0HMT8Q.gif)

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.

![image](http://snapify.shopify.com/Brooklyn_Theme__Edit__Brooklyn__Search_Modal__Shopify_2015-05-16_13-50-59.jpg)

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

![image](http://snapify.shopify.com/Brooklyn_Theme__Edit__Brooklyn__Search_Modal__Shopify_2015-05-16_14-04-19.jpg)

- Remove conditional statement for loading in magnific-popup.min.js since it now needs to be loaded on every page.
![image](http://snapify.shopify.com/Brooklyn_Theme__Edit__Brooklyn__Search_Modal__Shopify_2015-05-16_14-11-14.jpg)

#### 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
  }); 
}
```
![image](http://snapify.shopify.com/Brooklyn_Theme__Edit__Brooklyn__Search_Modal__Shopify_2015-05-16_14-08-23.jpg)