การเพิ่มแบบฟอร์มในหน้าตะกร้าสินค้า Shopify เกิดข้อผิดพลาดด้านโค้ด

การเพิ่มฟอร์มในหน้าตะกร้าสินค้าเพื่อรวบรวมข้อมูลเพิ่มเติมจากลูกค้าทำให้เกิดข้อผิดพลาดของโค้ด Shopify

เมื่อใดก็ตามที่ผู้ใดก็ตามเพิ่มโค้ดตามเอกสารของ Shopify บนธีมบางตัว จะเกิดข้อผิดพลาดขึ้น

โค้ดฟอร์มหน้าตะกร้าสินค้า:

<div class="page-container">
<div class="form-container">
<h2>Special Order Instructions</h2>
<br>
<p class="cart-attribute__field">
<label for="name-on-item">Name on item</label>
<input id="name-on-item" type="text" name="attributes[Name on item]" value="{{ cart.attributes["Name on item"] }}">
</p>
<p class="cart-attribute__field">
<label for="name-colour-on-item">Name Colour on item</label>
<input id="name-colour-on-item" type="text" name="attributes[Name Colour on item]" value="{{ cart.attributes["Name Colour on item"] }}">
</p>
<p class="cart-attribute__field">
<label for="font">Font</label>
<input id="font" type="text" name="attributes[Font]" value="{{ cart.attributes["Font"] }}">
</p>
<p class="cart-attribute__field">
<label for="other-colours">Other colours</label>
<input id="other-colours" type="text" name="attributes[Other colours]" value="{{ cart.attributes["Other colours"] }}">
</p>
</div>

CSS:

/* Container for the entire page */
.page-container {
display: flex;
justify-content: flex-end; /* Align content to the right */
padding: 20px; /* Add some padding around the content */
width: 100%; /* Ensure the container spans the full width */
box-sizing: border-box; /* Include padding in the width calculation */
}

/* Container for the entire form */
.form-container {
max-width: 500px; /* Set a maximum width for the form */
padding: 20px;
background-color: #f9f9f9; /* Light grey background for contrast */
border: 1px solid #ddd; /* Subtle border */
border-radius: 8px; /* Rounded corners */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */
font-family: 'Arial', sans-serif; /* Clean and readable font */
text-align: right; /* Align text to the right within the form container */
width: 100%; /* Full width of the container on small screens */
box-sizing: border-box; /* Include padding in the width calculation */
}

/* Heading styling */
.form-container h2 {
text-align: center; /* Center the heading text */
margin-bottom: 20px; /* Space below the heading */
font-weight: bold; /* Bold text */
font-size: 18px; /* Slightly larger font size */
color: #333; /* Darker color for contrast */
}

/* Styling for form fields */
.cart-attribute__field {
display: flex;
justify-content: flex-end; /* Align items to the right */
margin-bottom: 20px; /* Space below each field */
}

/* Label styling */
.cart-attribute__field label {
font-weight: bold; /* Bold text */
color: #555; /* Slightly lighter than black */
font-size: 14px; /* Appropriate font size */
margin-right: 15px; /* Space between label and input */
text-align: right; /* Align text to the right */
line-height: 1.5; /* Better spacing between lines */
}

/* Input field styling */
.cart-attribute__field input {
padding: 10px; /* Added padding for comfort */
border: 1px solid #ccc; /* Soft border color */
border-radius: 4px; /* Rounded corners */
width: 250px; /* Fixed width for consistency */
box-sizing: border-box; /* Include padding and border in element's total width and height */
font-size: 14px; /* Font size for readability */
color: #333; /* Dark color for text */
background-color: #fff; /* White background */
}

/* Focus state for input fields */
.cart-attribute__field input:focus {
border-color: #007bff; /* Blue border on focus */
outline: none; /* Remove default outline */
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Blue shadow on focus */
}

/* Placeholder text styling */
.cart-attribute__field input::placeholder {
color: #999; /* Light grey color for placeholders */
}

/* Responsive Design for Mobile Devices */
@media (max-width: 768px) {
.page-container {
justify-content: center; /* Center the form on smaller screens */
}

.form-container {
max-width: 100%; /* Full width of the container on small screens */
padding: 15px; /* Reduced padding for smaller screens */
}

/* Adjust input field width for smaller screens */
.cart-attribute__field input {
width: 100%; /* Full width of the container */
}

/* Stack labels and inputs vertically */
.cart-attribute__field {
flex-direction: column; /* Stack labels and inputs */
align-items: flex-start; /* Align items to the start */
}

.cart-attribute__field label {
margin-right: 0; /* Remove margin to stack vertically */
margin-bottom: 8px; /* Space below the label */
}
}

และนี่คือข้อผิดพลาด:

"คุณสามารถเพิ่มรายการนี้ได้ทีละ"

โค้ดมาจากเอกสารของ Shopify:
https://ui-elements-generator.myshopify.com/pages/cart-attribute
(เพิ่มอย่างถูกต้องแล้ว แต่ยังคงมีข้อผิดพลาด)

สำหรับปัญหาข้างต้น เรากำลังใช้ทางเลือกอื่นแทน