A. Product Detail HTML
Đây là HTML của phần bên phải Product Image ở Product Detail Page (gồm từ Product Name đi xuống tới Add ons Product)
Lưu ý trong này có cái product-description là 2 khối, 1 khối bị ẩn ở desktop, 1 khối bị ẩn ở mobile, nên khi test code di chuyển phần tử thì chú ý.
<div class="product-meta">
<h1 class="product-title">Earth & Sky Planter 0</h1>
<div class="product-price" data-animation-role="content">
<div class="product-price-value">
$25.00
</div>
</div>
<div class="product-description hidden-md-down">
<p class="" style="white-space:pre-wrap;" data-rte-preserve-empty="true">Bring a touch of art to your table. Each ceramic cup is hand-painted with delicate floral <a href="#">test a link </a>patterns, making every piece unique. Ideal for gifting or adding color to your daily routine.</p><p class="" style="white-space:pre-wrap;" data-rte-preserve-empty="true"><span>Checkmate... I gave it a cold? I gave it a virus. A computer virus. We gotta burn the rain forest, dump toxic waste, pollute the air, and rip up the OZONE! 'Cause maybe if we screw up this planet enough, they won't want it anymore! Life finds a way. We gotta burn the rain forest, dump toxic waste, pollute the air, and rip up the OZONE! 'Cause maybe if we screw up this planet enough, they won't want it anymore! Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.</span></p>
</div>
<div class="product-variants" data-animation-role="content">
<div class="variant-option" data-variant-option-name="Size">
<div class="variant-option-title">
Size:
</div>
<div class="variant-select-wrapper" data-selected-value="Select Size">
<select name="variant-option-Size-select" class="show-placeholder">
<option class="unselected-option-value" value="">
Select Size
</option>
<option value="Extra Small">
Extra Small
</option>
<option value="Small">
Small
</option>
<option value="Medium">
Medium
</option>
<option value="Large">
Large
</option>
<option value="Extra Large">
Extra Large
</option>
</select>
</div>
</div>
<div class="variant-option" data-variant-option-name="Color">
<div class="variant-option-title">
Color:
</div>
<div class="variant-select-wrapper" data-selected-value="Select Color">
<select name="variant-option-Color-select" class="show-placeholder">
<option class="unselected-option-value" value="">
Select Color
</option>
<option value="Navy">
Navy
</option>
<option value="Blue">
Blue
</option>
<option value="Yellow">
Yellow
</option>
</select>
</div>
</div>
</div>
<div class="product-add-to-cart">
<div class="product-add-to-cart-layout-wrapper">
<div class="product-quantity-input-wrapper" data-animation-role="content">
<label class="quantity-label" for="product-quantity-input-689eef521dcd37215f490ac3">
Quantity:
</label>
<input id="product-quantity-input-689eef521dcd37215f490ac3" class="product-quantity-input" type="number" value="1" min="1" step="1" size="4" max="9999" aria-label="Quantity">
</div>
<div class="sqs-add-to-cart-button-wrapper" data-animation-role="button" style="visibility: visible;">
<button class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button sqs-button-element--primary" data-dynamic-strings="">
<div class="sqs-add-to-cart-button-inner">
<span class="add-to-cart-text">
Add To Cart
</span>
<span class="cart-loader"></span>
<span class="cart-added-text">Added!</span>
</div>
</button>
</div>
</div>
</div>
<div class="product-description hidden-md-up">
<p class="" style="white-space:pre-wrap;" data-rte-preserve-empty="true">Bring a touch of art to your table. Each ceramic cup is hand-painted with delicate floral <a href="#">test a link </a>patterns, making every piece unique. Ideal for gifting or adding color to your daily routine.</p><p class="" style="white-space:pre-wrap;" data-rte-preserve-empty="true"><span>Checkmate... I gave it a cold? I gave it a virus. A computer virus. We gotta burn the rain forest, dump toxic waste, pollute the air, and rip up the OZONE! 'Cause maybe if we screw up this planet enough, they won't want it anymore! Life finds a way. We gotta burn the rain forest, dump toxic waste, pollute the air, and rip up the OZONE! 'Cause maybe if we screw up this planet enough, they won't want it anymore! Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.</span></p>
</div>
<section class="product-add-ons"><div class="add-on-card">
<a class="add-on-thumbnail-link" href="/store/p/country-feast-set-3nybt-zczh5-7w375" aria-label="Feast Set 2">
<img data-src="https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/3ad9bcc1-c34a-44d5-895f-77c99edbb2a9/bdtxjz__fleur__42%2B1.jpg" data-image="https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/3ad9bcc1-c34a-44d5-895f-77c99edbb2a9/bdtxjz__fleur__42%2B1.jpg" data-image-dimensions="500x710" data-image-focal-point="0.5,0.5" alt="Feast Set 2" data-load="false" elementtiming="nbf-products-add-on-thumbnail" src="https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/3ad9bcc1-c34a-44d5-895f-77c99edbb2a9/bdtxjz__fleur__42%2B1.jpg" width="500" height="710" sizes="66px" class="add-on-thumbnail" style="display:block;object-position: 50% 50%;" srcset="https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/3ad9bcc1-c34a-44d5-895f-77c99edbb2a9/bdtxjz__fleur__42%2B1.jpg?format=100w 100w, https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/3ad9bcc1-c34a-44d5-895f-77c99edbb2a9/bdtxjz__fleur__42%2B1.jpg?format=300w 300w, https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/3ad9bcc1-c34a-44d5-895f-77c99edbb2a9/bdtxjz__fleur__42%2B1.jpg?format=500w 500w, https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/3ad9bcc1-c34a-44d5-895f-77c99edbb2a9/bdtxjz__fleur__42%2B1.jpg?format=750w 750w, https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/3ad9bcc1-c34a-44d5-895f-77c99edbb2a9/bdtxjz__fleur__42%2B1.jpg?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/3ad9bcc1-c34a-44d5-895f-77c99edbb2a9/bdtxjz__fleur__42%2B1.jpg?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/3ad9bcc1-c34a-44d5-895f-77c99edbb2a9/bdtxjz__fleur__42%2B1.jpg?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs"></a>
<div class="add-on-details">
<a href="/store/p/country-feast-set-3nybt-zczh5-7w375" class="add-on-title-link">
<div class="add-on-title">Feast Set 2</div>
</a>
<div class="product-price">
$0.00
</div>
</div>
<div class="add-on-add-to-cart-wrapper sqs-add-to-cart-button-wrapper" data-animation-role="button" style="visibility: visible;">
<button class="sqs-add-to-cart-button sqs-button-element--primary" data-dynamic-strings="">
<div class="sqs-add-to-cart-button-inner">
<span class="add-to-cart-text sr-only">
Add To Cart
</span>
<div class="icons-container">
<svg class="add-icon">
<use xlink:href="/assets/ui-icons.svg#plus-icon--odd"></use>
</svg>
<div class="loading-icon">
<div class="loading-dot"></div>
<div class="loading-dot"></div>
<div class="loading-dot"></div>
</div>
<svg class="complete-icon">
<use xlink:href="/assets/ui-icons.svg#checkmark-icon"></use>
</svg>
</div>
</div>
</button>
</div>
</div>
</section>
</div>
<style>
@media screen and (max-width: 767px ) {
.hidden-md-down {
display:none !important
}
}
@media screen and (min-width: 768px ) {
.hidden-md-up {
display:none !important
}
}
</style>
B. Product Detail Page
Product Name: h1.product-title
Product Price: .product-price hoặc .product-price-value
Product Description
- Desktop: .product-description.hidden-md-down
- Mobile: .product-description.hidden-md-up
Variant: div.product-variants
- Variant label: .variant-option-title
- Variant dropdown: .variant-select-wrapper
- Variant dropdown option: .variant-select-wrapper select
- Variant dropdown selected text: .product-variants .variant-select-wrapper:before
Quantity: .product-quantity-input-wrapper
- Quantity label: label.quantity-label
- Quantity Input: input.product-quantity-input
Add to Cart: .sqs-add-to-cart-button-wrapper
- add to cart button: button.sqs-add-to-cart-button
- add to cart text: span.add-to-cart-text
- added text: span.cart-added-text
- spin icon: span.cart-loader
C. Related Product
Related Label: h2.product-related-products-title
Related product list: .product-related-products.product-list .product-list-container
Related product image: .product-related-products figure.product-list-item-image
Related product title: .product-related-products .product-list-item-title
Related product price: .product-related-products .product-list-item-price