title: How to obtain the product price in the shopping cart
body: <p><a href="https://i.stack.imgur.com/qmyFQ.png" rel="nofollow noreferrer">Image 1</a>
  <a href="https://i.stack.imgur.com/rODeV.png" rel="nofollow noreferrer">Image 2</a>
  As in Figure 1, when there is only one product, it gives the required amount correctly, but when the product is added later, the required amount is not updated, how can we do this? The amount &quot;.cl-total-row strong&quot; comes from here.</p>
  <pre><code>const style = `
  &lt;style&gt;
  .cl-cart-page {
      display: grid;
  }
  h2.cl-cart-page-title {
      grid-row-start: 1;
  }
  
  .anatomi_cargo_info_container {
      padding: 0 0px;
      margin: 0;
      justify-content: center;
      align-items: center;
  }
  .anatomi_cargo_info {
      padding: 0.4rem;
      padding-left: 20px;
      display: flex;
      gap: 20px;
      justify-content: center;
      align-items: center;
      background: #2F6C44;
      color: #fff;
  }
  &lt;/style&gt;
  `;
  
  var deger = $(&quot;.cl-total-row strong&quot;).html();
  a = parseFloat(deger);
  kargo = 250 - a;
  
  const container = document.querySelector('.cl-cart-page');
  const title = document.querySelector('.cl-cart-page-title');
  const cargoInfo = `
  &lt;div class=&quot;anatomi_cargo_info_container&quot;&gt;
      &lt;div class=&quot;anatomi_cargo_info&quot;&gt;Ücretsiz kargo için `+ (kargo) + ` ₺ değerinde ürün ekleyebilirsiniz.&lt;/div&gt;
  &lt;/div&gt;`;
  let productsLength = document.querySelectorAll('.cl-product-card-container').length
  const head = document.querySelector('head');
  if (productsLength &gt; 0) {
      head.insertAdjacentHTML(&quot;afterbegin&quot;, style);
      container.insertAdjacentHTML('afterbegin', cargoInfo);
  }
  </code></pre>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const style = `
      &lt;style&gt;
      .cl-cart-page {
          display: grid;
      }
      h2.cl-cart-page-title {
          grid-row-start: 1;
      }
      
      .anatomi_cargo_info_container {
          padding: 0 0px;
          margin: 0;
          justify-content: center;
          align-items: center;
      }
      .anatomi_cargo_info {
          padding: 0.4rem;
          padding-left: 20px;
          display: flex;
          gap: 20px;
          justify-content: center;
          align-items: center;
          background: #2F6C44;
          color: #fff;
      }
      &lt;/style&gt;
      `;
  
  var deger = $(".cl-total-row strong").html();
  a = parseFloat(deger);
  kargo = 250 - a;
  
  const container = document.querySelector('.cl-cart-page');
  const title = document.querySelector('.cl-cart-page-title');
  const cargoInfo = `
      &lt;div class="anatomi_cargo_info_container"&gt;
          &lt;div class="anatomi_cargo_info"&gt;Ücretsiz kargo için ` + (kargo) + ` ₺ değerinde ürün ekleyebilirsiniz.&lt;/div&gt;
      &lt;/div&gt;`;
  let productsLength = document.querySelectorAll('.cl-product-card-container').length
  const head = document.querySelector('head');
  if (productsLength &gt; 0) {
    head.insertAdjacentHTML("afterbegin", style);
    container.insertAdjacentHTML('afterbegin', cargoInfo);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div&gt;Need HTML here please&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>