Merge pull request #97 from solidusio/revert-96-revert-91-mfrecchiami/demo-marketing-proposal

Demo restyling

Author: kennyadsl

app/assets/.DS_Store

@@ -0,0 +1,25 @@
+$(document).ready(function(){
+  $('.toggle-accordion').click(function(e) {
+    e.preventDefault();
+  
+    let $this = $(this);
+
+    //changes arrow 
+    if( $(this).hasClass('js-arrow-up')){
+      $(this).removeClass('js-arrow-up').addClass('js-arrow-down');
+    } else {
+      $(this).removeClass('js-arrow-up').addClass('js-arrow-down');
+      $(this).removeClass('js-arrow-down').addClass('js-arrow-up');
+	 	}
+  
+    if ($this.next().hasClass('js-show-list')) {
+        $this.next().removeClass('js-show-list');
+        $this.next().slideUp(350);
+    } else {
+        $this.parent().parent().find('li .inner').removeClass('js-show-list');
+        $this.parent().parent().find('li .inner').slideUp(350);
+        $this.next().toggleClass('js-show-list');
+        $this.next().slideToggle(350);
+    }
+  });
+});

app/assets/images/about-image.jpg

@@ -0,0 +1,103 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const optionTypeSelector = document.querySelectorAll(".selection-items");
+  for (var i = 0; i < optionTypeSelector.length; i++) {
+    optionTypeSelector[i].addEventListener("click", onSelection);
+  }
+  selectFirstVariant();
+});
+
+function selectFirstVariant() {
+  const firstVariant = document.querySelector("[data-option-index]");
+  if (firstVariant) {
+    setTimeout(() => { firstVariant.click(); }, 1);
+  }
+}
+
+function onSelection(event) {
+  document.getElementById(`selected-${event.target.name}`).innerText = event.target.dataset.presentation;
+
+  const optionIndex = event.target.attributes["data-option-index"].value;
+  const nextType = document.querySelector(`[data-option-index="${parseInt(optionIndex, 10) + 1}"]`);
+  if (nextType) {
+    updateOptions(nextType.name, optionIndex);
+  }
+  selectVariant();
+}
+
+function updateStockView(status) {
+  if (status) {
+    this.stockIndicatorTarget.classList.add("d-hide");
+    this.cartButtonTarget.disabled = false;
+  } else {
+    this.stockIndicatorTarget.classList.remove("d-hide");
+    this.cartButtonTarget.disabled = true;
+  }
+}
+
+function updateOptions(nextTypeName, optionIndex) {
+  const nextOptionValues = this.nextOptionValues(optionIndex);
+
+  let firstRadio = null;
+  const allNextOptions = [...document.querySelectorAll(`[name="${nextTypeName}"]`)];
+  allNextOptions.forEach((radio) => {
+    if (!nextOptionValues.includes(parseInt(radio.value, 10))) {
+      radio.disabled = true;
+      radio.parentElement.classList.add("d-hide");
+    } else {
+      radio.disabled = false;
+      radio.parentElement.classList.remove("d-hide");
+      if (!firstRadio) { firstRadio = radio; }
+    }
+  });
+
+  const nextSelectedRadio = document.querySelector(`[name="${nextTypeName}"]:checked`);
+  if (nextSelectedRadio.disabled) {
+    firstRadio.click();
+  } else {
+    nextSelectedRadio.click();
+  }
+}
+
+function nextOptionValues(optionIndex) {
+  const values = [];
+  const variantOptionsTargets = document.querySelectorAll('.product-variants__list > li > input');
+  variantOptionsTargets.forEach((option) => {
+    const optionValueIds = JSON.parse(option.attributes["data-option-value-ids"].value);
+    const selectedOptionIds = this.currentSelection();
+    let matched = true;
+    for (let i = 0; i <= optionIndex; i += 1) {
+      if (optionValueIds[i] !== selectedOptionIds[i]) {
+        matched = false;
+        break;
+      }
+    }
+    if (matched) {
+      values.push(optionValueIds[parseInt(optionIndex, 10) + 1]);
+    }
+  });
+  return values;
+}
+
+function updateView(variant) {
+  document.querySelector('#product-price').innerHTML = variant.dataset.price;
+}
+
+function selectVariant() {
+  this.variant = document.querySelector(`[data-option-value-ids="${JSON.stringify(this.currentSelection())}"]`);
+  if (this.variant) {
+    this.variant.checked = true;
+    this.updateView(this.variant);
+  } else {
+    this.priceTarget.innerText = "Not found, please select all optionTypeSelector";
+  }
+}
+
+function currentSelection() {
+  let i = 0;
+  const selectionArr = [];
+  while (document.querySelector(`[data-option-index="${i}"]`)) {
+    selectionArr.push(parseInt(document.querySelector(`[data-option-index="${i}"]:checked`).value, 10));
+    i += 1;
+  }
+  return selectionArr;
+}

app/assets/images/hero-bg.jpg

