Hola,
¿Alguien por favor me podría indicar si puedo personalizar el código que me da Shopify desde el BUY BUTTON? Es decir, quiero cambiar el orden de los elementos y por ejemplo, añadir el botón "AGREGAR AL CARRITO" junto al de COMPRAR.
< centro >
< div id = "prxxxxxxxxxxx" > < / div >
< script type = "text / javascript" >
/ * <! [CDATA [* /
( function ( ) {
var scriptURL = 'https: //sdks.shopifycdn .com / buy-button / latest / buy-button-storefront.min.js ' ;
if ( ventana . ShopifyBuy ) {
if ( ventana . ShopifyBuy . UI ) {
ShopifyBuyInit ( );
} else {
loadScript ( ) ;
}
} else {
loadScript ( ) ;
}
función loadScript ( ) {
var script = documento . createElement ( 'secuencia de comandos' ) ;
guión . async = verdadero ;
guión . src=scriptURL ;
( documento . getElementsByTagName ( 'cabeza' )[ 0 ] || documento . getElementsByTagName ( 'cuerpo' ) [ 0 ] ) . appendChild ( secuencia de comandos ) ;
guión . onload = ShopifyBuyInit ;
}
función ShopifyBuyInit ( ) {
cliente var = ShopifyBuy . buildClient ( {
dominio : 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ,
storefrontAccessToken : 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' ,
} ) ;
ShopifyBuy . UI . onReady ( cliente ) . luego ( function ( ui ) {
ui . createComponent ( 'product' , {
id : 'xxxxxxxxxxxxxxxx' ,
node : document . getElementById ( 'product-component-xxxxxxxxxxxxxxxx' ) ,
moneyFormat : '% 24% 7B% 7Bamount_with_comma_separator% 7D% 7D ',
opciones : {
"product" : {
"styles" : {
"product" : {
"@media (min-width: 601px)" : {
"max-width" : "calc (25% - 20px)" ,
"margin -left " : " 20px " ,
" margin-bottom " : " 50px "
} ,
" carrusel-button " : {
" display " : " none "
}
} ,
" title " : {
" color " : "# 000000" ,
"espacio entre letras" : "2px",
"font-weight": "100",
"font-family": "Acumin_Variable_Concept, sans-serif",
"font-size": "16px"
},
"button": {
"font-family": "Avant Garde, sans-serif",
":hover": {
"background-color": "#000000"
},
"background-color": "#000000",
":focus": {
"background-color": "#000000"
}
},
"price": {
"color": "#000000"
},
"compareAt": {
"color": "#000000"
},
"unitPrice": {
"color": "#000000"
}
},
"buttonDestination": "checkout",
"contents": {
"img": false,
"imgWithCarousel": true,
"button": false,
"buttonWithQuantity": true
},
"text": {
"button": "COMPRAR"
}
},
"productSet": {
"styles": {
"products": {
"@media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"button": false,
"buttonWithQuantity": true
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
},
"button": {
"font-family": "Avant Garde, sans-serif",
":hover": {
"background-color": "#000000"
},
"background-color": "#000000",
":focus": {
"background-color": "#000000"
}
},
"title": {
"font-family": "Acumin_Variable_Concept, sans-serif",
"font-weight": "bold",
"font-size": "26px",
"color": "#4c4c4c"
},
"price": {
"font-family": "Acumin_Variable_Concept, sans-serif",
"font-weight": "normal",
"font-size": "18px",
"color": "#4c4c4c"
},
"compareAt": {
"font-family": "Acumin_Variable_Concept, sans-serif",
"font-weight": "normal",
"font-size": "15.299999999999999px",
"color": "#4c4c4c"
},
"unitPrice": {
"font-family": "Acumin_Variable_Concept, sans-serif",
"font-weight": "normal",
"font-size": "15.299999999999999px",
"color": "#4c4c4c"
}
},
"text": {
"button": "Add to cart"
}
},
"option": {},
"cart": {
"styles": {
"button": {
"font-family": "Acumin_Variable_Concept, sans-serif",
":hover": {
"background-color": "#000000"
},
"background-color": "#000000",
":focus": {
"background-color": "#000000"
}
}
},
"text": {
"total": "Subtotal",
"button": "Checkout"
},
"popup": false
},
"toggle": {
"styles": {
"toggle": {
"font-family": "Acumin_Variable_Concept, sans-serif",
"background-color": "#000000",
":hover": {
"background-color": "#000000"
},
":focus": {
"background-color": "#000000"
}
}
}
}
} ,
} ) ;
} ) ;
}
} ) ( ) ;
/ *]]> * /
< / script >
< / center >
Gracias.
