การแก้ไขหรือการลบปุ่มซื้อหรือตะกร้าสินค้าแบบฝังตัว

ข้อควรระวัง

นี่คือบทแนะนำการใช้งานขั้นสูงและไม่รองรับโดย Shopify ซึ่งจำเป็นต้องมีความรู้เกี่ยวกับภาษาในการออกแบบเว็บไซต์ เช่น HTML, CSS, JavaScript และ Liquid หากคุณต้องการความช่วยเหลือ สามารถว่าจ้าง Shopify Partner ได้

ปุ่มซื้อและตะกร้าสินค้าจะถูกสร้างขึ้นจากชุดโค้ดที่คุณคัดลอกมาจากส่วนผู้ดูแล Shopify และวางลงในแหล่งที่มา HTML ของเว็บเพจ ชุดโค้ดเหล่านี้จะเรียกว่าโค้ดฝังตัว หากคุณต้องการเปลี่ยนลักษณะหรือลักษณะการทำงานของปุ่มหรือตะกร้าสินค้า คุณต้องแก้ไขโค้ดฝังตัวที่เกี่ยวข้อง

ลบปุ่มซื้อ คอลเลกชันแบบฝังตัว หรือตะกร้าสินค้าแบบฝังตัว

ขั้นตอน:

1. เปิดแหล่งที่มาของ HTML ของเว็บเพจที่มีปุ่มซื้อ คอลเลกชันแบบฝังตัว หรือตะกร้าสินค้าแบบฝังตัว
2. ลบโค้ดฝังตัวทั้งหมดออกจากแหล่งที่มา HTML โดยเริ่มจาก<script data-shopify-buy-ui> และลงท้ายด้วย</script> สำหรับปุ่มซื้อ โค้ดฝังตัวจะมีลักษณะดังต่อไปนี้:

<script data-shopify-buy-ui>
   var scriptURL = "https://cndurl.com/buy-button-storefront.js";
    if (window.ShopifyBuy && window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      var script = document.createElement('script');
      script.async = true;
      script.src = scriptURL;
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
      script.onload = ShopifyBuyInit;
    }

    function ShopifyBuyInit() {
      var client = ShopifyBuy.buildClient({
        apiKey: 'your-api-key',
        domain: 'your-store.myshopify.com',
        appId: '6'
      });

      ShopifyBuy.UI.onReady(client).then(function (ui) {
        ui.createComponent('product', {
          id: 12345,
          options: {
            product: {
              buttonDestination: 'cart',
              contents: {
                description: true
              },
              text: {
                button: 'Add to Cart'
              },
              styles: {
                button: {
                  'background-color': 'blue'
                }
              }
            },
            cart: {
              styles: {
                button: {
                  'background-color': 'orange'
                }
              }
            }
          }
        });
      });
    }
</script>

1. บันทึกการเปลี่ยนแปลง

ปุ่มซื้อ คอลเลกชันแบบฝังตัว หรือตะกร้าสินค้าแบบฝังตัวจะไม่ปรากฏบนเว็บเพจของคุณอีกต่อไป

แก้ไขปุ่มซื้อ

หากต้องการเปลี่ยนรูปลักษณ์หรือการตั้งค่าของปุ่มซื้อที่มีอยู่ คุณจำเป็นต้องแก้ไขโค้ดฝังตัวที่คุณได้เพิ่มไปยังแหล่งที่มา HTML ของคุณ

ปุ่มซื้อแต่ละปุ่มถูกสร้างจากส่วนประกอบที่แยกกันในโค้ดฝังตัว ตัวอย่างเช่น หากคุณเพิ่มสินค้าด้วยตะกร้าสินค้าไปยังเว็บเพจของคุณ จากนั้นโค้ดฝังตัวจะสร้างส่วนประกอบproduct ส่วนประกอบcart และส่วนประกอบตะกร้าสินค้าtoggle :

