Slacker Code

Jim-Code Edition

Marketing Promo Page Guide
This page uses Slacker Code. Click here to view the RWS Slacker Code Reference sheet.

Setup
Open the commons server
Open the webfronts file editor. Web Fronts Editor Logo On the bottom-left of the editor, click on the link labeled "Edit Kernel Land Accounts." Web Fronts Server List Link Locate the server named "Commons" and click on it.   - Help? - Server list - Commons directory found
Add template files to your project
Navigate to /promotions/assets/templatesWeb Fronts Server Template Folder Choose the newest template. It should be named "blank_[version_number]". Open the template chosen.Web Fronts Server Newest Template Folder Copy all files and folders except the files called "template.html"Web Fronts Server Copy Files Paste the copied files into the new project directory.
Development
Update basic settings
Open savings.htmlWeb Fronts Find savings.html Update the following defines...
mingle_id
promo_url
promo_title
promo_description
promo_date
Web Fronts Update basic settings
Update basic style
Open css/style.cssWeb Fronts open styles.css Update the following define with the promotion brand name
promo_brand_tag_1(eg: kitchenaid)
Web Fronts Update brand name
If the brand is an existing brand, the page will pre-style itself.
Hero Image and Social Image
The hero image, social image, and mobile hero image can all be pasted into the images folder.
<!-- Hero image -->
  <section class="hero-section row" id="hero-id">
    <%usedef name="promo_hero_image" %>
    
    <div class="offer-text">
      <strong>
        Offer valid:
      </strong>
      <%usedef name="promo_date" %>

    </div>

  </section>
<!-- End Hero image -->
Though a mobile hero is not usually required, if one IS requested, the hero image define will auto check for the mobile file and display it in mobile sizes, if it is available. There is a naming convention for these files that MUST be followed to properly function with slacker code.
landing_hero[.jpg or .png]
landing_hero_mobile[.jpg or .png]
social_hero.jpg
Sections with non-specific products(product loops)
Use the following code for each section of product loops.
<!-- Section 1 -->
  <%search3 query_string="minor=dish" %>
  <section class="section-1 row <%define name="no_results_hide_class"%>">
    <header>
      <span>
        Template header text

      </span>
      <span>

      </span>
      <span>
        <%usedef name="shop_all_button" %>

      </span>

    </header>
    <div>
      <%usedef name="product_loop_1" %>

    </div>
  </section>
<!-- end Section 1 -->
Update the query_string used in each search3. Update the section number to help with styling and developer comments. This exists in the comments and in the form of a class on the section elements. The class name is a requirement to get the default styling. --Tip-- Put all queries into defines at the top of the page. If a change needs to be made to a query, it will be easier to find, and you will only have to edit it in one spot, if the query was needed in more than one spot on the page.
Sections with specific products(automated promotions)
Use the following code for single automated promotions product.
<!-- Section 2 -->
  <%search3 query_string="key=ge:GFD45ESSMWW|ge:GFD45GSSMWW|ge:GFW450SPMDG" %>" %>
  <section class="section-2 row boxed-container <%usedef name="no_results_hide_class"%>">
    <header>
      <span>
        Template header text

      </span>
      <span>

      </span>
      <span>
        <%usedef name="shop_all_button" %>

      </span>

    </header>
    <div>
      <%automated_promotions_select_item item_key="ge:GFD45ESSMWW"%>
      <%block%>
        <%usedef name="single_product_1"%>

      <%%>
      <%automated_promotions_select_item item_key="ge:GFD45GSSMWW"%>
      <%block%>
        <%usedef name="single_product_1"%>

      <%%>
      <%automated_promotions_select_item item_key="ge:GFW450SPMDG%>
      <%block%>
        <%usedef name="single_product_1"%>

      <%%>

    </div>

  </section>
<!-- end Section 2 -->
Update the query_string used in each search3. Update the section number to help with styling and developer comments. This exists in the comments and in the form of a class on the section elements. The class name is a requirement to get the default styling.
Disclaimer
Use the following code for the disclaimer code.
<!-- Disclaimer Section -->
  <section class="dislcaimer-section row boxed-container">
    <p>
      Disclaimer

    </p>

  </section>
<!-- end Disclaimer Section -->
Email Development
Update settings/content
Open [promotion_path]/email/email.xml Update the following defines...
promo_url
promo_date
email_title
email_description
email_disclaimer
Make sure all text, except the url, has been put through the character stripper. Click here for the character stripper.
Graphic Design
Create web assets
landing_hero[.jpg or .png]
1440x600
social_hero.jpg
1200x630
These images can be pasted into the [promotion_path]/images folder.
Create mingle assets
promo_1440x900.jpg
1440x900
promo_800x800.jpg
800x800
thumbnail.jpg
120x120
These images can be uploaded to the mingle site.
Create email assets
emailbanner001.jpg
600x350
emailbanner002.jpg
600x350
These images can be pasted into the [promotion_path]/email/images folder.
Create organic assets
1200x148.jpg
1200x148
728x90.jpg
728x90
450x200.jpg
450x200
Complete Web Page Styling
Go to [promotion_path]/css/styles.css
All changes to the css must be made in this file.
Avoid using the "!important" rule on a css attribute.
If you are having trouble styling, you may have to be more specific with your selectors. -Help?-
Do yo thang! You're a designer! Make this thang look goooood! ;)

Help & Tips

What if I can't find the commons server?
1. You might not have access to the commons server. Contact the Promotions Coordinator soon to either have your privlages boosted or the assignment reassigned.
Why arent my styles working?
1. The most common problem causing css issues is a bad path is define. Follow these steps to fix it. The css reference uses the define.
- Open savings.html
- Find the define named "promo_url" and make sure the value is correct.
- Save and reload!
2. Your selectors might not be as specific as they should be. Slacker code is heavily built on format based styles and cascading importance.
   The code ".promotion .this-div { color: red; }" would not outrank ".promotion div div { color: black; }" and would not work.
but...
   The code ".promotion section div div.this-div { color: red; }" would outrank ".promotion div div { color: black; }" and would work. This is because the number of words(or selectors) in the rule. This is usually referred to as specificity. The higher the specificity, the harder it is to restyle.
What if I want the content in a different order?
These components use flexbox. The css property "order" can be used to change what order the content is in.