Trợ giúp
Đăng nhập

Tùy chỉnh hoặc xóa Nút Mua, bộ sưu tập tích hợp hoặc giỏ hàng nhúng

Bạn có thể thay đổi giao diện hoặc hành vi của Nút Mua, bộ sưu tập tích hợp hoặc giỏ hàng nhúng bằng cách chỉnh sửa mã nhúng của thành phần đó trong HTML nguồn của trang web. Bạn cũng có thể xóa thành phần nhúng bằng cách xóa mã khỏi trang web.

Nút Mua hiển thị sản phẩm cùng nút mua. Bộ sưu tập tích hợp hiển thị nhiều sản phẩm. Giỏ hàng nhúng hiển thị một giỏ hàng độc lập mà khách hàng có thể sử dụng trên nhiều trang.

Mã nhúng là đoạn mã bạn đã sao chép từ bảng điều khiển quản trị Shopify và dán vào HTML của trang web khi tạo Nút Mua hoặc giỏ hàng. Mã nhúng được viết bằng JavaScript, ngôn ngữ lập trình dùng để thêm các tính năng tương tác vào trang web.

Trên trang này

Tìm hiểu về mã nhúng Nút Mua

Mỗi Nút Mua được tạo thành từ các phần riêng biệt gọi là thành phần. Thành phần là một phần được đặt tên trong mã nhúng, kiểm soát một phần trải nghiệm Nút Mua. Ví dụ: khi bạn thêm sản phẩm có giỏ hàng vào trang web, mã nhúng sẽ tạo các thành phần sau:

  • thành phần product, hiển thị thông tin sản phẩm và nút mua
  • thành phần cart, hiển thị nội dung giỏ hàng
  • thành phần toggle giỏ hàng, hiển thị biểu tượng mở giỏ hàng

Nếu thành phần sản phẩm mở một cửa sổ bật lên chi tiết sản phẩm, thì mã nhúng sẽ tạo thêm hai thành phần: thành phần modal cho chính cửa sổ bật lên đó và thành phần modalProduct cho thông tin sản phẩm bên trong cửa sổ bật lên.

Trong đoạn mã sau, có các thành phần riêng biệt cho product và 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'
          }
        }
      }
    }
  });
});

Mỗi thành phần được định cấu hình qua đối tượng cấu hình trong mã nhúng. Đối tượng là một nhóm cài đặt có cấu trúc, được định dạng theo danh sách các cặp khóa-giá trị:

  • Khóa là tên của một cài đặt, ví dụ như buttonDestination.
  • Giá trị là nội dung được thiết lập cho cài đặt, ví dụ như 'cart'.

Một đối tượng tương tự như một bảng tính: mỗi khóa tương ứng với tên cột và mỗi giá trị tương ứng với nội dung của một ô. Để thay đổi giao diện hoặc hành vi của Nút Mua, hãy chỉnh sửa các khóa và giá trị bên trong đối tượng cấu hình.

Mỗi thành phần có nhiều khóa có thể chỉnh sửa. Để xem toàn bộ danh sách các khóa có thể chỉnh sửa, hãy xem tài liệu dành cho nhà phát triển. Để định cấu hình một khóa chưa có trong mã nhúng, hãy thêm khóa đó vào đối tượng phù hợp. Để xem ví dụ, hãy tham khảo phần Thay đổi bố cục của thành phần nhúng sản phẩm.

Tùy chỉnh kiểu của thành phần

Mỗi thành phần có một đối tượng cấu hình styles lồng nhau kiểm soát giao diện của thành phần đó. Đối tượng lồng nhau là một đối tượng được đặt bên trong một đối tượng khác.

Đối tượng styles sử dụng CSS, ngôn ngữ dùng để mô tả kiểu trình bày trực quan của các phần tử trên trang web. Mỗi khóa cấp cao nhất trong đối tượng styles đại diện cho một phần tử trong thành phần, ví dụ như tiêu đề hoặc nút. Trong khóa đó, mỗi khóa lồng nhau là một thuộc tính CSS (ví dụ: background-color hoặc border) và giá trị là một giá trị CSS.

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

