Skip to end of banner
Go to start of banner

SOP - DXT Own Brand Page

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 5 Current »

STANDARD OPERATING PROCEDURE

Title

DXT Own Brand Page

Effective Date

July 6th 2021

Department

eBusiness

Business Owner

Farid Mokraoui


Purpose

This document is a guideline for the visual designers on informing and adding a new brand to the own brand page. https://www.ferguson.com/shop/ferguson-brands. 

Order of Operations 

  1. Add new card into the grid 
  2. Add new images and content 
  3. Assign card to JavaScript KOB filters 

Source Code 

File Path: content/page-content/2618310-ferguson-own-brand-landing-page 


Policies and Procedures 

Content you will need to add for a new card

  • Page link redirect
  • Background image/url that is tied to a new CSS class
  • Brand logo/url
  • Established date
  • h2
  • paragraph
  • Linking card to KOB filters at top of page

Adding a new card 

  • First step is to add the new card html inside the grid with the class .brand–grid
  • All cards are in alphabetical order according to brand name
  • Below is the html frame for a card. You can also copy the html in the source code and edit as needed.
Card HTML 
<a class="brand--card" href="">
      <div class="brand--card__company">
        <img src="/sites/content/image/" alt="" />
        <div class="brand--card__est">Est.</div>
      </div>
      <div class="brand--card__content">
        <h2></h2>
        <p></p>
      </div>
      <span class="brand--card__shop">Shop Now</span>
    </a>


Adding background image

  • All card background images are in the top portion of the css to change quickly if needed.
  • If you are adding a new card you will need to create a new css class following the naming convention in the source code.
  • Below is an example of the css naming.

  • The new class should be added to the div that has the class of .brand–card__company
  • Example below is the Amerock background and class being used. 

  • New WCS logo assets have been specifically created for this page
  • Refer to "Background and Logo image - File Formatting" section for formatting specifics.

Background and Logo image - File Formatting

  • Background images have been exported at around 800px wide and are kept around 40kb and under in size.
    • The image itself doesn't need to be a specific size, the css will adjust it accordingly.
  • Brand Logos have been exported at 400px wide and are kept around 4kb in size.
  • Brand logo WCS naming convention - (Brand Page - "insert brand name here" Logo)
  • Brand background naming convention - (Brand Page - "insert brand name here" Background)


Linking the card to a KOB Filter

  • below is an image of the KOB filters

  • below is the code of the buttons

 

  • The text inside of the brackets(ex. 'resplumb') is what determines what KOB will generate.
  • The appropriate name in brackets will need to be applied as a class to the main card which has a class of .brand–card.
  • If you don't want the card to show up in any filter, do not add any classes. If you want the card the appear under every KOB filter you will need to add each class to the main card div.
  • The image below shows a card that will appear when the filters "Builder" or "Facility Supply & Maintenance" are selected. All cards by default will show under the "All Brands" filter.

  • Below is the list of KOB classes for each KOB filter
  • Use the name on the left 
    • resplumb = Residential Plumbing
    • commech = Commercial / Mechanical
    • hvac = HVAC
    • builder = Builder
    • facilsupmain = Facility Supply & Maintenance
    • firefab = Fire & Fabrication
    • waterworks = Waterworks
    • industrial = Industrial



  • No labels