gistfile1.md

Red Kap Out of Scope Updates

Static File Updates

• Updated JS on Google Drive
• Updated CSS on Google Drive
• Updated templates.htm on Google Drive

PDP Innovation Switch

• New image on Google Drive: /images/product/innovation-switch.png
• New image on Google Drive: /images/product/innovation-arrow.png
• Update markup from:

<div class="innovation-tab">
 <a class="button" href="#">
  <span class="show">Crew Shirt Innovations</span>
  <span class="hide">Return to Product</span>
 </a>
</div>

• And change it to:

<div class="innovation-switch closed">
 <span class="closed">Check out our Innovative Features</span>
 <span class="open">Return to Product Detail</span>
 <a class="button" href="#"><!-- switch toggle --></a>
</div>

Resized Innovation Dropdown

• Updated image on Google Drive: /images/product/innovation-hotspot.png
  • Image does not exist
• Updated image on Google Drive: /images/product/innovation/motorsports-shirt/motorsports-shirt.png
• Updated image on Google Drive: /images/product/innovation/crew-shirt/crew-shirt.png
• Updated image on Google Drive: /images/product/innovation/sp14/sp14.png
• Updated hotspot HTML on the Google Drive for the Crew Shirt, SP14, and Motorsports Shirt.

Product Info

• The link back to the product gallery is wrapped in a paragraph tag. Remove the paragraph tag and give the anchor a class of "back-to-products" - this goes for PDP and CPDP
• Update markup from:

<p><a href="/custom-shop">Take Me to the Custom Shop</a></p>
<p><a href="/products">Take Me to the Product Catalog</a></p>

• And change it to:

<a class="back-to-products" href="/custom-shop">Take Me to the Custom Shop</a>
<a class="back-to-products" href="/products">Take Me to the Product Catalog</a>

Blog Sidebar (Home and Single)

• Change the body tag class from 'page-home' to 'page-blog'
• Updated image on Google Drive: /images/site/blog/notes-from-the-garage.png
• New image on Google Drive: /images/site/blog/blog-search-box.png
  • Image does not exist
• Update search form markup from:

<form class="search">
    <h2>Search the Blog</h2>
    <input type="text" class="text">
</form>

• And change it to:

<h2>Search the Blog</h2>
<form class="search-blog" action="/blog/search" method="get">
   <input type="text" class="text" name="value" placeholder="Search the blog">
   <a href="#" class="submit">Go</a>
</form>

Blog Comments

• Download redactor plugin folder from the Google drive and insert it here: /js/plugins/redactor/...
  • Do we need all the language support files? Update: Just English.
• Add the following script tag to the bottom of the page, right before script.js. It would be ideal if this was only on single blog pages (it's pretty heavy) but if it's on every page that works too.
  • Placed immediately after <section id="blog" class="container-890">...</section> on just single post pages
  • Update: jQuery has to be loaded first, so it'll have to be on every page.

<script src="/js/plugins/redactor/redactor.js"></script>

• Currently, aside.blog-sidebar comes after section.entry. Flip them.
• Move div.replies outside of section.entry. Add it after, so it is a child of article.post. Make it a section tag.
• Replace section.replies to this format:

<section class="replies">
  <h2 class="comment-count">
    <span class="total">{{count}}</span> Comments:
  </h2>
  <ul class="comment-list">
    <li class="comment">
      <div class="comment-author">{{author}} said:</div>
      <div class="date">{{date}}</div>
      <section class="comment-body">
        {{messagebody}}
      </section>
    </li>
  </ul>

  <form class="respond">
    <h2>Leave a Reply</h2>
        <label>
          Your Comment*:
          <textarea name="message" class="respond-message" placeholder="Enter your comment here..."></textarea>
        </label>
        <label>
          Your Name*:
          <input type="text" name="name" class="respond-name" placeholder="Your Name">
        </label>
        <label>
          Your E-mail Address*:
          <input type="email" name="email" class="respond-email" placeholder="Your E-mail Address">
        </label>
        <a href="#" class="submit">Post Comment</a>
  </form>

  <h2 class="new-comment-status" data-status="thank-you">
        <span class="thank-you">Thank you for your reply!</span>
        <span class="error">
          There was an error posting your comment.<br>
          Please refresh the page and try again, or <a href="/forms/contact-us" class="modal ajax">contact us</a>.
        </span>
  </h2>
</section>

• On staging, there is an add-a-reply div. Remove it and use the above format.
• Also added post id as a data-attribute as discussed yesterday: <article class="post" data-post-id="36">

Gallery

• Remove the "no-lightbox" class from every .item except #gallery-item-003
  • #gallery-item-003 did not already have .no-lightbox, should it?
• I may have an additional Gallery update for you tomorrow

Distributor Locator

• Updated image on Google Drive: /images/site/distributor/map.png
• New image on Google Drive: /images/site/distributor/find-a-distributor-button.png
• New image on Google Drive: /images/site/distributor/location-input-bg.png
• Replace the markup before .distributor-results with the following:

<form id="distributors-search">
  <h1>Find Red Kap</h1>
  <p>Follow the steps below to find local and national automotive workwear distributors.</p>

  <div class="distributors-search-type" title="Please enter a search type">
    <label>1. Choose an Option:</label>
    <ul class="distributor-tabs">
      <li class="tab-home"><a href="#">Home</a></li>
      <li class="tab-laundry"><a href="#">Rental Laundries</a></li>
      <li class="tab-distributor"><a href="#">Workwear Distributors</a></li>
      <li class="tab-online"><a class="modal ajax current" data-template="buy-online" href="/api/distributor/buy-online">Buy Online</a></li>
    </ul>
  </div>

  <div class="distributors-search-location" title="Please enter a ZIP code or a specific address, city and state - ex. 301 Main St., Anytown, TN">
    <label>2. Enter Your Location:</label>
    <input type="text" name="location" class="location" placeholder="Enter city, state or ZIP code" maxlength="25">
  </div>

  <div class="distributors-search-radius">
    <label>3. Choose a Radius:</label>
    <div class="bg_select">
      <span class="selected-text">within 50 miles</span>
      <select name="radius">
        <option value="10">within 10 miles</option>
        <option value="25">within 25 miles</option>
        <option value="50" selected="selected">within 50 miles</option>
        <option value="100">within 100 miles</option>
        <option value="200">within 200 miles</option>
      </select>
    </div>
  </div>

  <a href="#" class="submit">Find a Distributor</a>
</form>