หากคุณต้องการให้องค์ประกอบสินค้าของคุณเปิดหน้าต่างโมดอลที่มีรายละเอียดสินค้า โค้ดฝังตัวจะสร้างองค์ประกอบmodal และองค์ประกอบmodalProduct :

ในโค้ดส่วนย่อยต่อไปนี้ จะมีองค์ประกอบแยกสำหรับproduct และcart:

ShopifyBuy.UI.onReady(client).then(function (ui) {
  ui.createComponent('product', {
    id: 12345,
    options: {
      product: {
        buttonDestination: 'cart',
        contents: {
          description: true
        },
        text: {
          button: 'Add to Cart'
        },
        styles: {
          button: {
            'background-color': 'blue'
          }
        }
      },
      cart: {
        styles: {
          button: {
            'background-color': 'orange'
          }
        }
      }
    }
  });
});

องค์ประกอบเหล่านี้มีการกำหนดค่าแยกกันผ่านการกำหนดค่าอ็อบเจกต์ในโค้ดฝังตัว คุณสามารถเปลี่ยนแปลงคุณลักษณะหรือพฤติกรรมของปุ่มซื้อของคุณได้โดยการแก้ไขกำหนดค่าอ็อบเจกต์ในโค้ดฝังตัว

เคล็ดลับ

ใน JavaScript อ็อบเจกต์คือชุดของคู่ค่าคีย์ ในรูปแบบ {key: value} คุณสามารถคิดว่าเป็นเหมือนกับสเปรดชีต: คีย์เหมือนกับชื่อคอลัมน์ และค่าเป็นเหมือนเนื้อหาของเซลล์

แต่ละองค์ประกอบมีหลายคุณสมบัติที่คุณสามารถแก้ไขได้ สำหรับรายการทั้งหมดของตัวเลือกที่แก้ไขได้ ดูเอกสารสำหรับผู้พัฒนาของเรา หากคุณต้องการกำหนดค่าตัวเลือกที่ไม่ปรากฏในโค้ดฝังตัวของคุณ คุณจำเป็นต้องเพิ่มคีย์ที่เหมาะสมไปยังอ็อบเจกต์ที่เหมาะสม (ดูตัวอย่าง)

แก้ไขรูปแบบขององค์ประกอบ

แต่ละองค์ประกอบมีการกำหนดค่าอ็อบเจกต์ซ้อนstyles ซึ่งคุณสามารถแก้ไขหรือเพิ่มเพื่อเปลี่ยนแปลงลักษณะของส่วนประกอบได้ รูปแบบเหล่านี้ได้รับการจัดรูปแบบคล้ายกับCSS แต่ละคีย์ระดับบนสุดในอ็อบเจกต์styles จะแสดงองค์ประกอบในส่วนประกอบ เช่น ชื่อหรือปุ่ม ในอ็อบเจกต์นี้ แต่ละคีย์จะเป็นคุณสมบัติของ CSS (เช่น 'สีพื้นหลัง ' หรือ ' ขอบ ') และค่าจะเป็นค่า CSS

options: {
  product: {
    styles: {
      button: {
        'background-color': 'red',
        'border-radius': '5px'
      }
    }
  }
}

สามารถเพิ่มคุณสมบัติของ CSS ที่ใช้งานได้ที่styles โปรดทราบว่าชื่อของคุณสมบัติที่มีขีดต้องอยู่ในเครื่องหมายคำพูด

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการปรับแต่ง CSS ดูที่เอกสารสำหรับผู้พัฒนา

ตัวอย่าง: แทนที่ลิงก์ไปยังตะกร้าสินค้าด้วยโมดอลรายละเอียดสินค้า

ในตัวอย่างนี้ คุณสามารถเปลี่ยนแปลงโค้ดฝังตัวปัจจุบันของคุณเพื่อนำลูกค้าของคุณไปยังโมดอลรายละเอียดสินค้าแทนตะกร้าสินค้าได้:

