Ai đó có thể vui lòng giúp tôi lấy đầu ra cho Mẫu không, cùng một đầu ra như gỡ lỗi hiển thị ngay sau nút yêu cầu http. tìm thấy vài bài viết tương tự ở đây, nhưng vẫn không thể có được công việc này
[
{
"id": "ec5233ca1116fa70",
"type": "http request",
"z": "f3698a3f6c8d8f2d",
"name": "",
"method": "GET",
"ret": "obj",
"paytoqs": "body",
"url": "//,
"tls": "",
"persist": false,
"proxy": "",
"authType": "",
"senderr": false,
"credentials": {},
"x": 370,
"y": 120,
"wires": [
[
"5716c988bbe9a686",
"2df1dbe73f69ab1d"
]
]
},
{
"id": "5716c988bbe9a686",
"type": "template",
"z": "f3698a3f6c8d8f2d",
"name": "",
"field": "payload",
"fieldType": "msg",
"format": "handlebars",
"syntax": "mustache",
"template": "\n\n \n \n \n\n Hello
\n {{payload.results[0].name}}\n \n",
"output": "str",
"x": 640,
"y": 120,
"wires": [
[
"f3e40b161b689c1a"
]
]
},
{
"id": "f3e40b161b689c1a",
"type": "debug",
"z": "f3698a3f6c8d8f2d",
"name": "",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload.results[0].name",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 900,
"y": 120,
"wires": []
},
{
"id": "874b0adc0efdef79",
"type": "inject",
"z": "f3698a3f6c8d8f2d",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "headers",
"v": "{\"content-type\": \"application/json\"}",
"vt": "json"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 180,
"y": 120,
"wires": [
[
"ec5233ca1116fa70"
]
]
},
{
"id": "2df1dbe73f69ab1d",
"type": "debug",
"z": "f3698a3f6c8d8f2d",
"name": "",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload.results[0].name",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 660,
"y": 220,
"wires": []
}
]
Jason Lengstorf. [0. 00] Để sản phẩm của chúng tôi hiển thị trên trang, giống như sản phẩm, chúng tôi sẽ sử dụng các mẫu html. Chúng tôi sẽ mở chỉ mục. html và ở giữa chính và tập lệnh, chúng tôi sẽ thêm một thẻ mẫu. Chúng tôi sẽ cung cấp cho nó một ID của sản phẩm, để chúng tôi biết cách tìm nó sau này
[0. 18] Bên trong, chúng tôi sẽ mã hóa một sản phẩm, vì vậy chúng tôi sẽ cung cấp cho nó một lớp học. Nó sẽ là một div cho loại sản phẩm. Bên trong đó, chúng tôi sẽ sử dụng một hình ảnh sẽ có nguồn và phần thay thế, nhưng chúng tôi sẽ không đặt chúng ngay bây giờ, hãy nhớ rằng đây là một mẫu
[0. 33] Sau đó, chúng tôi có h2, và đó là -- đây là tất cả dữ liệu giữ chỗ -- chúng tôi sẽ nói tên, sau đó là lớp mô tả. Chúng tôi chỉ có thể đưa vào mô tả, và bên dưới đó, chúng tôi sẽ bao gồm giá. Một lần nữa, đây là tất cả giữ chỗ
[0. 57] Tiếp theo, chúng tôi muốn có một cách để mọi người mua cái này. Chúng ta sẽ tạo một biểu mẫu. Biểu mẫu sẽ có một hành động và điều đó cuối cùng sẽ chuyển sang chức năng không có máy chủ của chúng tôi, nhưng ngay bây giờ, nó sẽ không làm gì cả
[1. 12] Hãy đặt phương thức thành POST. Bên trong biểu mẫu, hãy thêm nhãn và nhãn đó sẽ dành cho số lượng. Chúng tôi muốn mọi người có thể chọn bao nhiêu thứ họ sẽ mua. Sau đó, chúng tôi sẽ đặt đầu vào và đầu vào đó sẽ là một loại số. Chúng tôi sẽ đặt ID của số lượng để nó liên kết với nhãn
[1. 38] Đặt tên cho nó, cũng như số lượng. Một giá trị bắt đầu từ 1. Chúng tôi sẽ đặt Min thành 1. The Max, bạn có thể đặt cái này thành bất cứ thứ gì bạn muốn, nhưng chúng tôi sẽ đặt nó thành 10. Đó có vẻ là số lượng sản phẩm tối đa hợp lý
[1. 57] Sau đó, chúng tôi muốn một đầu vào ẩn. Cái đó sẽ có tên là sku và nó sẽ có một giá trị trống. Chúng tôi sẽ thiết lập lại điều đó, đó là một mẫu. Chúng ta sẽ thiết lập điều đó sau. Chúng tôi đã có nút của mình, đó sẽ là một loại gửi và giá trị sẽ là, Mua ngay
[2. 20] Đó là mẫu hoàn chỉnh của chúng tôi. Điều tiếp theo mà chúng ta cần làm là thực sự sử dụng mẫu đó. Bên trong sản phẩm tải. js, chúng ta sẽ tạo một chức năng mới. Hàm đó sẽ được gọi, createProductFromTemplate và sẽ nhận mục này làm đối số. Bên trong, chúng tôi sẽ lấy mẫu mà chúng tôi, vì vậy const template = document. bộ chọn truy vấn. Chúng tôi sẽ lấy ID sản phẩm
[2. 54] Sau đó, chúng ta cần tạo phiên bản của riêng mình về điều đó. Chúng tôi sẽ sao chép nội dung của mẫu đó. Đây là nút DOM mà chúng tôi đang tạo. Nó sẽ được gọi là sản phẩm. Chúng tôi có được điều đó bằng cách chạy mẫu. Nội dung. nhân bảnNode. Chúng tôi đặt đúng. Tôi không biết tại sao, nhưng đó là những gì MDN nói với chúng tôi. tôi tin họ
[3. 17] Chúng tôi đã đặt sản phẩm. Điều này đang làm, vì vậy chúng tôi đang lấy nội dung mẫu mà chúng tôi vừa tạo. Nội dung là div này, những gì thực sự bên trong mẫu. Chúng tôi tìm mẫu, chúng tôi lấy nội dung của nó và sau đó chúng tôi sao chép nó để chúng tôi có bản sao của riêng mình
[3. 33] Khi chúng tôi có bản sao của riêng mình, chúng tôi có thể bắt đầu sửa đổi mọi thứ. Chúng ta sẽ đi sản phẩm. querySelector h2. Sau đó, chúng tôi sẽ đặt văn bản bên trong thành mục của chúng tôi. Tên. Tiếp theo, chúng ta có thể đi đến mô tả. Chúng tôi muốn đó là mục. sự miêu tả. Sao chép lại
[3. 58] Bây giờ chúng tôi muốn thay đổi sku. Tôi đã không đặt một lớp cho phần tử ẩn này. Tôi có thể làm điều đó ở đây, nhưng điều tôi cũng có thể làm là nhắm mục tiêu theo tên của nó. Chúng ta sẽ sang tên sku. Tôi sẽ đặt giá trị của cái này thành item. sku. Sau đó, chúng tôi sẽ thiết lập sản phẩm. truy vấnSelector giá. Giá sẽ khác một chút, bởi vì bạn đang xử lý tiền
[4. 30] Chúng tôi sẽ sử dụng API Intl NumberFormat tích hợp. Điều này sẽ cho phép chúng tôi chỉ định cách chúng tôi muốn tiền tệ của mình được định dạng. Chúng tôi sẽ bắt đầu bằng cách chỉ định ngôn ngữ của chúng tôi. Chúng tôi sẽ sử dụng en-US. Sau đó, chúng tôi cung cấp một số tùy chọn
[4. 53] Phong cách mà chúng tôi muốn sử dụng là tiền tệ. Đơn vị tiền tệ mà chúng tôi đang sử dụng là bất kể đơn vị tiền tệ của mặt hàng đó là gì. Trong trường hợp của chúng tôi, đó sẽ là USD. Chúng tôi nhận lại một người trợ giúp. Chúng tôi sẽ ngay lập tức xâu chuỗi phương thức định dạng. Điều đó sẽ cho phép chúng tôi định dạng số tiền
[5. 13] Nếu chúng tôi xem dữ liệu của mình, dữ liệu của chúng tôi sẽ quay trở lại. Cái đó có số tiền là xu, vì vậy 1.000 xu. Lý do cho điều đó là số thập phân rất phức tạp trong JavaScript. Điều này cho phép chúng tôi tránh một số nhầm lẫn trong việc lưu trữ số lượng. Bây giờ chúng tôi biết rằng chúng tôi đang sử dụng USD, chúng tôi sẽ thực sự lấy mặt hàng. số tiền và chia cho 100 để chúng tôi nhận được đơn vị tiền tệ mà chúng tôi muốn
[5. 44] Sau đó, chúng tôi sẽ đặt nó cố định để chúng tôi biết rằng chúng tôi chỉ nhận được hai dấu thập phân, số xu. Chúng tôi không muốn bất kỳ phân số xu nào
[5. 53] Sau đó, chúng ta cần thiết lập hình ảnh. Chúng ta sẽ lấy hình ảnh đó ra, const image = product. queryselectorimage, và chúng ta sẽ thiết lập hình ảnh. nguồn đến mục. hình ảnh, hình ảnh. thay thế cho mục. tên, và sau đó chúng tôi sẽ trả lại toàn bộ điều đó. Chúng tôi sẽ trả lại sản phẩm
[6. 19] Chúng tôi đã tạo phiên bản mẫu của riêng mình với nội dung của nó dưới dạng nút DOM, sau đó chúng tôi đã đi vào và sửa đổi tất cả các chi tiết. Tiêu đề, mô tả, sku, giá và hình ảnh, sau đó chúng tôi sẽ trả về nút DOM đó từ chức năng này
[6. 34] Nếu chúng tôi xuống đây, chúng tôi có thể thay đổi điều này và thay vì chỉ thêm tất cả dữ liệu, chúng tôi có thể lặp qua nó, vì vậy dữ liệu. cho mỗi. Đó là sẽ cung cấp cho chúng tôi một mục. Chúng tôi sẽ lấy lại một sản phẩm bằng cách chạy chức năng đó và chuyển vào mục. Sau đó, chúng tôi sẽ lấy hộp chứa sản phẩm của mình và nối sản phẩm đó vào đó
[7. 03] Từ đây, chúng ta có thể ra ngoài, lưu nó, chạy Netlify Dev, mở ra. Bây giờ chúng ta có thể thấy rằng các sản phẩm của chúng ta đang ở trong. Họ chỉ thiếu phong cách. Chúng ta sẽ tiếp tục và thêm những phong cách đó. Hãy đi vào chính. css. Ở dưới cùng, chúng tôi sẽ thêm vào một lớp sản phẩm
[7. 23] Đó là cho trình bao bọc của chúng tôi. Đó sẽ là lưới hiển thị. Chúng tôi sẽ đặt khoảng cách là hai rems, các cột mẫu lưới và chúng tôi sẽ đặt khoảng cách đó để lặp lại hai cột và chúng tôi sẽ làm cho chúng có cùng chiều rộng phân số. FR không thực sự dành cho phân số, nhưng đó là cách tôi nhớ nó
[7. 45] Sau đó, chúng tôi sẽ đặt đỉnh lề là ba rems để giúp nó có không gian thở. Bên dưới đó, chúng ta sẽ nhắm mục tiêu hình ảnh, vì vậy hình ảnh sản phẩm. Chúng tôi chỉ muốn đảm bảo chiều rộng tối đa là 100 phần trăm để nó không làm mất thiết kế
[số 8. 01] Đối với biểu mẫu, căn chỉnh các mục theo đường cơ sở. Đây sẽ là lưới riêng của nó. Về cơ bản, chúng tôi đang thiết lập một lưới để sắp xếp các đầu vào khác nhau. Chúng tôi sẽ đặt khoảng cách là. 5 rem, sau đó chúng tôi sẽ chạy các cột mẫu lưới. Chúng tôi sẽ chỉ định những thứ này theo cách thủ công. Đây có lẽ là một cơn ác mộng về phản hồi, nhưng với mục đích của bản demo của chúng tôi, nó sẽ hoạt động tốt
[số 8. 32] Sau đó, chúng tôi muốn thiết lập đầu vào, đặt đường viền đó, một px, màu xanh mòng két để khớp với tiêu đề của chúng tôi. Chúng tôi sẽ cung cấp cho nó một bán kính đường viền để làm cho nó trông đẹp hơn một chút và chúng tôi sẽ đặt nó thành. 25 rem. Lý do tôi sử dụng rems là để nếu chúng ta thay đổi kích thước phông chữ cơ bản, tất cả những thứ khác sẽ thay đổi theo nó. Cỡ chữ, chiều cao dòng sẽ là 1. 25 rem, và phần đệm của chúng tôi cũng sẽ là. 25 rem
[9. 06] Điều cuối cùng mà chúng tôi muốn làm là tạo kiểu cho nút của chúng tôi. Nút sản phẩm của chúng ta sẽ có nền màu xanh mòng két. Nó sẽ không có đường viền, vì vậy chúng ta có thể đặt đường viền, không có đường viền nào. Chúng tôi muốn khớp bán kính đường viền đó thành. 25 rem và chúng tôi sẽ đặt màu thành màu trắng để chúng tôi có đủ độ tương phản để đọc
[9. 27] Kích thước phông chữ của chúng tôi sẽ là 1. 25 rem. Trọng lượng phông chữ, chúng tôi muốn nó nặng để dễ đọc. Chiều cao dòng của chúng tôi sẽ là 1. 25 rem, và phần đệm của chúng tôi cũng sẽ là. 25 rem
[9. 44] Nếu chúng tôi lưu cái này, tiếp tục, tải lại, bây giờ chúng tôi có màn hình sản phẩm cơ bản, được tạo kiểu tốt hơn từ dữ liệu JSON, được tải bởi chức năng không có máy chủ và được chèn vào tài liệu của chúng tôi bằng mẫu HTML và thêm một chút JavaScript