Embed

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>響應式購物車與產品佈局</title>
  <style>
    /* 基本重設 */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
    }

    /* 產品容器（手機垂直排列，平板/桌面水平） */
    .widget-container {
      display: flex;
      flex-direction: column;
      align-items: flex-start; /* 三產品靠左對齊 */
      gap: 1rem;
      width: 100%;
    }

    .product-widget {
      width: 100%;
      max-width: 300px;
      font-size: 14px;
    }

    /* 平板（768px–1023px） */
    @media (min-width: 768px) and (max-width: 1023px) {
      .widget-container {
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
      }
      .product-widget {
        flex: 1 1 45%;
        font-size: 18px;
      }
    }

    /* 桌面（1024px+） */
    @media (min-width: 1024px) {
      .widget-container {
        flex-direction: row;
        justify-content: space-around;
        gap: 2rem;
      }
      .product-widget {
        flex: 1 1 30%;
        font-size: 20px;
      }
    }

    /* 購物車通用樣式 */
    .ec-cart-widget {
      position: fixed;
      z-index: 1000;
    }

    /* 手機版：購物車固定在右側邊緣 */
    @media (max-width: 767px) {
      .ec-cart-widget {
        right: 0; /* 貼在網頁最右側邊緣 */
        top: 50%;
        transform: translateY(-50%);
        padding: 10px;
      }
    }

    /* 平板/桌面：購物車固定在中間右側 */
    @media (min-width: 768px) {
      .ec-cart-widget {
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  </style>
</head>
<body>

  
  <div class="widget-container">
    
    <div class="product-widget ecsp ecsp-SingleProduct-v2 ecsp-SingleProduct-v2-bordered ecsp-SingleProduct-v2-centered ecsp-Product ec-Product-734086252" itemscope itemtype="http://schema.org/Product" data-single-product-id="734086252">
      <div itemprop="image"></div>
      <div class="ecsp-title" itemprop="name" content="全民英檢初級影片寫作班"></div>
      <div itemtype="http://schema.org/Offer" itemscope itemprop="offers">
        <div class="ecsp-productBrowser-price ecsp-price" itemprop="price" content="5500" data-spw-price-location="button">
          <div itemprop="priceCurrency" content="TWD"></div>
        </div>
      </div>
      <div customprop="options"></div>
      <div customprop="qty"></div>
      <div customprop="addtobag"></div>
      <div customprop="vatinprice"></div>
    </div>
    <script data-cfasync="false" type="text/javascript" src="https://app.ecwid.com/script.js?114031002&data_platform=singleproduct_v2" charset="utf-8"></script>
    <script type="text/javascript">xProduct()</script>

    
    <div class="product-widget ecsp ecsp-SingleProduct-v2 ecsp-SingleProduct-v2-bordered ecsp-SingleProduct-v2-centered ecsp-Product ec-Product-738957003" itemscope itemtype="http://schema.org/Product" data-single-product-id="738957003">
      <div itemprop="image"></div>
      <div class="ecsp-title" itemprop="name" content="全民英檢中級影片寫作班"></div>
      <div itemtype="http://schema.org/Offer" itemscope itemprop="offers">
        <div class="ecsp-productBrowser-price ecsp-price" itemprop="price" content="6600" data-spw-price-location="button">
          <div itemprop="priceCurrency" content="TWD"></div>
        </div>
      </div>
      <div customprop="options"></div>
      <div customprop="qty"></div>
      <div customprop="addtobag"></div>
      <div customprop="vatinprice"></div>
    </div>
    <script data-cfasync="false" type="text/javascript">xProduct()</script>

    
    <div class="product-widget ecsp ecsp-SingleProduct-v2 ecsp-SingleProduct-v2-bordered ecsp-SingleProduct-v2-centered ecsp-Product ec-Product-734831014" itemscope itemtype="http://schema.org/Product" data-single-product-id="734831014">
      <div itemprop="image"></div>
      <div class="ecsp-title" itemprop="name" content="每堂 350點 特殊時段優惠"></div>
      <div itemtype="http://schema.org/Offer" itemscope itemprop="offers">
        <div class="ecsp-productBrowser-price ecsp-price" itemprop="price" content="16800" data-spw-price-location="button">
          <div itemprop="priceCurrency" content="TWD"></div>
        </div>
      </div>
      <div customprop="options"></div>
      <div customprop="qty"></div>
      <div customprop="addtobag"></div>
      <div customprop="vatinprice"></div>
    </div>
    <script data-cfasync="false" type="text/javascript">xProduct()</script>
  </div>

  
  <div class="ec-cart-widget" data-responsive="FALSE">
    <div data-fixed="TRUE"
         data-fixed-position="MIDDLE_RIGHT"
         data-fixed-shape="CIRCLE"
         data-horizontal-indent="30"
         data-vertical-indent="0"
         class="ec-cart-widget">
    </div>
  </div>

  
  <script data-cfasync="false" type="text/javascript" src="https://app.ecwid.com/script.js?114031002&data_platform=code" charset="utf-8"></script>
  <script>Ecwid.init();</script>
</body>
</html>