1. เปิด HTML ของหน้าที่มีสินค้าแบบฝังตัวที่คุณต้องการเปลี่ยนแปลง
2. ค้นหาการกำหนดค่าอ็อบเจกต์product
3. ค้นหาคีย์buttonDestination ในอ็อบเจกต์:

options: {
      product: {
        buttonDestination: 'cart'
      }
}

1. เปลี่ยนค่าของคีย์นั้นเป็น'modal' (ตรวจสอบให้แน่ใจว่าคุณรวมเครื่องหมายคำพูดด้วย):

options: {
      product: {
        buttonDestination: 'modal'
      }
}

1. บันทึกการเปลี่ยนแปลง

ตัวอย่าง: เปลี่ยนเลย์เอาต์ของสินค้าแบบฝังตัวของคุณ

ในตัวอย่างนี้ คุณสามารถเปลี่ยนเลย์เอาต์ของสินค้าแบบฝังตัวเพื่อให้รูปภาพปรากฏที่ด้านข้างแทนด้านบน:

1. เปิด HTML ของหน้าที่มีสินค้าแบบฝังตัวที่คุณต้องการเปลี่ยนแปลง
2. ค้นหาการกำหนดค่าอ็อบเจกต์product
3. เพิ่มคีย์ layout แล้วตั้งค่าเป็น'horizontal':

options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}

<aside class="note">
<h4>หมายเหตุ</h4>
<p>When you add the <code>&#39;horizontal&#39;</code> value, make sure that it includes the quotation marks, and that the previous line ends with a comma.</p>
</aside>

1. บันทึกการเปลี่ยนแปลง

แก้ไขตะกร้าสินค้าของเว็บไซต์ของคุณ

หากคุณต้องการเปลี่ยนคุณลักษณะหรือพฤติกรรมของตะกร้าสินค้าของเว็บไซต์ คุณจำเป็นต้องcart แก้ไขการกำหนดค่าอ็อบเจกต์ในโค้ดฝังตัวของคุณ

ขั้นตอน:

1. เปิด HTML ของหน้าที่มีตะกร้าสินค้าที่คุณต้องการแก้ไข
2. ค้นหาการกำหนดค่าอ็อบเจกต์ในโค้ดฝังตัวของคุณ: cart

options: {
      cart: {
        startOpen: false
      }
}

1. แก้ไขหรือเพิ่มคุณสมบัติที่คุณต้องการเปลี่ยนแปลง หากต้องการดูรายการเต็มของคุณสมบัติที่กำหนดค่าได้ ให้ดูที่เอกสารสำหรับผู้พัฒนา
2. บันทึกการเปลี่ยนแปลง

แก้ไขคอลเลกชันแบบฝังตัว

การแก้ไขคอลเลกชันแบบฝังตัวจะคล้ายกับการแก้ไขสินค้าหรือตะกร้าสินค้า หากต้องการแก้ไขคุณสมบัติของสินค้าภายในคอลเลกชัน (ตัวอย่างเช่น เลย์เอาต์ของสินค้าแต่ละชิ้น) คุณจำเป็นต้องหาการกำหนดค่าอ็อบเจกต์product และแก้ไขในลักษณะเดียวกับที่คุณแก้ไขสินค้าแบบฝังตัว หากต้องการแก้ไขคุณสมบัติของคอลเลกชัน (ตัวอย่างเช่น ข้อความของปุ่มหน้าถัดไป) ให้แก้ไขคีย์ productSet แทน

คุณสมบัติบางอย่าง เช่น ข้อความขององค์ประกอบ มีการกำหนดค่าผ่านอ็อบเจกต์ที่ซ้อนกัน ซึ่งเป็นอ็อบเจกต์ที่ปรากฏอยู่ในอ็อบเจกต์อื่นๆ ตัวอย่างเช่น ข้อความสำหรับปุ่มหน้าถัดไปจะปรากฏขึ้นภายในองค์ประกอบproductSet ของอ็อบเจกต์text:

options: {
  productSet: {
    text: {
      nextPageButton: 'Continue'
    }
  }
}