几天前，我的一位客户要求我将输入折扣码添加到购物车页面而不是结账页面，这样他们的客户就可以直接在购物车页面上添加优惠券代码。

PS：可以随时添加它，而不仅仅是在购物车页面上。

我不得不在两种选择之间做出选择，甚至是使用应用商店中的应用程序或自己构建它。我只是讨厌在 Shopify 商店上使用应用程序。所以我决定自己做。

我今天将与您分享如何在您的商店中实现这一目标。实现这一目标的简单步骤。

我会告诉你实现它的方法，你可以随心所欲地改进它。

让我们开始吧！

我们需要做的第一件事是找到包含购物车页面代码的 liquid 文件。

#Locate 购物车模板

• 从您的 Shopify 后台，转到在线商店>主题。
• 找到您要编辑的主题，然后单击操作>编辑代码。
• 在 Sections 目录中，单击cart-template.liquidOr main-cart-footer.liquid。这因主题而异，尝试在 sections 文件夹中识别文件，它可能是cart上面提到的词。
• 将下面的代码复制/粘贴到您想要将折扣输入添加到购物车的任何位置。
  {% render 'snippet-gf-discount-code' %}

#创建代码片段文件

• 现在，让我们创建代码片段文件，在边栏上找到代码片段文件夹并单击添加新代码片段：

• 在弹出窗口中，键入名称“ snippet-gf-discount-code.liquid”，如下所示

• 复制下方或此处的代码并将其粘贴到我们刚刚在上一步中创建的文件中。

{%comment%}
#############################################
#  Mohamed El-Ghorfi Discount Code on Cart  #
#           elghorfi.med@gmail.com          #
#############################################
{%endcomment%}

<style>
  #checkout-container{
    position: absolute;
    width: 0;
    height: 0;
    z-index: -1;
    display: none;
    opacity:0;
  }
  .cart-sidebar-discount {
    display: flex;
    flex-direction: column;
    width:300px;
  }
  .cart-sidebar-discount input{
    margin-top:20px;
    background: #eee;
    border: 1px solid #eee;
    height:50px;
    outline: none;
    font-size: 18px;
    letter-spacing: .75px;
    text-align: center;
  }
  #apply-discount-btn {
    background-color: #000;
    color:#fff;
    border: 0;
    height: 60px;
    width: 100%;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .75px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
  }
  span.discount-code-value>small {
    background: #eee;
    padding: 0px 10px;
    color: #000;
    font-weight: bold;
    border-radius: 20px;
  }
  small.discount-error-msg {
    color: #e22120;
    position: relative;
    font-size: 15px;
  }
  .loader{
    border: 5px solid #f3f3f3;
    border-top: 4px solid #000;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    animation: spin .5s linear infinite;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>

<div class="cart-sidebar-discount">
  <span class="discount-code">Discount Code <span class="discount-code-value"></span></span>
  <span id="discount-code-status"></span>
  <input type="text" id="discount-code" autocomplete="off">
  <button id="apply-discount-btn">APPLY</button>
</div>

<script>
  let applyBtn = document.querySelector("#apply-discount-btn");
  let discountCodeStatus = document.querySelector("#discount-code-status");
  let checkoutContainer = document.createElement('div');
  let discountCode = document.querySelector(".discount-code .discount-code-value");
  let discountCodeInput = document.querySelector("#discount-code");
  let totalCart = document.querySelector(".cart-sidebar-item span:last-child strong") // Total Cart Selector to update the total ammount. 
  checkoutContainer.id = "checkout-container";
  document.body.appendChild(checkoutContainer); 

  if (localStorage.discountCode) applyDiscount(localStorage.discountCode, "a")
  applyBtn.addEventListener("click", function(e){ 
      applyDiscount(discountCodeInput.value, "m");
  });

  function applyDiscount(code, action) {
    applyBtn.innerHTML += "<div class='loader'></div>";
    applyBtn.style.pointerEvents = "none";
    let discountApplyUrl = window.location.href+"/checkout?discount="+code+"&t="+Date.now();
    fetch(discountApplyUrl)
    .then(function(response) {
      return response.text();
    }).then(function(data) {
      let discountError = data.match('id="error-for-reduction_code"');
      checkoutContainer.innerHTML = data;
      let summary = checkoutContainer.querySelector(".sidebar");
      let total = checkoutContainer.querySelector(".payment-due__price").textContent.trim();
      if(discountError){
        let discountErrorMsg = summary.querySelector(".field__message.field__message--error").textContent.replace(" or gift card", ".");
        console.log(discountErrorMsg);
        discountCodeStatus.innerHTML = "<small class='discount-error-msg'>" + discountErrorMsg + "</small>";
        discountCodeInput.style.border = "1px solid red";
      }else{
        discountCodeInput.style.border = "";
        discountCode.innerHTML = ": <small>" + code.trim() + "</small>";
        localStorage.setItem("discountCode", code.trim());
        discountCodeStatus.innerHTML = ""
      }
      applyBtn.style.pointerEvents = "auto";
      totalCart.innerHTML = total;
      checkoutContainer.innerHTML = "";
      applyBtn.innerHTML = "APPLY";
    });
  }
</script>