Javascript export order #5324
Answered
by
nguyenvoanhkhoa1
nguyenvoanhkhoa1
asked this question in
Q&A
Javascript export order
#5324
-
|
My problem:
data return:
So if i want to get rating count, the wrapper base url trait value is "https://fakestoreapi.com/products/1" and the path of the dynamic-text is "rating.count". Then the script of the dynamic-text:
The script will add the attribute name "dynamic-text" to the text component, so the wrapper will select all the component base on that attribute, read then change the inner text. it work really good in the editor, but when i download the HTML, the problem is the script of the text is written after the wrapper, so the wrapper cant not detect the dynamic-text because the attribute is not set.
Any solution for this, or suggest a better way for me? |
Beta Was this translation helpful? Give feedback.
Answered by
nguyenvoanhkhoa1
Aug 22, 2023
Replies: 2 comments 4 replies
-
|
@artf can you help me, thanks in advance |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
I've solved it by writing data pattern in custom trait, so the logic of the pattern applies before the logic of the wrapper. Thanks. |
Beta Was this translation helpful? Give feedback.
Answer selected by
nguyenvoanhkhoa1
-
|
Xin chào, bạn cho mình xin source code tham khảo được không? |
Beta Was this translation helpful? Give feedback.
3 replies
-
|
Gửi bạn nha, nhớ cảm ơn mình :)) import { ComponentDefinition, Editor } from "grapesjs"
import $ from "jquery"
import { KarrotPluginOptions } from ".."
import { SRC_DEFAULT } from "../../../constants"
import { typeBorderLine } from "../borderLine"
export default function loadBlockProductList(
editor: Editor,
opt: KarrotPluginOptions
) {
let bm = editor.BlockManager
const dc = editor.DomComponents
const tm = editor.TraitManager
bm.add("ProductList", {
label: "Product list",
media: opt.media,
category: opt.categoryName,
attributes: { class: "" },
content: {
type: "product-list",
},
})
tm.addType("data-pattern", {
noLabel: false,
createLabel({ label }) {
const traitLabel = label || "Data pattern"
return `<div class="gjs-label" title="${traitLabel}">${traitLabel}</div>`
},
createInput({ trait }) {
const el = document.createElement("div")
el.innerHTML = `
<input type="text" placeholder="${trait.attributes.placeholder}">
`
return el
},
onEvent({ elInput, component, event }) {
const value = (elInput.querySelector("input") as HTMLInputElement).value
component.addAttributes({ "data-pattern": value })
component.getEl()?.setAttribute("data-pattern", value)
},
onUpdate({ elInput, component }) {
const initValue = component.attributes.attributes
? component.attributes.attributes["data-pattern"]
: ""
$(elInput).find(`input`).val(initValue)
},
})
dc.addType("dynamic-image", {
model: {
defaults: {
tagName: "img",
attributes: { src: SRC_DEFAULT.productThumb, alt: "" },
traits: [
{
type: "data-pattern",
name: "imagePattern",
label: "Image pattern",
placeholder: "Image pattern",
},
],
},
},
})
dc.addType("dynamic-text", {
model: {
defaults: {
type: "text",
tagName: "div",
attributes: {},
traits: [
{
type: "data-pattern",
name: "textPattern",
label: "Text pattern",
placeholder: "Text pattern",
},
],
},
},
})
dc.addType("product-list", {
model: {
defaults: {
name: "ProductList",
tagName: "section",
attributes: {
class: "product-list",
},
traits: [
{
type: "checkbox",
label: `Fetch data`,
name: "isFetch",
changeProp: true,
},
{
type: "url",
name: "categoryApiPath",
label: "Category API path",
changeProp: true,
placeholder: "Get category api path",
},
{
type: "url",
name: "productsApiPath",
label: "Products API path",
changeProp: true,
placeholder: "Get products api path",
},
],
components: [
{
tagName: "div",
selectable: false,
attributes: {
class: "filter",
},
components: [
{
tagName: "form",
attributes: { class: "filter__search-bar" },
components: [
{
type: "input",
tagName: "input",
attributes: {
class: "filter__search-input",
placeholder: "Search",
},
},
{
tagName: "span",
attributes: { class: "filter__search-icon" },
content: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.7" d="M9.5 3C11.2239 3 12.8772 3.68482 14.0962 4.90381C15.3152 6.12279 16 7.77609 16 9.5C16 11.11 15.41 12.59 14.44 13.73L14.71 14H15.5L20.5 19L19 20.5L14 15.5V14.71L13.73 14.44C12.59 15.41 11.11 16 9.5 16C7.77609 16 6.12279 15.3152 4.90381 14.0962C3.68482 12.8772 3 11.2239 3 9.5C3 7.77609 3.68482 6.12279 4.90381 4.90381C6.12279 3.68482 7.77609 3 9.5 3ZM9.5 5C7 5 5 7 5 9.5C5 12 7 14 9.5 14C12 14 14 12 14 9.5C14 7 12 5 9.5 5Z" fill="black"/>
</svg>`,
},
],
},
{
type: "text",
tagName: "h4",
attributes: { class: "filter__title" },
content: "FILTER:",
},
{
tagName: "div",
attributes: { class: "filter__wrapper" },
components: [
{
type: "text",
tagName: "h4",
attributes: { class: "filter__cat-name" },
content: "Categories",
},
{
tagName: "div",
attributes: { class: "filter__options" },
components: (() => {
return [
{ name: "Controls", value: "controls" },
{
name: "Building Management",
value: "building-management",
},
{ name: "Accessories", value: "accessories" },
{ name: "Interfaces", value: "interface" },
{
name: "Interface Accessory",
value: "interface-accessory",
},
].map((cat) => ({
tagName: "div",
attributes: { class: "filter__option" },
components: [
{
type: "checkbox",
attributes: {
name: "options",
id: `option-${cat.value}`,
value: cat.value,
class: "filter__option__checkbox",
},
},
{
type: "label",
attributes: {
for: `option-${cat.value}`,
class: "filter__option__label",
},
components: [
{ type: "textnode", content: cat.name },
],
},
],
}))
}) as unknown as ComponentDefinition[],
},
],
},
],
},
{
type: "container",
selectable: false,
attributes: {
class: "gjs-container main__container",
},
components: [
{
tagName: "div",
attributes: { class: "main__head-text" },
components: [
{
type: "text",
tagName: "h3",
attributes: { class: "main__head-title" },
content: "Welcome to the Somfy First Portal",
},
{
type: "text",
tagName: "h4",
attributes: { class: "main__head-subtitle" },
content:
"Here you can navigate the Somfy First Catalog, place orders for somfy<br>products, and check your order history",
},
],
},
{
type: typeBorderLine,
style: {
"margin-top": "1.25rem",
},
},
{
tagName: "div",
attributes: { class: "main__products" },
components: (() => {
return Array.from({ length: 1 }).map((item) => ({
type: "link",
tagName: "a",
attributes: {
class: "main__product",
"data-id": "{{id}}",
href: "/product.html",
},
components: [
{
type: "dynamic-image",
attributes: { class: "main__product-img" },
},
{
tagName: "div",
attributes: { class: "main__product-wrapper" },
components: [
{
tagName: "div",
components: [
{
type: "dynamic-text",
tagName: "div",
attributes: { class: "main__product-name" },
components: [
{
type: "textnode",
content:
"Drapery Adaptor for Power over Ethernet (PoE) Gateway",
},
],
},
{
type: "dynamic-text",
tagName: "div",
attributes: { class: "main__product-price" },
components: [
{ type: "textnode", content: "$19.98 USD" },
],
},
],
},
{
type: "button",
tagName: "button",
attributes: { class: "main__add-btn" },
components: [
{ type: "textnode", content: "Add To Cart" },
],
},
],
},
],
}))
}) as unknown as ComponentDefinition[],
},
],
},
],
isFetch: false,
categoryApiPath: "https://fakestoreapi.com/products/categories",
productsApiPath: "https://fakestoreapi.com/products",
"script-props": ["isFetch", "categoryApiPath", "productsApiPath"],
styles: `
.product-list {
display: flex;
background-color: #F3F5F8;
}
.filter {
width: 303px;
flex-shrink: 0;
border-right: 1px solid #E9E9E9;
padding: 40px;
display: flex;
flex-direction: column;
}
.filter__search-bar {
position: relative;
}
.filter__search-input {
display: flex;
width: 100%;
padding: 7px 14px 7px 48px;
gap: 10px;
border-radius: 7px;
border: 1px solid rgba(33, 37, 41, 0.60);
background-color: #FFF;
}
.filter__search-icon {
position: absolute;
top: 50%;
left: 14px;
transform: translateY(-50%);
}
.filter__title {
margin-top: 40px;
margin-bottom: 0px;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 25px;
text-transform: uppercase;
}
.filter__title {
margin-top: 60px;
display: flex;
flex-direction: column;
}
.filter__cat-name {
color: var(--subheader-text-color, #212529);
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 25px;
text-transform: uppercase;
}
.filter__options {
margin-top: 24px
}
.filter__option {
margin-top: 20px;
display: flex;
}
.filter__option__checkbox {
width: 24px;
height: 24px;
border-radius: 3px;
border: 1px solid var(--text-input, rgba(33, 37, 41, 0.60));
background-color: #FFF;
}
.filter__option__label {
margin-left: 12px;
color: var(--subheader-text-color, #212529);
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 25px;
}
.main__container {
padding: 84px 8px 100px;
display: flex;
flex-direction: column;
align-items: center;
}
.main__head-text {
text-align: center;
margin-bottom: 20px
}
.main__head-title {
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 140%;
text-transform: uppercase;
}
.main__head-subtitle {
margin-top: 20px;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 140%;
text-transform: uppercase;
}
.main__products {
margin-top: 55px;
display: grid;
gap: 45px;
grid-template-columns: repeat(3, minmax(0, 1fr));
width: 100%;
max-width: 920px;
}
.main__product {
display: flex;
flex-direction: column;
width: 100%;
border-radius: 10px;
border: 1px solid #E9E9E9;
background-color: #FFF;
overflow: hidden;
text-decoration: none;
}
.main__product-img {
width: 100%;
height: 180px;
flex-shrink: 0;
}
.main__product-wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px 20px 30px 20px;
height: 100%;
}
.main__product-name {
color: var(--bs-secondary);
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 22px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.main__product-price {
margin-top: 12px;
color: #212121;
font-size: 17px;
font-style: normal;
font-weight: 500;
line-height: 22px;
}
.main__add-btn {
margin-inline: auto;
max-width: 190px;
margin-top: 24px;
border-radius: 5px;
background-color: var(--bs-primary);
padding: 11px 48px;
gap: 10px;
border: none;
color: #FFF;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 20px;
text-transform: capitalize;
}
@media (min-width: 640px) {
}
@media (min-width: 768px) {
}
@media (min-width: 1024px) {
}
`,
script: function (props: any) {
const { isFetch, categoryApiPath, productsApiPath } = props
console.log(props)
let cart_data: { [key: string]: any }[] = []
let categories_data: any[] = []
let products_data: any[] = []
let debounceTimeout: any
const cartHeaderNumber = document.querySelector(
"#cart-number"
) as HTMLSpanElement
const optionsHTML = this.querySelector(".filter__options")
const productsHTML = this.querySelector(".main__products")
const searchInputHTML = this.querySelector(
".filter__search-input"
) as HTMLInputElement
const optionTemplate = optionsHTML.querySelector(".filter__option")
const productTemplate = productsHTML.querySelector(".main__product")
function applyTemplate(data: any, template: string): string {
return template.replace(
/\{\{([^}]+)\}\}/g,
(_, key) =>
key
.split(".")
.reduce((value: any, k: string) => value?.[k], data) || ""
)
}
const fetchCart = () => {
cart_data = JSON.parse(window.localStorage.getItem("cart") || "[]")
}
function updateCart() {
window.localStorage.setItem("cart", JSON.stringify(cart_data))
if (cartHeaderNumber) {
cartHeaderNumber.style.display = "flex"
cartHeaderNumber!.innerText = cart_data.length.toString()
}
}
const fetchCategoryList = () => {
// const optionTemplate = `
// <div class="option">
// <input type="checkbox" name="options" id="option-{{item}}" value="{{item}}">
// <label for="option-{{item}}">{{item}}</label>
// </div>`;
optionsHTML.innerHTML = ""
fetch(categoryApiPath)
.then((response) => response.json())
.then((data) => {
// console.log(data);
if (data?.length != 0) {
categories_data = data
categories_data.forEach((item) => {
const option = optionTemplate.cloneNode(true)
;(
option.querySelector("input") as HTMLInputElement
).id = `option-${item}`
;(option.querySelector("input") as HTMLInputElement).value =
item
;(
option.querySelector("label") as HTMLLabelElement
).htmlFor = `option-${item}`
;(
option.querySelector("label") as HTMLLabelElement
).innerText = item
// const optionHTML = optionTemplate.replace(/{{item}}/g, item);
optionsHTML.innerHTML += option.outerHTML
})
optionsHTML
.querySelectorAll(`input[type="checkbox"][name="options"]`)
.forEach(function (checkbox: HTMLInputElement) {
checkbox.addEventListener("click", function () {
document
.querySelectorAll(
`input[type="checkbox"][name="options"]`
)
.forEach(function (element) {
const groupCheckbox = element as HTMLInputElement
groupCheckbox.checked = false
})
checkbox.checked = true
// console.log(checkbox);
fetchProductList(checkbox.value)
})
})
}
})
}
const fetchProductList = (category = "", keyword = "") => {
// const productTemplate = `
// <a data-id="{{id}}" class="product" href="{{href}}"><img src="{{image}}">
// <div class="wrapper">
// <div>
// <div class="name">{{title}}</div>
// <div class="price">\${{price}} USD</div>
// </div><button class="add-btn">Add To Cart</button>
// </div>
// </a>`;
if (!products_data.length) productsHTML.innerHTML = ""
// console.log(productTemplate);
fetch(
`${productsApiPath}${
category ? "/category/" + category : ""
}?limit=15`
)
.then((response) => response.json())
.then((data) => {
// console.log(data);
if (data?.length != 0) {
products_data = data
productsHTML.innerHTML = ""
products_data.forEach((item) => {
const product = productTemplate.cloneNode(
true
) as HTMLLinkElement
product.setAttribute("data-id", item.id)
product.href = `/product.html?id=${item.id}`
product
.querySelectorAll("[data-pattern]")
.forEach((element) => {
const path = element.getAttribute(
"data-pattern"
) as string
if (element.tagName === "IMG")
(element as HTMLImageElement).src = applyTemplate(
item,
path
)
else element.innerHTML = applyTemplate(item, path)
})
//static fetch
// (product.querySelector("img") as HTMLImageElement).src = item.image;
// (product.querySelector(".name") as HTMLElement).innerText = item.title;
// (product.querySelector(".price") as HTMLElement).innerText = `$${item.price} USD`;
productsHTML.innerHTML += product.outerHTML
})
}
document
.querySelectorAll(".main__add-btn")
.forEach((button) => {
button.addEventListener("click", (e) => {
e.preventDefault()
const productCard = button.closest(
".main__product"
) as HTMLElement
const productId = productCard.getAttribute("data-id")
const productIndex = cart_data.findIndex(
(product) => product.productId == productId
)
if (productIndex !== -1) {
const newQuantity = cart_data[productIndex].quantity + 1
cart_data[productIndex].quantity = newQuantity
updateCart()
} else {
const newItem = {
productId: productId,
quantity: 1,
data: products_data.find(
(product) => product.id == productId
),
}
cart_data.unshift(newItem)
updateCart()
}
})
})
})
}
if (isFetch) {
console.log("A")
fetchCategoryList()
fetchProductList()
fetchCart()
}
searchInputHTML.addEventListener("input", function (evt) {
clearTimeout(debounceTimeout)
debounceTimeout = setTimeout(() => {
// fetchProductList("", this.value);
}, 1000)
})
},
},
init() {},
initData() {},
},
})
} |
Beta Was this translation helpful? Give feedback.
-
|
Tkss bạn nha, sẵn bạn cho mình hỏi có cách nào save code sang vuejs hay reactjs không bạn 😁 |
Beta Was this translation helpful? Give feedback.
-
|
Cái này mình follow lâu r, và mình biết có edit trên editor compnent của react thôi bạn, còn save mình chưa thử, search gg chắc có bạn nha |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I've solved it by writing data pattern in custom trait, so the logic of the pattern applies before the logic of the wrapper. Thanks.