mp-design-system 1.2.16 → 1.2.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "1.2.16",
+  "version": "1.2.17",
   "description": "",
   "scripts": {
     "dev": "npm-run-all --parallel bundle:*",

package/src/_includes/components/embed/embed.scss

@@ -1,6 +1,5 @@
 .c-embed {
   position: relative;
-  z-index: -1;
 
   &__wrapper {
     padding-bottom: 56.625%;

package/src/assets/js/product-finder.js

@@ -0,0 +1,575 @@
+const ProductFinder = Vue.createApp({
+  setup() {
+    const { ref, computed } = Vue;
+
+    let translations = {
+      generic: {
+        questionText: "Question",
+        backText: "Back",
+        nextText: "Next",
+        restartText: "Restart",
+        seeResultsText: "See results",
+        viewText: "View",
+        getAQuoteText: "Get a quote",
+        requestADemoText: "Request a demo",
+      },
+      questionOne: {
+        labelText: "Where will your Zetasizer be used?",
+        options: [
+          { optionText: "Academic Research" },
+          { optionText: "Industrial Research" },
+          { optionText: "Pharmaceutical Research" },
+          { optionText: "Industrial QA/QC" },
+          { optionText: "Pharmaceutical QA/QC" },
+        ],
+      },
+      questionTwo: {
+        labelText: "If you are replacing or supplementing an existing system please choose the model from below or select \"not applicable\"",
+        options: [
+          { optionText: "Zetasizer Nano S90/ZS90" },
+          { optionText: "Zetasizer Nano ZS/ZSE" },
+          { optionText: "Zetasizer Nano ZSP" },
+          { optionText: "Zetasizer uV" },
+          { optionText: "Zetasizer Ultra" },
+          { optionText: "Zetasizer Pro" },
+          { optionText: "Other manufacturer's system" },
+          { optionText: "Not applicable" },
+        ],
+      },
+      questionThree: {
+        labelText: "What do you want the Zetasizer to tell you about your sample? (Select as many as applicable)",
+        options: [
+          { optionText: "Size" },
+          { optionText: "Zeta potential" },
+          { optionText: "Concentration" },
+        ],
+      },
+      questionFour: {
+        labelText: "If you are using your existing system in a QA/QC department is it important that the new system provides consistency of results compared to a previously used system?",
+        options: [
+          { optionText: "Very important" },
+          { optionText: "Somewhat important" },
+          { optionText: "Not important" },
+        ],
+      },
+      questionFive: {
+        labelText: "Which of the following best describes your sample material?",
+        options: [
+          { optionText: "Slurries/Dispersions >5% solids" },
+          { optionText: "Emulsions/Lipid Suspension" },
+          { optionText: "Natural Polymers/Proteins >10 mg/mL" },
+          { optionText: "Proteins/Biomolecules <10 mg/mL" },
+          { optionText: "Environmental Samples (Aqueous)" },
+          { optionText: "Dilute nanoparticle/colloidal systems" },
+        ],
+      },
+      questionSix: {
+        labelText: "What is the expected size range of your sample?",
+        options: [
+          { optionText: "<100 nm" },
+          { optionText: "<500 nm" },
+          { optionText: ">500 nm" },
+          { optionText: "Various/Unknown" },
+        ],
+      },
+      questionSeven: {
+        labelText: "Are you likely to measure samples that fluoresce in red light?",
+        options: [
+          { optionText: "Yes" },
+          { optionText: "No" },
+        ],
+      },
+      results: {
+        headingText: "All done.",
+        multipleResultsLedeText:
+          "Based on the features and specifications you selected we would recommend these products.",
+        singleResultLedeText:
+          "Based on the features and specifications you selected we would recommend the",
+      },
+    };
+    if (window.location.pathname.lastIndexOf("/de", 0) == 0) {
+      // German translations
+    } else if (window.location.pathname.lastIndexOf("/es", 0) == 0) {
+      // Spanish translations
+    } else if (window.location.pathname.lastIndexOf("/fr", 0) == 0) {
+      // French translations
+    } else if (window.location.pathname.lastIndexOf("/br", 0) == 0) {
+      // Portugese translations
+    } else if (window.location.pathname.lastIndexOf("/ru", 0) == 0) {
+      // Russian translations
+    } else if (window.location.pathname.lastIndexOf("/kr", 0) == 0) {
+      // Korean translations
+    } else if (window.location.pathname.lastIndexOf("/jp", 0) == 0) {
+      // Japanese translations
+    } else if (window.location.pathname.lastIndexOf("/tw", 0) == 0) {
+      // Taiwanese translations
+    } else if (window.location.hostname.indexOf("malvernpanalytical.com.cn") > 0) {
+      // Chinese translations
+    }
+
+    let activeStep = ref(1);
+
+    const questions = {
+      questionOne: {
+        label: translations.questionOne.labelText,
+        options: [
+          {
+            label: translations.questionOne.options[0].optionText,
+            value: "Academic Research",
+            id: "One",
+          },
+          {
+            label: translations.questionOne.options[1].optionText,
+            value: "Industrial Research",
+            id: "Two",
+          },
+          {
+            label: translations.questionOne.options[2].optionText,
+            value: "Pharmaceutical Research",
+            id: "Three",
+          },
+          {
+            label: translations.questionOne.options[3].optionText,
+            value: "Industrial QA/QC",
+            id: "Four",
+          },
+          {
+            label: translations.questionOne.options[4].optionText,
+            value: "Pharmaceutical QA/QC",
+            id: "Five",
+          },
+        ],
+      },
+      questionTwo: {
+        label: translations.questionTwo.labelText,
+        options: [
+          {
+            label: translations.questionTwo.options[0].optionText,
+            value: "Zetasizer Nano S90/ZS90",
+            id: "One",
+          },
+          {
+            label: translations.questionTwo.options[1].optionText,
+            value: "Zetasizer Nano ZS/ZSE",
+            id: "Two",
+          },
+          {
+            label: translations.questionTwo.options[2].optionText,
+            value: "Zetasizer Nano ZSP",
+            id: "Three",
+          },
+          {
+            label: translations.questionTwo.options[3].optionText,
+            value: "Zetasizer uV",
+            id: "Four",
+          },
+          {
+            label: translations.questionTwo.options[4].optionText,
+            value: "Zetasizer Ultra",
+            id: "Five",
+          },
+          {
+            label: translations.questionTwo.options[5].optionText,
+            value: "Zetasizer Pro",
+            id: "Six",
+          },
+          {
+            label: translations.questionTwo.options[6].optionText,
+            value: "Other manufacturer's system",
+            id: "Seven",
+          },
+          {
+            label: translations.questionTwo.options[7].optionText,
+            value: "Not applicable",
+            id: "Eight",
+          },
+        ],
+      },
+      questionThree: {
+        label: translations.questionThree.labelText,
+        options: [
+          {
+            label: translations.questionThree.options[0].optionText,
+            value: "Size",
+            id: "One",
+          },
+          {
+            label: translations.questionThree.options[1].optionText,
+            value: "Zeta potential",
+            id: "Two",
+          },
+          {
+            label: translations.questionThree.options[2].optionText,
+            value: "Concentration",
+            id: "Three",
+          },
+        ],
+      },
+      questionFour: {
+        label: translations.questionFour.labelText,
+        options: [
+          {
+            label: translations.questionFour.options[0].optionText,
+            value: "Very important",
+            id: "One",
+          },
+          {
+            label: translations.questionFour.options[1].optionText,
+            value: "Somewhat important",
+            id: "Two",
+          },
+          {
+            label: translations.questionFour.options[2].optionText,
+            value: "Not important",
+            id: "Three",
+          },
+        ],
+      },
+      questionFive: {
+        label: translations.questionFive.labelText,
+        options: [
+          {
+            label: translations.questionFive.options[0].optionText,
+            value: "Slurries/Dispersions >5% solids",
+            id: "One",
+          },
+          {
+            label: translations.questionFive.options[1].optionText,
+            value: "Emulsions/Lipid Suspension",
+            id: "Two",
+          },
+          {
+            label: translations.questionFive.options[2].optionText,
+            value: "Natural Polymers/Proteins >10 mg/mL",
+            id: "Three",
+          },
+          {
+            label: translations.questionFive.options[3].optionText,
+            value: "Proteins/Biomolecules <10 mg/mL",
+            id: "Four",
+          },
+          {
+            label: translations.questionFive.options[4].optionText,
+            value: "Environmental Samples (Aqueous)",
+            id: "Five",
+          },
+          {
+            label: translations.questionFive.options[5].optionText,
+            value: "Dilute nanoparticle/colloidal systems",
+            id: "Six",
+          },
+        ],
+      },
+      questionSix: {
+        label: translations.questionSix.labelText,
+        options: [
+          {
+            label: translations.questionSix.options[0].optionText,
+            value: "<100 nm",
+            id: "One",
+          },
+          {
+            label: translations.questionSix.options[1].optionText,
+            value: "<500 nm",
+            id: "Two",
+          },
+          {
+            label: translations.questionSix.options[2].optionText,
+            value: ">500 nm",
+            id: "Three",
+          },
+          {
+            label: translations.questionSix.options[3].optionText,
+            value: "Various/Unknown",
+            id: "Four",
+          },
+        ],
+      },
+      questionSeven: {
+        label: translations.questionSeven.labelText,
+        options: [
+          {
+            label: translations.questionSeven.options[0].optionText,
+            value: "Yes",
+            id: "One",
+          },
+          {
+            label: translations.questionSeven.options[1].optionText,
+            value: "No",
+            id: "Two",
+          },
+        ],
+      },
+    };
+
+    let answers = {
+      questionOne: "",
+      questionTwo: "",
+      questionThree: "",
+      questionFour: "",
+      questionFive: "",
+      questionSix: "",
+      questionSeven: "",
+    };
+
+    let products = ref([]);
+    let results = ref([]);
+    const loading = ref(false);
+
+    function checkQuestionOne(question, answer) {
+      if (answers.questionOne) {
+        console.log(question);
+        console.log(answer);
+      }
+    }
+
+    function checkQuestionTwo(question, answer) {
+      if (answers.questionTwo) {
+
+      }
+    }
+
+    function checkQuestionThree(question, answer) {
+      if (answers.questionThree) {
+
+      }
+    }
+
+    function checkQuestionFour(question, answer) {
+      if (answers.questionFour) {
+
+      }
+    }
+
+    function checkQuestionFive(question, answer) {
+      if (answers.questionFive) {
+
+      }
+    }
+
+    function checkQuestionSix(question, answer) {
+      if (answers.questionSix) {
+        
+      }
+    }
+
+    function checkQuestionSeven(question, answer) {
+      if (answers.questionSeven) {
+        
+      }
+    }
+
+    function previousStep() {
+      if (activeStep.value == 1) {
+        activeStep.value--;
+      } else if (activeStep.value == 2) {
+        activeStep.value--;
+      } else if (activeStep.value == 3) {
+        activeStep.value--;
+      } else if (activeStep.value == 4) {
+        activeStep.value -= 2;
+      } else if (activeStep.value == 5) {
+        activeStep.value--;
+      }
+    }
+
+    function restart(resultsView) {
+      dataLayer.push({
+        event: "product_finder",
+        action: "Restart",
+        label: resultsView,
+      });
+      _paq.push(["trackEvent", "Product finder", "Restart", resultsView]);
+      activeStep.value = 0;
+      results.value = [];
+      answers.questionOne = "";
+      answers.questionTwo = "";
+      answers.questionThree = "";
+      answers.questionFour = "";
+      answers.questionFive = "";
+    }
+
+    function resultTracking(product) {
+      dataLayer.push({
+        event: "product_finder",
+        action: "Result",
+        label: product,
+      });
+      _paq.push(["trackEvent", "Product finder", "Result", product]);
+    }
+
+    const hostname = computed(() => window.location.hostname.toString());
+    const pathname = computed(() => window.location.pathname.toString());
+
+    return {
+      translations,
+      activeStep,
+      questions,
+      answers,
+      loading,
+      results,
+      checkQuestionOne,
+      checkQuestionTwo,
+      checkQuestionThree,
+      checkQuestionFour,
+      checkQuestionFive,
+      checkQuestionSix,
+      checkQuestionSeven,
+      previousStep,
+      restart,
+      resultTracking,
+      hostname,
+      pathname,
+    };
+  },
+  template: `
+    <div class="u-wrap u-margin-top-s u-margin-bottom-xl">
+      <!-- Question 1 -->
+      <div class="u-bg-petrol-step-3 u-flex u-flex-column u-align-center u-pad-xl u-flow--l" v-if="activeStep == 1">
+        <p class="c-h c-h--upper c-h--step--1 u-grey-step-1 u-uppercase">{{ translations.generic.questionText }} 1</p>
+        <h2 class="c-h c-h--step-3 u-petrol">{{ questions.questionOne.label }}</h2>
+        <fieldset id="questionOne" class="o-grid o-grid--of-four u-wrap--content">
+          <div v-for="option in questions.questionOne.options" :key="option">
+            <input type="radio" class="c-radio c-radio--box" name="questionOne" :id="'questionOne_' + option.id" :value="option.value" v-model="answers.questionOne" />
+            <label :for="'questionOne_' + option.id" v-html="option.label"></label>
+          </div>
+        </fieldset>
+        <button type="button" class="mp c-button" :class="loading ? 'c-button--red loading-indicator' : ''" :disabled="loading == true" @@click="checkQuestionOne(questions.questionOne.label.toString(), answers.questionOne.toString())">{{ translations.generic.nextText }}</button>
+      </div>
+      <!-- Question 2 -->
+      <div class="u-bg-petrol-step-3 u-flex u-flex-column u-align-center u-pad-xl u-flow--l" v-if="activeStep == 2">
+        <a class="mp c-twi u-link c-twi--left" style="align-self: flex-start" @@click="previousStep()">
+          <span>{{ translations.generic.backText }}</span>
+          <svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--arrow-right">
+            <use xlink:href="/static/svg/sprite.svg#arrow-left"></use>
+          </svg>
+        </a>
+        <p class="c-h c-h--upper c-h--step--1 u-grey-step-1 u-uppercase u-margin-top-0">{{ translations.generic.questionText }} 2</p>
+        <h2 class="c-h c-h--step-3 u-petrol">{{ questions.questionTwo.label }}</h2>
+        <fieldset id="questionTwo" class="o-grid o-grid--of-two u-wrap--content">
+          <div v-for="option in questions.questionTwo.options" :key="option">
+            <input type="radio" class="c-radio c-radio--box" name="questionTwo" :id="'questionTwo_' + option.id" :value="option.value" v-model="answers.questionTwo" />
+            <label :for="'questionTwo_' + option.id" v-html="option.label"></label>
+          </div>
+        </fieldset>
+        <button type="button" class="mp c-button" :class="loading ? 'c-button--red loading-indicator' : ''" :disabled="loading == true" @@click="checkQuestionTwo(questions.questionTwo.label.toString(), answers.questionTwo.toString())">{{ translations.generic.nextText }}</button>
+      </div>
+      <!-- Question 3 -->
+      <div class="u-bg-petrol-step-3 u-flex u-flex-column u-align-center u-pad-xl u-flow--l" v-if="activeStep == 3">
+        <a class="mp c-twi u-link c-twi--left" style="align-self: flex-start" @@click="previousStep()">
+          <span>{{ translations.generic.backText }}</span>
+          <svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--arrow-right">
+            <use xlink:href="/static/svg/sprite.svg#arrow-left"></use>
+          </svg>
+        </a>
+        <p class="c-h c-h--upper c-h--step--1 u-grey-step-1 u-uppercase u-margin-top-0">{{ translations.generic.questionText }} 3</p>
+        <h2 class="c-h c-h--step-3 u-petrol">{{ questions.questionThree.label }}</h2>
+        <fieldset id="questionThree" class="o-grid o-grid--of-four u-wrap--content">
+          <div v-for="option in questions.questionThree.options" :key="option">
+            <input type="radio" class="c-radio c-radio--box" name="questionThree" :id="'questionThree_' + option.id" :value="option.value" v-model="answers.questionThree" :disabled="!results.some(result => result.Measurements.map(measurement => measurement.toLowerCase()).includes(option.value.toLowerCase()))" />
+            <label :for="'questionThree_' + option.id" v-html="option.label"></label>
+          </div>
+        </fieldset>
+        <button type="button" class="mp c-button" :class="loading ? 'c-button--red loading-indicator' : ''" :disabled="loading == true" @@click="checkQuestionThree(questions.questionThree.label.toString(), answers.questionThree.toString())">{{ translations.generic.nextText }}</button>
+      </div>
+      <!-- Question 4 -->
+      <div class="u-bg-petrol-step-3 u-flex u-flex-column u-align-center u-pad-xl u-flow--l" v-if="activeStep == 4">
+        <a class="mp c-twi u-link c-twi--left" style="align-self: flex-start" @@click="previousStep()">
+          <span>{{ translations.generic.backText }}</span>
+          <svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--arrow-right">
+            <use xlink:href="/static/svg/sprite.svg#arrow-left"></use>
+          </svg>
+        </a>
+        <p class="c-h c-h--upper c-h--step--1 u-grey-step-1 u-uppercase u-margin-top-0">{{ translations.generic.questionText }} 4</p>
+        <h2 class="c-h c-h--step-3 u-petrol">{{ questions.questionFour.label }}</h2>
+        <fieldset id="questionFour" class="o-grid o-grid--of-three u-wrap--content">
+          <div v-for="option in questions.questionFour.options" :key="option">
+            <input type="radio" class="c-radio c-radio--box" name="questionFour" :id="'questionFour_' + option.id" :value="option.value" v-model="answers.questionFour" :disabled="!results.some(result => result.SizeRanges.map(sizeRange => sizeRange.toLowerCase()).includes(option.value.toLowerCase()))" />
+            <label :for="'questionFour_' + option.id" v-html="option.label"></label>
+          </div>
+        </fieldset>
+        <button type="button" class="mp c-button" :class="loading ? 'c-button--red loading-indicator' : ''" :disabled="loading == true" @@click="checkQuestionFour(questions.questionFour.label.toString(), answers.questionFour.toString())">{{ translations.generic.nextText }}</button>
+      </div>
+      <!-- Question 5 -->
+      <div class="u-bg-petrol-step-3 u-flex u-flex-column u-align-center u-pad-xl u-flow--l" v-if="activeStep == 5">
+        <a class="mp c-twi u-link c-twi--left" style="align-self: flex-start" @@click="previousStep()">
+          <span>{{ translations.generic.backText }}</span>
+          <svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--arrow-right">
+            <use xlink:href="/static/svg/sprite.svg#arrow-left"></use>
+          </svg>
+        </a>
+        <p class="c-h c-h--upper c-h--step--1 u-grey-step-1 u-uppercase u-margin-top-0">{{ translations.generic.questionText }} 5</p>
+        <h2 class="c-h c-h--step-3 u-petrol">{{ questions.questionFive.label }}</h2>
+        <fieldset id="questionFive" class="o-grid o-grid--of-three u-wrap--content">
+          <div v-for="option in questions.questionFive.options" :key="option">
+            <input type="radio" class="c-radio c-radio--box" name="questionFive" :id="'questionFive_' + option.id" :value="option.value" v-model="answers.questionFive" :disabled="!results.some(result => result.Environments.map(environment => environment.toLowerCase()).includes(option.value.toLowerCase()))" />
+            <label :for="'questionFive_' + option.id" v-html="option.label"></label>
+          </div>
+        </fieldset>
+        <button type="button" class="mp c-button" :class="loading ? 'c-button--red loading-indicator' : ''" :disabled="loading == true" @@click="checkQuestionFive(questions.questionFive.label.toString(), answers.questionFive.toString())">{{ translations.generic.seeResultsText }}</button>
+      </div>
+      <!-- Question 6 -->
+
+      <!-- Question 7 -->
+
+
+      <!-- Finish -->
+      <!-- <div class="u-bg-petrol-step-3 o-grid o-grid--layout o-grid--6/5 o-grid--push u-pad-xl u-flow--m" v-if="activeStep == 6 && results.length >= 1">
+        <div class="u-flex u-flex-column u-flow--l" :class="results.length == 1 ? 'u-justify-center' : ''">
+          <h2 class="c-h c-h--step-3 u-petrol">{{ translations.results.headingText }}</h2>
+          <div class="mp o-prose u-flow--prose">
+            <p v-if="results.length > 1">{{ translations.results.multipleResultsLedeText }}</p>
+            <p v-else>{{ translations.results.singleResultLedeText }} <strong>{{ results[0].Title }}</strong>.</p>
+          </div>
+          <div class="u-flex">
+            <a class="mp c-button" :href="results.length == 1 ? '@WebRequestContext.Localization.Path/products/request-a-quote?product=' + results[0].ProductId : '@WebRequestContext.Localization.Path/products/request-a-quote'">{{ translations.generic.getAQuoteText }}</a>
+          </div>
+          <div>
+            <a class="mp c-twi u-link c-twi--left" @@click="restart('Results')">
+              <span>{{ translations.generic.restartText }}</span>
+              <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M1 2V8H7" stroke="#006DAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M3.51 12.9999C4.15839 14.8403 5.38734 16.4201 7.01166 17.5013C8.63598 18.5825 10.5677 19.1065 12.5157 18.9944C14.4637 18.8823 16.3226 18.1401 17.8121 16.8797C19.3017 15.6193 20.3413 13.9089 20.7742 12.0063C21.2072 10.1037 21.0101 8.11191 20.2126 6.33105C19.4152 4.55019 18.0605 3.07674 16.3528 2.13271C14.6451 1.18868 12.6769 0.825212 10.7447 1.09707C8.81245 1.36892 7.02091 2.26137 5.64 3.63995L1 7.99995" stroke="#006DAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </a>
+          </div>
+        </div>
+        <div class="u-margin-top-0 u-flow--s">
+          <article class="mp c-card c-card--layout-multi c-card--size-large c-card--bordered c-card--has-image" v-for="result in results" :key="result">
+            <div class="c-card__wrapper">
+              <figure class="c-card__image u-flex u-flex-column u-justify-center" v-if="result.Img">
+                <img :src="result.Img + '?width=475'" style="mix-blend-mode: multiply;">
+              </figure>
+              <div class="c-card__primary">
+                <header class="c-card__header u-flow--2xs">
+                  <h2 class="c-h c-card__title" v-if="result.Title">{{ result.Title }}</h2>
+                  <h3 class="c-h c-h--tagline" v-if="result.Strapline">{{ result.Strapline }}</h3>
+                </header>
+                <div class="c-card__content u-flow">
+                  <div class="mp o-prose u-flow--prose u-step--1">
+                    <p v-if="result.Description">{{ result.Description }}</p>
+                  </div>
+                  <div class="c-card__specs" v-if="result.Range">
+                    <dl>
+                      <dt>{{ result.Range }}</dt>
+                      <dd>Particle size range</dd>
+                    </dl>
+                  </div>
+                </div>
+                <footer class="c-card__footer u-flow--2xs">
+                  <a class="mp c-twi u-link c-twi--left">
+                    <span>{{ translations.generic.viewText }} {{ result.Title }}</span>
+                    <svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--arrow-right">
+                      <use xlink:href="/static/svg/sprite.svg#arrow-right"></use>
+                    </svg>
+                  </a>
+                </footer>
+              </div>
+              <a class="u-fill u-fill--link" :href="(hostname.includes('malvernpanalytical.com.cn') ? '/' : '/' + pathname.split('/')[1] + '/') + result.Url.split('/').slice(2).join('/')" @@click="resultTracking(result.Title.toString())">{{ result.Title }}</a>
+            </div>
+          </article>
+        </div>
+      </div> -->
+    </div>
+  `,
+}).mount("#product-finder");

package/src/prototype/product-finder.njk

@@ -0,0 +1,61 @@
+---
+title: Mastersizer range
+tags: prototype
+---
+
+{% set siteNav %}{% include "navigation/corporate.njk" %}{% endset %}
+
+{% extends "page.njk" %}
+
+{% block content %}
+
+  <div class="mp u-wrap u-pad-y-l-2xl">
+    <nav class="c-breadcrumb " aria-label="Breadcrumb">
+      <ol class="c-breadcrumb__list" role="list">
+        <li class="c-breadcrumb__item" role="listitem">
+          <a href="/en/products" class="c-breadcrumb__link">Products</a>
+        </li>
+        <li class="c-breadcrumb__item" role="listitem">
+          <svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--chevron-down">
+            <use xlink:href="/static/svg/sprite.svg#chevron-down"></use>
+          </svg>
+          <a href="/en/products/product-range" class="c-breadcrumb__link">Product range </a>
+        </li>
+        <li class="c-breadcrumb__item" role="listitem">
+          <svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--chevron-down">
+            <use xlink:href="/static/svg/sprite.svg#chevron-down"></use>
+          </svg>
+          <a href="/en/products/product-range/zetasizer-range" class="c-breadcrumb__link">Zetasizer range</a>
+        </li>
+        <li class="c-breadcrumb__item" role="listitem">
+          <svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--chevron-down">
+            <use xlink:href="/static/svg/sprite.svg#chevron-down"></use>
+          </svg>
+          <a href="/en/products/product-range/zetasizer-range/zetasizer-advance-range" class="c-breadcrumb__link">Zetasizer Advance Range</a>
+        </li>
+        <li class="c-breadcrumb__item" role="listitem">
+          <svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--chevron-down">
+            <use xlink:href="/static/svg/sprite.svg#chevron-down"></use>
+          </svg>
+          <span class="c-breadcrumb__current" aria-current="Zetasizer Advance: Which system ...">Zetasizer Advance: Which system ...</span>
+        </li>
+      </ol>
+    </nav>
+    <header class="u-wrap--content u-flow--xs">
+      <h1 class="c-h c-h--page-title">Zetasizer Advance: Which system is right for me?</h1>
+    </header>
+  </div>
+  <div class="u-wrap u-flow--xl">
+    <div>
+      <div class="o-prose u-flow--prose">
+        <p>Get your personalized recommendation for your perfect new system, as well as seeing which Zetasizer is the closest equivalent to your existing instrument, in just a few minutes!</p>
+        <p>With 6 models to choose from, our new tool will help you find the perfect <a title="Zetasizer Advance Range" href="/en/products/product-range/zetasizer-range/zetasizer-advance-range">Zetasizer Advance system</a> for your measurement needs. To find out which instrument is best suited to your requirements, or is the best match for your current Zetasizer, please answer the questions below&nbsp;and click the ‘Find your Zetasizer’ button.</p>
+      </div>
+    </div>
+    <div id="product-finder"></div>
+  </div>
+
+  <script src="https://unpkg.com/vue@next/dist/vue.global.js"></script>
+  <script src="/build/js/product-finder.js" defer></script>
+
+{% endblock %}