JAvascript does not work on DAWN Custom HTML/Liquid

PamBry
Visitor
2 0 0

Hello guys, I am trying to add a custom HTML section on my Shopify dawn but the Javascript does not work but it works fine on codepen and notepad. Any idea why? Please see code below: 

 

<style>
  .variant-selector-container {
    display: flex;
    justify-content: center;
    font-family: arial;
  }

  .classic, .wheat {
    position: relative;
    display: inline-block;
    margin-right: 20px; /* Adjust spacing between product boxes */
  }

  .product-wrapper {
    position: relative;
    overflow: hidden;
  }

.product-label {
    padding-left: 8px;
    top: 10px;
    width: 100%; /* Ensure the label spans the full width of the product wrapper */
    text-align: left; /* Center the text horizontally */
    background-color: gray;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
}

  .variant-selector {
    margin-top: 5px;
  }

  .color-swatch {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 0;
    cursor: pointer;
    border: 2px solid #fff;
  }

  .product-image {
    max-width: 300px;
    height: auto;
    position: relative;
  }

  .circle {
    position: absolute;
    top: 10px; /* Adjust as needed */
    right: 10px; /* Adjust as needed */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
  }

  .circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>
<div>

<div class="variant-selector-container">
  
  <!-- Classic 1 -->
  <div class="classic">
    <div class="product-wrapper">
      <div class="product-label">Classic</div>
    <img class="product-image" src="https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-brown-image.webp?v=1708504937" alt="Product Image">
    </div>
    
    <div class="circle">
      <img class="color-image" src="https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-brown-pattern.webp?v=1708504937" alt="Color Image">
    </div>
    
    <div class="variant-selector">
      <!-- Color swatch for Product 1 -->
      <div class="color-swatch" onclick="updateImage('brown', 'classic')" style="background-color: #3B2A1F;"></div>
      <div class="color-swatch" onclick="updateImage('limid_ash', 'classic')" style="background-color: #C5B9B2;"></div>
      <div class="color-swatch" onclick="updateImage('hurricane', 'classic')" style="background-color: #6E7D7E;"></div>
      <div class="color-swatch" onclick="updateImage('vanilla', 'classic')" style="background-color: #F3E5AB;"></div>
      <div class="color-swatch" onclick="updateImage('ming', 'classic')" style="background-color: #6195A0;"></div>
      <div class="color-swatch" onclick="updateImage('quill_grey', 'classic')" style="background-color: #B5B7B6;"></div>
      <div class="color-swatch" onclick="updateImage('jumbo', 'classic')" style="background-color: #A98B75;"></div>
      <div class="color-swatch" onclick="updateImage('wild_rice', 'classic')" style="background-color: #A38A68;"></div>
      <div class="color-swatch" onclick="updateImage('tuscany', 'classic')" style="background-color: #D3B9A1;"></div>
    </div>
  </div>
  
  <!-- Product 2 -->
  <div class="wheat"> <!-- Changed class from "classic" to "wheat" -->
    <div class="product-wrapper">
      <div class="product-label">Wheat</div>
    <img class="product-image" src="https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-friar_gray-image.webp?v=1708504971" alt="Product Image">
    </div>
    
    <div class="circle">
      <img class="color-image" src="https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-friar_gray-pattern.jpg?v=1708504973" alt="Color Image">
    </div>
    
    <div class="variant-selector">
      <!-- Color swatch for Product 2 -->
      <div class="color-swatch" onclick="updateImage('friar_gray', 'wheat')" style="background-color: #626466;"></div>
      <div class="color-swatch" onclick="updateImage('sandrift', 'wheat')" style="background-color: #C2B49B;"></div>
      <div class="color-swatch" onclick="updateImage('silver_chalice', 'wheat')" style="background-color: #9D9D9D;"></div>
      <div class="color-swatch" onclick="updateImage('sisal', 'wheat')" style="background-color: #D7CEBA;"></div>
      <div class="color-swatch" onclick="updateImage('spanish', 'wheat')" style="background-color: #758675;"></div>
      <div class="color-swatch" onclick="updateImage('wedgehood', 'wheat')" style="background-color: #7E8AA0;"></div>
    </div>
  </div>
  
</div>

<script>
  function updateImage(color, productType) {
    const image = document.querySelector(`.${productType} .product-image`);
    const colorImage = document.querySelector(`.${productType} .color-image`);
    switch (color) {
      case 'brown':
        image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-brown-image.webp?v=1708504937';
        colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-brown-pattern.webp?v=1708504937';
        break;
      case 'limid_ash':
        image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-limid-ash-image.webp?v=1708504937';
        colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-limid-ash-pattern.jpg?v=1708504937';
        break;
      case 'hurricane':
        image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-hurricane-image.webp?v=1708504937';
        colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-hurricane-pattern.jpg?v=1708504937';
        break;
      case 'vanilla':
        image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-vanilla-image.webp?v=1708504937';
        colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-vanilla-pattern.webp?v=1708504937';
        break;
      case 'ming':
        image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-ming-image.webp?v=1708504937';
        colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-ming-pattern.webp?v=1708504937';
        break;
      case 'quill_grey':
        image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-quill_grey-image.webp?v=1708504937';
        colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-quill_grey-pattern.jpg?v=1708504938';
        break;
      case 'jumbo':
        image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-jumbo-image.webp?v=1708504937';
        colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-jumbo-pattern.jpg?v=1708504937';
        break;
      case 'wild_rice':
        image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-wild_rice-image.webp?v=1708504938';
        colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-wild_rice-pattern.webp?v=1708504937';
        break;
      case 'tuscany':
        image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-tuscany-image.webp?v=1708504937';
        colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-tuscany-pattern.webp?v=1708504937';
        break;
      case 'friar_gray':
        image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-friar_gray-image.webp?v=1708504971';
        colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-friar_gray-pattern.jpg?v=1708504973';
        break;
      case 'sandrift':
        image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-sandrift-image.webp?v=1708504972';
        colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-sandrift-pattern.webp?v=1708504972';
        break;
      case 'silver_chalice':
        image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-silver_chalice-image.webp?v=1708504971';
        colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-silver_chalice-pattern.jpg?v=1708504972';
        break;
      case 'sisal':
        image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-sisal-image.webp?v=1708504971';
        colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-sisal-pattern.webp?v=1708504972';
        break;
      case 'spanish':
        image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-spanish_green-image.webp?v=1708504971';
        colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-spanish_green-pattern.webp?v=1708504972';
        break;
      case 'wedgehood':
        image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-wedgewood-image.webp?v=1708504971';
        colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-wedgewood-pattern.webp?v=1708504972';
        break;
      default:
        break;
    }
  }
</script>
</div>

Replies 0 (0)