Bất kỳ thuộc tính CSS hợp lệ nào cũng có thể được thêm vào styles. Đảm bảo tên thuộc tính có dấu gạch ngang được đặt trong dấu ngoặc kép.

Để biết thêm thông tin về tùy chỉnh CSS, hãy xem tài liệu dành cho nhà phát triển.

Thành phần của bộ sưu tập tích hợp

Các bộ sưu tập tích hợp sử dụng đối tượng cấu hình giống với Nút Mua. Để chỉnh sửa bố cục hoặc các thuộc tính khác của sản phẩm trong bộ sưu tập, hãy tìm đối tượng cấu hình product và chỉnh sửa đối tượng đó tương tự như cách bạn chỉnh sửa thành phần nhúng sản phẩm. Thay vào đó, để chỉnh sửa các thuộc tính của bản thân bộ sưu tập, chẳng hạn như văn bản của nút Trang tiếp theo, hãy chỉnh sửa đối tượng cấu hình productSet.

Một số khóa, chẳng hạn như văn bản của thành phần, được định cấu hình qua các đối tượng lồng nhau. Ví dụ: văn bản của nút Trang tiếp theo nằm trong đối tượng text của thành phần productSet:

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

Hộp tương tác chi tiết sản phẩm là cửa sổ bật lên hiển thị thông tin sản phẩm. Để hướng khách hàng đến hộp tương tác chi tiết sản phẩm thay vì giỏ hàng, hãy chỉnh sửa mã nhúng Nút Mua trong HTML nguồn trang web của bạn.

Các bước:

  1. Mở mã HTML của trang chứa mã nhúng sản phẩm cần thay đổi.
  2. Tìm đối tượng cấu hình product.
  3. Tìm khóa buttonDestination trong đối tượng:
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. Đổi giá trị của khóa đó thành 'modal', bao gồm cả dấu ngoặc kép:
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Lưu thay đổi.

Thay đổi bố cục của thành phần nhúng sản phẩm

Bố cục thành phần nhúng sản phẩm nằm ngang sẽ đặt hình ảnh bên cạnh thông tin chi tiết sản phẩm thay vì ở trên. Để chuyển sang bố cục này, hãy chỉnh sửa mã nhúng Nút Mua trong HTML nguồn của trang web.

Các bước:

  1. Mở mã HTML của trang chứa mã nhúng sản phẩm cần thay đổi.
  2. Tìm đối tượng cấu hình product.
  3. Thêm khóa layout, sau đó thiết lập giá trị thành 'horizontal'. Đảm bảo giá trị bao gồm dấu ngoặc kép và dòng trước đó kết thúc bằng dấu phẩy:
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}
  1. Lưu thay đổi.

Thay đổi giao diện và hành vi của giỏ hàng nhúng

Để thay đổi giao diện hoặc hành vi của giỏ hàng, hãy chỉnh sửa đối tượng cấu hình cart trong mã nhúng của bạn.

Các bước:

  1. Mở mã HTML của trang chứa giỏ hàng cần chỉnh sửa.
  2. Tìm đối tượng cấu hình cart trong mã nhúng:
options: {
      cart: {
        startOpen: false
      }
}
  1. Chỉnh sửa khóa hiện có hoặc thêm khóa mới để thay đổi giao diện hoặc hành vi của giỏ hàng. Để xem danh sách đầy đủ các khóa có thể cấu hình, hãy xem tài liệu dành cho nhà phát triển.
  2. Lưu thay đổi.

Xóa Nút Mua, bộ sưu tập tích hợp hoặc giỏ hàng nhúng

Để xóa Nút Mua, bộ sưu tập tích hợp hoặc giỏ hàng nhúng khỏi trang web, hãy xóa mã nhúng của thành phần đó khỏi HTML nguồn.

Các bước:

  1. Mở HTML nguồn của trang web chứa Nút Mua, bộ sưu tập tích hợp hoặc giỏ hàng nhúng.
  2. Xóa toàn bộ mã nhúng khỏi HTML nguồn, bắt đầu bằng <script data-shopify-buy-ui> và kết thúc bằng </script>. Sau đây là ví dụ về mã nhúng Nút Mua:
<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. Lưu thay đổi.