js实现在文章里面添加产品购买区块

在后台编辑器里面添加

<section id="test111"></section>
<script>
var pro_divid = 'test111';var pro_handle = '10-XXXX-XXXX-XXX';
doShowProductInfo(pro_divid,pro_handle);
</script>

{{ ‘blog-product.js’ | asset_url | script_tag }}

function doShowProductInfo(id = false, handle = false){
  if(!id || !handle){
    return false;  
  };  
  const productUrl  = '/products/' + handle + '.js';  
  var xhr = new XMLHttpRequest();  
  xhr.open('GET', productUrl, true);//告诉XMLHttpRequest对象你想要发起一个异步的GET请求到指定的productUrl(方法,URL,异步)
  xhr.onreadystatechange = function() {
  //在XMLHttpRequest对象上设置了一个事件监听器，用于监听readystatechange事件
   //readystatechange 事件在 XMLHttpRequest 对象的 readyState 属性发生变化时触发。readyState 属性表示请求/响应过程的当前状态，其可能的值有：

 //0（UNSENT）: 代理被创建，但尚未调用 open() 方法。
 //1（OPENED）: open() 方法已经被调用。
 //2（HEADERS_RECEIVED）: send() 方法已经被调用，并且头部和状态已经可获得。
 //3（LOADING）: 下载中；responseText 属性已经包含部分数据。
 //4（DONE）: 操作已完成。
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {  //如果请求成功（即 status 为 200），你将响应文本解析为 JSON 并传递给另一个函数 doDisplayProduct(id, productInfo)
        var productInfo = JSON.parse(xhr.responseText);
        // console.log(productInfo); 
        doDisplayProduct(id, productInfo)  //实参
      } else {
        console.error(xhr.statusText);
      }
    }
  };
  xhr.send();
}
function doDisplayProduct(id, data){   //形参
  const divBox = document.getElementById(id);  
  divBox.innerHTML = '';
  var html = '';
  html += '<section class="bigbox123 clx">';
  html += '<div class="leftboxss">';
  html += '<img src="' + data.featured_image + '" />';
  html += '</div>';
  html += '<div class="rightboxss">';
  html += '<div class="bigboxtitle">';
  html += data.title
  html += '</div>';
  html += '<div class="bigboxprice">$';
  html += data.price / 100
  html += '</div>';
  html += '<div class="article-product-show-contant">';
  html += data.description
  html += '</div>';
  html += '<div class="bigboxfoot">';
  html += '<div class="handleurl">';
  html += '<a target="_blank" href="/products/' + data.handle + '">Learn More</a>';
  html += '</div>';
  // html += '<div class="buynow123">';
  html += '<a href="javascript:void(0);" class="aadewgfg123" οnclick="doShowProductAddToCart(' + "'" + data.variants[0].id + "'" + ')">Buy Now</a>'
  // html += '</div>';
  html += '</div>';
  
  html += '</div>';
  
  html += '</section>';
  divBox.innerHTML = html;
}

function doShowProductAddToCart(id = false, quantity = 1){
  if(!id){
    return false;  
  }; 
  let formData = {
    'items': [{
      'id': id,
      'quantity': quantity
    }]
  };
  fetch(window.Shopify.routes.root + 'cart/add.js', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(formData)
  }).then(response => {
    window.location.href='/checkout'
  }).catch((error) => {
    console.error('Error:', error);
  });
}