Skip to content

Commit 2de43d0

Browse files
jondjonesjondjones
committed
Ding
1 parent 5383aed commit 2de43d0

27 files changed

+305
-28
lines changed

‎layout/TopHeader.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ export default function TopHeader() {
99
path: "/"
1010
},
1111
{ name: "Latest Deals",
12-
path: "/landing"
12+
path: "/plp"
1313
},
1414
{ name: "News",
15-
path: "/cms"
15+
path: "/news"
1616
},
1717
{ name: "Sign-up",
1818
path: "/signup"

‎pages/cms.js‎ renamed to ‎pages/news.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { fetchContentfulEntries } from '../utils/contentfulConnector';
88
import ContentRecommendations from '../component/ContentRecommendations'
99
import VariationContainerRenderer from '../component/VariationContainerRenderer';
1010

11-
const Home = (props) => {
11+
const News = (props) => {
1212

1313
const { fields, datafile, contentfulDatafile } = props;
1414

@@ -46,6 +46,11 @@ const Home = (props) => {
4646
<div className="container">
4747
<div className="row">
4848
<div id="content" className="col-8 col-12-medium imp-medium">
49+
50+
<div id="header-large">
51+
News and Stories
52+
</div>
53+
4954
{fields.map((item, index) =>
5055
<VariationContainerRenderer
5156
key={index}
@@ -90,4 +95,4 @@ export async function getStaticProps() {
9095

9196
}
9297

93-
export default Home;
98+
export default News;

‎pages/landing.js‎ renamed to ‎pages/plp.js‎

Lines changed: 46 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,19 @@ export default function Landing({...props}) {
2020

2121
const [ componentMessage, setComponentMessage ] = useState();
2222
const [ discountAmount, setDiscountAmount ] = useState();
23+
const [ categoryFilterVersion, setCategoryFilterVersion ] = useState();
24+
const [ sizeFilterVersion, setSizeFilterVersion ] = useState();
2325

2426
const optimizelyClient = createInstance({
2527
datafile: datafile,
2628
});
2729

2830
const router = useRouter()
2931
const { segment = '' } = router.query
30-
console.log('segment', segment)
31-
3232
const userId = getUserId(router);
3333

34+
console.log('Segments', segment)
35+
3436
let optimizelyUserContext;
3537

3638
optimizelyClient.onReady().then(() => {
@@ -46,16 +48,25 @@ export default function Landing({...props}) {
4648
useEffect(() => {
4749
optimizelyClient.onReady().then(() => {
4850

49-
const decision = optimizelyUserContext.decide('personalisation');
50-
console.log('personalisation-flag', decision);
51+
const personalisationDecision = optimizelyUserContext.decide('personalisation');
52+
console.log('personalisationDecision', personalisationDecision);
53+
54+
const componentMessage = personalisationDecision.variables.component_message;
55+
const discountAmount = personalisationDecision.variables.discount_amount;
56+
57+
const filtertestDecision = optimizelyUserContext.decide('plp_-_filter_tests');
58+
console.log('plp_-_filter_tests', filtertestDecision);
5159

52-
const componentMessage = decision.variables.component_message;
53-
const discountAmount = decision.variables.discount_amount;
60+
const categoryFilterVersion = filtertestDecision.variables.category_filter_version;
61+
const sizeFilterVersion = filtertestDecision.variables.size_filter_version;
5462

5563
if (discountAmount && discountAmount >= 0) {
5664
setDiscountAmount(discountAmount);
5765
}
5866

67+
setCategoryFilterVersion(categoryFilterVersion);
68+
setSizeFilterVersion(sizeFilterVersion);
69+
5970
setComponentMessage(componentMessage);
6071
});
6172
}, [optimizelyUserContext, optimizelyClient]);
@@ -72,28 +83,48 @@ export default function Landing({...props}) {
7283
<div id="sidebar" className="col-3 col-12-medium">
7384

7485
<div>
75-
<img src="images/filter-1.png" alt="Filter 1" style={imageStyle} />
86+
<img src={`images/filter-cat-${categoryFilterVersion}.png`} alt="Category Filter" style={imageStyle} />
7687
</div>
7788
<div>
78-
<img src="images/filter-2.png" alt="Filter 2" style={imageStyle} />
89+
<img src={`images/filter-size-${sizeFilterVersion}.png`} alt="Size Filter" style={imageStyle} />
7990
</div>
8091
<div>
81-
<Link href="/landing?segment=vip">
92+
<div id="header-sidebar">
93+
Segments
94+
</div>
95+
<Link href="/plp?segment=vip">
8296
<a>
83-
<img src="images/filter-3-1.png" alt="Filter 3" style={imageStyle} />
97+
<p className="tag">VIP</p>
8498
</a>
8599
</Link>
86-
<Link href="/landing?segment=new">
100+
<Link href="/plp?segment=new">
87101
<a>
88-
<img src="images/filter-3-2.png" alt="Filter 3" style={imageStyle} />
102+
<p className="tag">NEW</p>
89103
</a>
90104
</Link>
91-
<Link href="/landing?segment=premier">
105+
<Link href="/plp?segment=premier">
92106
<a>
93-
<img src="images/filter-3-3.png" alt="Filter 3" style={imageStyle} />
107+
<p className="tag">PREMIER</p>
108+
</a>
109+
</Link>
110+
<div id="header-sidebar">
111+
Users
112+
</div>
113+
<Link href="/plp?id=1">
114+
<a>
115+
<p className="tag">User One</p>
116+
</a>
117+
</Link>
118+
<Link href="/plp?id=2">
119+
<a>
120+
<p className="tag">User Two</p>
121+
</a>
122+
</Link>
123+
<Link href="/plp?id=3">
124+
<a>
125+
<p className="tag">User Three</p>
94126
</a>
95127
</Link>
96-
97128
</div>
98129
</div>
99130
<div id="content" className="col-9 col-12-medium imp-medium">

‎public/assets/css/main.css‎

Lines changed: 66 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2164,8 +2164,8 @@ input, select, textarea {
21642164
#content > article {
21652165
border-top: solid 2px #e5e5e5;
21662166
box-shadow: inset 0px 8px 0px 0px #fff, inset 0px 10px 0px 0px #e5e5e5;
2167-
margin: 5em 0 0 0;
2168-
padding: 5em 0 0 0;
2167+
margin: 3em 0 0 0;
2168+
padding: 3em 0 0 0;
21692169
}
21702170

21712171
#content > section:first-child,
@@ -2182,8 +2182,8 @@ input, select, textarea {
21822182
#sidebar > article {
21832183
border-top: solid 2px #e5e5e5;
21842184
box-shadow: inset 0px 8px 0px 0px #fff, inset 0px 10px 0px 0px #e5e5e5;
2185-
margin: 5em 0 0 0;
2186-
padding: 5em 0 0 0;
2185+
margin: 3em 0 0 0;
2186+
padding: 3em 0 0 0;
21872187
}
21882188

21892189
#sidebar > section:first-child,
@@ -2619,6 +2619,10 @@ input, select, textarea {
26192619
letter-spacing: 2px;
26202620
}
26212621

2622+
#header-large {
2623+
font-size: 5em;
2624+
}
2625+
26222626
/* Banner */
26232627

26242628
#banner {
@@ -2696,4 +2700,61 @@ input, select, textarea {
26962700
border-left: 0;
26972701
}
26982702

2699-
}
2703+
}
2704+
2705+
.tags {
2706+
list-style: none;
2707+
margin: 0;
2708+
overflow: hidden;
2709+
padding: 0;
2710+
}
2711+
2712+
.tags li {
2713+
float: left;
2714+
}
2715+
2716+
.tag {
2717+
background: #eee;
2718+
border-radius: 3px 0 0 3px;
2719+
color: #999;
2720+
display: inline-block;
2721+
height: 26px;
2722+
line-height: 26px;
2723+
padding: 0 20px 0 23px;
2724+
position: relative;
2725+
margin: 0 10px 10px 0;
2726+
text-decoration: none;
2727+
-webkit-transition: color 0.2s;
2728+
}
2729+
2730+
.tag::before {
2731+
background: #fff;
2732+
border-radius: 10px;
2733+
box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
2734+
content: '';
2735+
height: 6px;
2736+
left: 10px;
2737+
position: absolute;
2738+
width: 6px;
2739+
top: 10px;
2740+
}
2741+
2742+
.tag::after {
2743+
background: #fff;
2744+
border-bottom: 13px solid transparent;
2745+
border-left: 10px solid #eee;
2746+
border-top: 13px solid transparent;
2747+
content: '';
2748+
position: absolute;
2749+
right: 0;
2750+
top: 0;
2751+
}
2752+
2753+
.tag:hover {
2754+
background-color: crimson;
2755+
color: white;
2756+
}
2757+
2758+
.tag:hover::after {
2759+
border-left-color: crimson;
2760+
}

‎public/assets/sass/main.scss‎

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,64 @@
1313
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
1414
*/
1515

16+
17+
.tags {
18+
list-style: none;
19+
margin: 0;
20+
overflow: hidden;
21+
padding: 0;
22+
}
23+
24+
.tags li {
25+
float: left;
26+
}
27+
28+
.tag {
29+
background: #eee;
30+
border-radius: 3px 0 0 3px;
31+
color: #999;
32+
display: inline-block;
33+
height: 26px;
34+
line-height: 26px;
35+
padding: 0 20px 0 23px;
36+
position: relative;
37+
margin: 0 10px 10px 0;
38+
text-decoration: none;
39+
width: 100%;
40+
}
41+
42+
.tag::before {
43+
background: #fff;
44+
border-radius: 10px;
45+
box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
46+
content: '';
47+
height: 6px;
48+
left: 10px;
49+
position: absolute;
50+
width: 6px;
51+
top: 10px;
52+
}
53+
54+
.tag::after {
55+
background: #fff;
56+
border-bottom: 13px solid transparent;
57+
border-left: 10px solid #eee;
58+
border-top: 13px solid transparent;
59+
content: '';
60+
position: absolute;
61+
right: 0;
62+
top: 0;
63+
}
64+
65+
.tag:hover {
66+
background-color: crimson;
67+
color: white;
68+
}
69+
70+
.tag:hover::after {
71+
border-left-color: crimson;
72+
}
73+
1674
// Breakpoints.
1775

1876
@include breakpoints((
@@ -1439,4 +1497,4 @@
14391497
}
14401498
}
14411499

1442-
}
1500+
}

‎public/images/ding/1.png‎

44 KB
Loading

‎public/images/ding/2.png‎

66 KB
Loading

‎public/images/ding/3.png‎

92.6 KB
Loading

‎public/images/ding/feature.png‎

45 KB
Loading

‎public/images/ding/footer.png‎

42 KB
Loading

0 commit comments

Comments
 (0)