LULU-6 [Mobile][Navigation Links

0.LULU6_README.md

Lulu & Georgia Devs,

This package contains all of the information that we used to create this experiment in Optimize.

We are happy to answer whatever questions you might have regarding any of this.

We've included the original specification that was generated by the product manager and handed off to an engineer. This demonstrates the general format, details, and workflow that we use to generate new experiments.

You will also find the code that we've written to accomplish the task. Notice: We typically use a build system that compiles our ECMAScript 2015 code into ES5 compatible code in order to support older browsers, we also use the SASS css compiler, and PostCSS autoprefixer.

Our compilation also generates this SHARED variable which we use to pass values between shared code and variation code. This primarily helps reduce redundancy, minimizing snippet size. The SCSS file recieves a $TAG string variable which relates to the experiment name (in this case lulu6). The same value is provided to JS as SHARED.tag.

We are happy to answer whatever questions you might have regarding any of this.

ahmad.kayyali@crometrics.com

1.specification.md

Experiment Requirements

v0: Control

No change

v1: Updated Nav Linking

In the mobile navigation hamburger menu, “Rugs” should link directly to the Rugs PLP: https://www.luluandgeorgia.com/rugs

“Lighting” should link directly to the lighting PLP:

“Kids” should link directly to the kids PLP: https://www.luluandgeorgia.com/collections/lulu-and-georgia-littles Clients removed Kids from site.

“Walls” should link directly to the walls PLP: https://www.luluandgeorgia.com/walls

This should replace the current functionality of opening the next level of navigation.

shared.js

// eslint-disable-next-line no-unused-vars
import { log, error, init, polyfill } from "cromedics/base-other";
import utils from "cromedics/utils-exports";

const apply = () => {
  init();

  utils.observeSelector(".level0 > .mobileNav__title", navLink => {
    const links = [
      `https://www.luluandgeorgia.com/rugs`,
      `https://www.luluandgeorgia.com/lighting`,
      `https://www.luluandgeorgia.com/walls`
    ];

    if (links.includes(navLink.href)) {
      navLink.insertAdjacentHTML(
        "beforebegin",
        `<a class="cro-cover" style="
          position: absolute;
          height: 100%;
          width: 100%;
          z-index: 33333;
          top: 0%;
          "
          href="${navLink.href}"
          > </a>`
      );
    }
  });
};

try {
  apply();
} catch (e) {
  error(e);
}