Compare Component

This is our compare component used to compare products passed in from product compare click

Installation

First create a file within app/javascript/packs called compare.js. Once you've created this file, add the content below to the file:

import React from "react";
import { render } from "react-dom";
import Compare from "@cityelectricalfactors/cef_compare";

document.addEventListener("DOMContentLoaded", () => {
  if (document.querySelector(".compare-container")) {
    const node = document.querySelector(".compare-container");
    const config = {
      siteName: "YOUR_SITE_NAME"
    };
    render(
      <Compare config={config} />,
      node
    );
  }
});

You will then need to render the component out on your site. To do this add the following where you want the component to show.

.compare-container
  = javascript_pack_tag("compare")

You will then also need the following CSS on your site:

.comparison-bar {
  background-color: rgba(0, 0, 0, 0.5);
  bottom: 0;
  left: 0;
  position: fixed;
  width: 100vw;
  z-index: 1001;
  &.show {
    height: 100%;
    overflow-y: scroll;
    background: #fff;
  }

  .show-comparison__btn {
    align-items: center;
    border: 0;
    border-radius: 0;
    display: flex;
    height: 45px;
    justify-content: space-between;
    margin: 0;
    padding: 0 1rem;
    width: 300px;
    &.hide {
      display: none;
    }
    > svg {
      height: 15px;
    }

    .show-comparison__value {
      border: 2px solid #fff;
      border-radius: 50%;
      height: 25px;
      margin-left: 0.5rem;
      padding: 0.15rem 0.5rem;
      width: 25px;
    }
  }

  .comparison {
    display: flex;
    flex-wrap: wrap;
    padding-top: 1rem;
    padding-bottom: 1rem;
    z-index: 10;
    position: fixed;
    background: #fff;
    width: 100%;

    .comparison-header {
      align-items: center;
      display: flex;
      justify-content: space-between;
      margin-right: 1rem;
      margin-bottom: 1rem;
      flex-basis: 100%;

      svg {
        height: 14px;
        width: 14px;
        cursor: pointer;
        @media screen and (min-width: 768px) {
          height: 24px;
          width: 24px;
        }
      }
      h4 {
        color: #a55a95;
        margin: 0 0 10px 0;
        font-weight: $font-normal;
      }

      p {
        font-size: 1.125rem;
        margin:0;
        @media screen and (min-width: 768px) {
          font-size: 1.625rem;
        }
      }

      .btn {
        min-width: 100px;
      }
    }

    .comparison-products {
      display: flex;

      .comparison-product {
        background-color: #fff;
        border: 1px solid #dfdfdf;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-basis: 33%;
        padding: 12px;
        position: relative;
        
        > .brand-image {
          display: none;
          @media screen and (min-width: 1025px) {
            display: block;
            margin: 0;
          }
        }
        > img {
          height: 60px;
          width: 60px;
          margin: 0 auto;
        }

        > svg {
          position: absolute;
          right: 5px;
          top: 5px;
          width: 15px;
          z-index: 20;
          display: block;
          cursor: pointer;
          @media screen and (min-width: 768px) and (max-width: 1024px) {
            display: none;
          }

          &:hover {
            cursor: pointer;
          }
        }
      }

      .comparison-product__desc {
        max-width: 150px;
        font-size: 0.875rem;
        margin: 12px 0;
        color: #656565;
        &:hover {
          text-decoration: underline;
        }
      }
      .comparison-product__price {
        font-size: 0.875rem;
        font-weight: 500;
        color: #a55a95;
        @media screen and (min-width: 1025px) {
          font-size: 1rem;
        }
      }
      .comparison-product__remove {
        display: none;
        text-decoration: underline;
        color: #a55a95;
        font-weight: 500;
        font-size: 0.875rem;
        margin: 12px 0;
        @media screen and (min-width: 768px) and (max-width: 1024px) {
          display: block;
        }
      }
      .comparison-product__add-to-basket {
        min-width: 0;
        width: 100%;
        margin-top: 12px;
        span {
          display: none;
          @media screen and (min-width: 768px) {
            display: inline;
          }
        }
      }
    }
  }
  .comparison-specifications {
    > div:first-of-type {
      margin-top: 350px;
      @media screen and (min-width: 321px) {
        margin-top: 330px;
      }
      @media screen and (min-width: 768px) and (max-width: 1024px){
        margin-top: 350px;
      }
    }
    .comparison-spec-header {
      margin: 0;
      padding: 10px;
      background: #dfdfdf;
      color: #656565;
      font-size: 0.875rem;
      font-weight: 700;
    }
    .comparison-spec-list {
      display: flex;
      &--item {
        color: #656565;
        font-size: 0.875rem;
        flex-basis: 33%;
        padding: 10px;
      }
    }
  }
}
html,
body {
  &.modal-open {
    overflow: hidden;
    position: relative;
    height: 100%;
  }
}

Publishing / Updating

Once you're finished building / updateing the component and your pull request has been merged you're going to want to publish it to the NPM registry so we can use it across projects. The first thing you need to do is remove the symlink you created earlier.

From inside your project folder run:

yarn unlink COMPONENTNAME

Then from within the component folder run:

yarn unlink

If you now exit and re-run your webpack server on the project, it should throw an error message that the component is not found.

You then need to run the following to prepare your ./dist folder ready for publishing. This will completely remove the old ./dist folder and build a new one.

yarn prepare

Next you need to publish the component, you can do this by running the following (please ensure you include the --access flag):

yarn publish --access public

It will first ask you to bump the version number (if you didn't do it manually earlier), please make sure you follow SemVer conventions and any changes are added in to the CHANGELOG.

If this is the first time you've published to NPM it will ask for your password. Just follow the on-screen prompts.

Finally, you're going to want to add this to your project, to do so you need to run:

yarn add COMPONENTNAME

Once again exit and re-run your webpack server and you should now be using your newly published component direct from the NPM registry.

Built With

• React
• ESLint
• Babel
• Yarn

Versioning

We use SemVer for versioning.

License

This project is licensed under the MIT License.