@@ -0,0 +1,35 @@
+@import "../../variables";
+
+.button {
+  text-decoration:none;
+  display: inline-block;
+  transition: all .3 ease;
+  cursor: pointer;
+}
+
+.button-secondary {
+  background: $color-dark;
+  color: $color-white;
+  border-radius: 100px;
+  border: 0;
+  margin-top: 4rem;
+  padding: 1.5rem 3.5rem;
+  text-transform: uppercase;
+  font-size: 1.8rem;
+  font-size: clamp(1.8rem, 2vw, 2.2rem);
+
+  &:hover,
+  &:focus {
+    background: $color-white;
+    color: $color-dark;
+  }
+}
+
+.button-tertiary {
+  background: $color-blue;
+  color: $color-white;
+  text-transform: uppercase;
+  padding: 1.5rem 2.5rem;
+  border-radius: 50px;
+  border: 0;
+}

app/assets/images/hoodies-category.jpg

@@ -0,0 +1,42 @@
+@import "../../variables";
+
+.cart-footer {
+  flex-direction: column;
+  align-items: flex-end;
+
+  @media (min-width: 900px) {
+    margin-top: 105px;
+  }
+
+  & > * {
+    flex-grow: 1;
+  }
+
+  &__total {
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    & > strong {
+      padding-left: 1rem;
+    }
+
+    @media (min-width: 900px) {
+      min-width: 286px;
+    }
+  }
+
+  &__primary-action {
+    padding: 3rem 0 0 0;
+    min-width: 100%;
+
+    @media (min-width: 900px) {
+      min-width: 286px;
+    }
+
+    button {
+      width: 100%;
+    }
+  }
+}

app/assets/images/icon-chevron-down_black.svg

@@ -0,0 +1,89 @@
+@import "../../variables";
+
+.cart-items {
+  &-header {
+    display: none;
+
+    @media (min-width: 900px) {
+      align-items: center;
+      display: flex;
+      border-bottom: 1px solid $color-gray-light;
+    }
+
+    &__title {
+      font-size: 1.3rem;
+      font-weight: $font-weight-bold;
+      text-transform: uppercase;
+    }
+
+    & > * {
+      flex-grow: 0;
+      flex-shrink: 0;
+
+      &:nth-child(2) {
+        padding: 0 4rem 0 4rem;
+      }
+
+      &:nth-child(3),
+      &:last-child {
+        @media (min-width: 900px){
+          padding: 0 4rem 0 0;
+        }
+      }
+
+      &:first-child {
+        @media (min-width: 900px){
+          width: 55%;
+        }
+      }
+    }
+  }
+}
+
+.cart-item {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-column-gap: 2rem;
+  align-items: center;
+
+  @media (min-width: 600px) {
+    display: flex;
+  }
+}
+
+.cart-item__quantity,
+.cart-item__price,
+.cart-item__remove {
+  text-align: left;
+  width: auto;
+  margin: 10px 0 10px 0;
+
+  @media (min-width: 900px) {
+    width: 8rem;
+    text-align: right;
+    margin: 10px 0 10px auto;
+  }
+}
+
+.cart-item__price-single,
+.cart-item__price {
+  @media (min-width: 900px) {
+    padding: 0 4rem 0;
+  }
+}
+
+.cart-item__remove {
+  .delete {
+    width: 26px;
+    height: 26px;
+    color: transparent;
+    background: asset_data_url("icon-delete.svg") no-repeat;
+    background-size: 100% auto;
+    background-position: center;
+  }
+}
+
+.cart-item__image img {
+  max-width: 100%;
+  height: auto;
+}

app/assets/images/icon-delete.svg

@@ -0,0 +1,30 @@
+@import "../../variables";
+
+.cart-link {
+  padding: 5px;
+}
+
+.cart-info {
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  background: asset_data_url("icon-shopping-cart.svg") no-repeat;
+  background-size: 100% auto;
+  background-position: bottom;
+  position: relative;
+
+  .link-text {
+    color: $color-white;
+    background: $color-blue;
+    font-weight: $font-weight-bold;
+    border-radius: 50px;
+    font-size: $font-size-base / 1.2;
+    text-align: center;
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    width: 22px;
+    height: 22px;
+    line-height: 22px;
+  }
+}

app/assets/images/icon-search.svg

@@ -0,0 +1,31 @@
+@import "../../variables";
+
+.cart-page {
+  @media (min-width: 900px) {
+    padding-bottom: 18rem;
+  }
+
+  &__coupon-code {
+    justify-content: center;
+  
+    @media (min-width: 900px) {
+      margin-top: 0;
+      max-width: 286px;
+      justify-content: flex-end;
+    }
+  }
+
+  &__other-actions {
+    align-items: center;
+    flex-direction: column;
+    display: flex;
+
+    @media (min-width: 900px) {
+      background: #FBFAFA;
+      padding: 2rem 1rem;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-top: -230px;
+    }
+  }
+}