| STANDARD OPERATING PROCEDURE |
|---|
Title DXT FSE Website Tutorials Page | Effective Date TBD |
Department eBusiness | Business Owner Farid Mokraoui |
Purpose
This document is a guideline for the visual designers on developing the tutorials pages.
example of tutorials page
Order of Operations
- Set up your WCS Asset with correct JavaScript and stylesheet.
- Setup your main frame with tabs that will house the different layouts of content.
- Copy and paste layouts into the frame that will work best with your content.
- Edit the layouts to suite your needs.
- Note: If anything needs to be made custom feel free to add it to the other content layouts.
Assets to reference when building wcs asset
The JavaScript you will need for the tabs portion of the page. The “jquery-to-match-atg” should be placed above “Features Tabs Javascript”
- Features Tabs Javascript - 2600006233120
- jQuery-To-Match-ATG - 1429309277560
The only stylesheet you will need for the page andall ofthe content templates.
- Features – Stylesheet -2600005822018
Where to find all code and templates to start building tutorials page
There will be 3 spots to grab the layout code to fit how you develop. By default all code will be inside onedrive.
As you scroll through the different section visuals in this SOP, above each section you can expand the box and copy the code for that content.
There is also a codepen template setup. https://codepen.io/AEF2662/pen/QWwQoop?editors=1100
Pathing for onedrive - Work > Ferguson.com > Content > page-content > Features Campaign > Template for SOP
Starting a tutorials page
Start with the "frame" code so you can setup the number of tabs you need and to label the page title and tab names. Edit the lists under "tab content" comment to either add or remove the amount of tabs on the page. Make sure "openTab" in the list start with 0 for the first tab. The divs below that will hold the content for each tab reference the tab with "data-view" but will start with number 1 for tab one instead of starting at 0 such as the "openTab" in the list above.
<div class="test-container">
<div class="tut-heading">
<h1 class="mb-20">Headline goes here</h1>
</div>
</div>
<div class="tabs"><button class="button-dropdown" onclick="openTabList()">View Tutorials</button>
<!-- Tab Content -->
<ul class="tabs-nav js-tab-container">
<li class="js-tab tab-active" onclick="openTab('0')">1st Tab</li>
<li class="js-tab" onclick="openTab('1')">2nd Tab</li>
<li class="js-tab" onclick="openTab('2')">3rd Tab</li>
<li class="js-tab" onclick="openTab('3')">4th Tab</li>
</ul>
<div class="tabs-stage js-stage">
<!-- Any content placed inside the tab div below will appear on that specific tab -->
<!-- Add or delete the number of tabs to your content -->
<!--tab 1-->
<div class="stage stage-active" data-view="1">
<section class="layout-container">
<h2>Page Title</h2>
<p>Page Description</p>
</section>
</div>
<!--tab 2-->
<div class="stage" data-view="2">
<section class="layout-container">
<h2>Page Title</h2>
<p>Page Description</p>
</section>
</div>
<!--tab 3-->
<div class="stage" data-view="3">
<section class="layout-container">
<h2>Page Title</h2>
<p>Page Description</p>
</section>
</div>
<!--tab 4-->
<div class="stage" data-view="4">
<section class="layout-container">
<h2>Page Title</h2>
<p>Page Description</p>
</section>
</div>
</div>
</div>
Adding the layouts to the frame
Disclaimer: Each layout is a section you can just copy from any of the 3 code sources. If you want to use this SOP as a visual guide you can grab the code directly from here above the section image that you want to use. If not, you can grab the code in onedrive(pathing above) or use the codepen template(reference above).
In the frame within the <div class=" stage stage-active" data-view="?"> you can throw multiple layouts inside of that div into the specific tab you need it.
Each tab div has an h2 as a page title and a paragraph description below. Below the h2 and paragraph is where you can start throwing in your layout code.
Each layout is wrapped in a "layout-container" class which has a margin bottom to seperate each section from eachother with adequate spacing.
You can swap out paragraphs for ordered or unordered lists for the content you need.
Most layouts will have a title and descript which can be removed if they fall below other content that already has a title and description.
If you need to create a new layout make sure to add it to the templates and in the SOP.
Content Layouts
Below are all the different content layouts you will need for each of your tabs. There are full width, two column, and three column layouts each with a video version.
Layout 1 " Full Width"
v1
<h2>Sample Section Headline</h2>
<section class="layout-container">
<section class="full-img-container">
<img class="img" src="http://www.staging.ferguson.com/sites/content/image/2600008087129" alt="test">
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
v1 video
<h2>Sample Section Headline</h2>
<section class="layout-container">
<style type="text/css">
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="embed-container" style="margin-top:20px;"><iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/s-zV93KRmtw"></iframe></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
Layout 2 " Image and Paragraph"
v1
<h2>Sample Section Headline</h2>
<section class="layout-container">
<section class="flex-container">
<section class="side-img-container"><img class="img" src="http://www.staging.ferguson.com/sites/content/image/2600008087356" alt="test"></section>
<section class="side-p">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
</section>
</section>
v1 video
<h2>Sample Section Headline</h2>
<section class="layout-container">
<section class="flex-container">
<section class="side-img-container">
<style type="text/css">
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="embed-container"><iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/d-LIDLrAJG8"></iframe></div>
</section>
<section class="side-p">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
</section>
</section>
Layout 3 " Two Column Image"
v1
<h2>Sample Section Headline</h2>
<section class="layout-container">
<section class="flex-container">
<section class="content-column-double left">
<section class="half-img-container"><img alt="test" class="img" src="http://www.staging.ferguson.com/sites/content/image/2600008088531"></section>
</section>
<section class="content-column-double right">
<section class="half-img-container"><img alt="test" class="img" src="http://www.staging.ferguson.com/sites/content/image/2600008088643"></section>
</section>
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
v1 video
<h2>Create a New Quote Using My Lists</h2>
<section class="layout-container">
<section class="flex-container">
<section class="content-column-double left">
<div style="padding:61.02% 0 0 0;position:relative;"><iframe allow="autoplay; fullscreen" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/s-zV93KRmtw" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div>
</section>
<section class="content-column-double right">
<div style="padding:61.02% 0 0 0;position:relative;"><iframe allow="autoplay; fullscreen" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/s-zV93KRmtw" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div>
</section>
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
v2
<section class="layout-container">
<section class="flex-container">
<section class="content-column-double left">
<h2>Sample Section Headline</h2>
<section class="half-img-container"><img alt="test" class="img" src="http://www.staging.ferguson.com/sites/content/image/2600008088531"></section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
<section class="content-column-double right">
<h2>Sample Section Headline</h2>
<section class="half-img-container"><img alt="test" class="img" src="http://www.staging.ferguson.com/sites/content/image/2600008088643"></section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
</section>
</section>
v2 video
<section class="layout-container">
<section class="flex-container">
<section class="content-column-double left">
<h2>Create a New Quote Using My Lists</h2>
<div style="padding:61.02% 0 0 0;position:relative;"><iframe allow="autoplay; fullscreen" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/s-zV93KRmtw" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
<section class="content-column-double right">
<h2>Create a New Quote by Copying & Pasting products using a spreadsheet</h2>
<div style="padding:61.02% 0 0 0;position:relative;"><iframe allow="autoplay; fullscreen" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/s-zV93KRmtw" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
</section>
</section>
Layout 4 " Three Image Column"
v1
<section class="layout-container">
<section class="flex-container">
<section class="content-column-triple left">
<h2>Account Dropdown</h2>
<section class="triple-img-container">
<img alt="test" class="img" src="http://www.staging.ferguson.com/sites/content/image/2600008088531">
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
<section class="content-column-triple middle">
<h2>Left Dashboard Navigation</h2>
<section class="triple-img-container">
<img alt="test" class="img" src="http://www.staging.ferguson.com/sites/content/image/2600008088531">
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
<section class="content-column-triple right">
<h2>Quick Tools</h2>
<section class="triple-img-container">
<img alt="test" class="img" src="http://www.staging.ferguson.com/sites/content/image/2600008088531">
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
</section>
</section>
v1 video
<section class="layout-container">
<section class="flex-container">
<section class="content-column-triple left">
<h2>Account Dropdown</h2>
<section class="triple-img-container">
<div style="padding:61.02% 0 0 0;position:relative;"><iframe allow="autoplay; fullscreen" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/s-zV93KRmtw" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div>
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
<section class="content-column-triple middle">
<h2>Left Dashboard Navigation</h2>
<section class="triple-img-container">
<div style="padding:61.02% 0 0 0;position:relative;"><iframe allow="autoplay; fullscreen" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/s-zV93KRmtw" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div>
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
<section class="content-column-triple right">
<h2>Quick Tools</h2>
<section class="triple-img-container">
<div style="padding:61.02% 0 0 0;position:relative;"><iframe allow="autoplay; fullscreen" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/s-zV93KRmtw" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div>
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
</section>
</section>
Updating the Web Tutorials Main Page
Make sure to update the main page that links to all of the tutorial pages.
example. https://www.ferguson.com/resources/tutorials
Each block points towards a tutorials page. If you are updating a page, all you need to do is update the links in the wcs asset to point towards the new page you just created.
If you are developing a new section make sure to add another block on the main tutorials page as well as a new image.
Asset Number - 2600004605421
