Chỉnh sửa hoặc xóa Nút Mua hoặc giỏ hàng tích hợp

Cẩn trọng

Đây là hướng dẫn nâng cao và không được Shopify hỗ trợ. Bạn cần có kiến thức về các ngôn ngữ thiết kế web như HTML, CSS, JavaScript và Liquid. Nếu cần trợ giúp, bạn có thể thuê Đối tác của Shopify.

Nút Mua và giỏ hàng được tạo từ đoạn mã bạn sao chép từ trang quản trị Shopify và dán vào mã nguồn HTML của trang web. Những đoạn mã này được gọi là mã nhúng. Nếu muốn thay đổi giao diện hoặc hành vi của nút hoặc giỏ hàng, bạn cần chỉnh sửa mã nhúng có liên quan.

Lưu ý

Những hướng dẫn này áp dụng cho mã nhúng Nút Mua mà bạn đã tạo sau ngày 26 tháng 9 năm 2016. Nếu muốn thay đổi mã nhúng tạo trước ngày này, bạn cần làm theo hướng dẫn cũ. Bạn cũng có thể tạo mã nhúng bằng cách sử dụng kênh bán hàng Nút Mua.

Nếu bạn không chắc chắn bạn có phiên bản nào của mã nhúng, hãy kiểm tra xem mã có bắt đầu bằng <script data-shopify-buy-ui> hay không. Nếu có, tức là bạn có phiên bản mới nhất. Nếu bắt đầu bằng <div data-emebd_type=... hoặc loại thẻ <div> khác, đó là phiên bản cũ.

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

Các bước thực hiện:

1. Mở HTML nguồn của trang web có chứa Nút Mua, bộ sưu tập tích hợp hoặc giỏ hàng tích hợp.
2. Xóa toàn bộ mã nhúng từ mã HTML nguồn, bắt đầu bằng <script data-shopify-buy-ui> và kết thúc bằng </script>. Đối với Nút Mua, mã nhúng giống mã sau:

<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.

Nút Mua, bộ sưu tập tích hợp hoặc giỏ hàng tích hợp sẽ không còn xuất hiện trên trang web của bạn nữa.

Chỉnh sửa Nút Mua

Để thay đổi giao diện hoặc cài đặt của Nút Mua hiện tại, bạn cần chỉnh sửa mã nhúng đã thêm vào HTML nguồn.

Mỗi Nút Mua được tạo từ các thành phần riêng biệt trong mã nhúng. Ví dụ: Nếu bạn thêm một sản phẩm có giỏ hàng vào trang web, mã nhúng sẽ tạo thành phần product, thành phần cart và thành phần toggle giỏ hàng:

Nếu bạn muốn thành phần sản phẩm của bạn mở cửa sổ hộp thoại thông tin chi tiết sản phẩm, mã nhúng sẽ tạo thành phần modal và thành phần modalProduct:

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

Các thành phần này được định cấu hình riêng qua các đối tượng cấu hình trong mã nhúng. Bạn có thể thay đổi giao diện hoặc hành vi của Nút Mua bằng cách chỉnh sửa các đối tượng cấu hình trong mã nhúng.

Mẹo

Trong JavaScript, một đối tượng là tập hợp các cặp khóa-giá trị, có định dạng {key: value}. Bạn có thể coi đối tượng này như bảng tính: khóa giống như tên cột và giá trị giống như nội dung của ô.

Mỗi thành phần có nhiều thuộc tính bạn có thể chỉnh sửa. Để biết danh sách đầy đủ các tùy chọn có thể chỉnh sửa, xem tài liệu dành cho nhà phát triển của chúng tôi. Nếu bạn muốn định cấu hình một tùy chọn chưa xuất hiện trong mã nhúng, bạn cần thêm khóa thích hợp cho đối tượng thích hợp (xem ví dụ).

Chỉnh sửa kiểu thành phần

Mỗi thành phần có một đối tượng cấu hình styles lồng nhau, bạn có thể chỉnh sửa hoặc thêm để thay đổi giao diện của thành phần. Những phong cách này được định dạng giống như CSS. Mỗi khóa cấp cao nhất trong đối tượng styles thể hiện một yếu tố trong thành phần, như tiêu đề hoặc nút. Trong đối tượng này, mỗi khóa là một thuộc tính CSS (ví dụ: 'màu-nền' hoặc "đường-viền") và giá trị là một giá trị CSS.

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

Có thể thêm bất kỳ tài sản CSS hợp lệ vào styles. Lưu ý rằng tên tài sản có dấu gạch ngang phải nằm trong dấu ngoặc kép.

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

Ví dụ: Thay thế liên kết đến giỏ hàng bằng hộp thoại thông tin chi tiết sản phẩm

Trong ví dụ này, bạn có thể thay đổi mã nhúng hiện tại để chuyển hướng khách hàng đến một hộp thoại thông tin chi tiết sản phẩm thay vì giỏ hàng:

1. Mở HTML của trang chứa mã nhúng sản phẩm bạn muố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. Thay đổi giá trị của khóa đó thành 'modal' (hãy nhớ có dấu ngoặc kép):

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

1. Lưu thay đổi.

Ví dụ: Thay đổi bố cục của sản phẩm tích hợp

Trong ví dụ này, bạn có thể thay đổi bố cục của sản phẩm tích hợp để hình ảnh xuất hiện ở bên cạnh thay vì trên cùng:

1. Mở HTML của trang chứa mã nhúng sản phẩm bạn muốn thay đổi.
2. Tìm đối tượng cấu hình product.
3. Thêm một khóa layout, rồi đặt giá trị thành 'horizontal':

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

<aside class="note">
<h4>Lưu ý</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. Lưu thay đổi.

Chỉnh sửa giỏ hàng trang web

Nếu muốn thay đổi giao diện hoặc hành vi của giỏ hàng trên trang web, bạn cần chỉnh sửa đối tượng cấu hình cart trong mã nhúng.

Các bước thực hiện:

1. Mở HTML của trang chứa giỏ hàng bạn muố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 hoặc thêm thuộc tính bạn muốn thay đổi. Để biết danh sách đầy đủ các thuộc tính có cấu hình, xem tài liệu dành cho nhà phát triển.
2. Lưu thay đổi.

Chỉnh sửa bộ sưu tập tích hợp

Chỉnh sửa bộ sưu tập tích hợp giống như chỉnh sửa sản phẩm hoặc giỏ hàng. Để chỉnh sửa thuộc tính của các sản phẩm trong bộ sưu tập (ví dụ: bố cục của từng sản phẩm), bạn cần tìm đối tượng cấu hình product và chỉnh sửa giống như cách bạn chỉnh sửa sản phẩm được tích hợp. Để chỉnh sửa các thuộc tính của bộ sưu tập (ví dụ: văn bản của nút Next page (Trang tiếp theo)), bạn cần chỉnh sửa khóa productSet.

Một số thuộc tính, ví dụ như văn bản của một thành phần, được định cấu hình qua các đối tượng lồng nhau, đây là những đối tượng xuất hiện bên trong các đối tượng khác. Ví dụ: Văn bản cho nút Next page (Trang tiếp theo) sẽ xuất hiện bên trong đối tượng của text thành phần productSet:

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