<div id='collection-component-1689801579801'></div>
<script type="text/javascript">
    /*<![CDATA[*/
    (function() {
        var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
        if (window.ShopifyBuy) {
            if (window.ShopifyBuy.UI) {
                ShopifyBuyInit();
            } else {
                loadScript();
            }
        } else {
            loadScript();
        }

        function loadScript() {
            var script = document.createElement('script');
            script.async = true;
            script.src = scriptURL;
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(
                script);
            script.onload = ShopifyBuyInit;
        }

        function ShopifyBuyInit() {
            var collectionId = <?php echo json_encode($collectionId); ?>;
            var client = ShopifyBuy.buildClient({
                domain: 'tienda-oficial-millonarios-fc.myshopify.com',
                storefrontAccessToken: '57c2ea937639c1c4708f4548a9e5fa70',
            });
            ShopifyBuy.UI.onReady(client).then(function(ui) {
                ui.createComponent('collection', {
                    id: collectionId,
                    node: document.getElementById('collection-component-1689801579801'),
                    moneyFormat: '%24%7B%7Bamount_with_comma_separator%7D%7D',
                    options: {
                        "product": {
                            "styles": {
                                "product": {
                                    "@media (min-width: 601px)": {
                                        "max-width": "calc(25% - 20px)",
                                        "margin-left": "20px",
                                        "margin-bottom": "50px",
                                        "width": "calc(25% - 20px)"
                                    },
                                    "img": {
                                        "height": "calc(100% - 15px)",
                                        "position": "absolute",
                                        "left": "0",
                                        "right": "0",
                                        "top": "0"
                                    },
                                    "imgWrapper": {
                                        "padding-top": "calc(75% + 15px)",
                                        "position": "relative",
                                        "height": "0"
                                    }
                                }
                            },
                            "buttonDestination": "modal",
                            "contents": {
                                "options": false
                            },
                            "text": {
                                "button": "Ver"
                            }
                        },
                        "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"
                                    }
                                }
                            },
                            "text": {
                                "button": "Agregar al carrito"
                            }
                        },
                        "option": {},
                        "cart": {
                            "text": {
                                "title": "",
                                "total": "Subtotal",
                                "empty": "No tienes productos en el carrito",
                                "notice": "",
                                "button": "Checkout"
                            },
                        },
                        "toggle": {}
                    },
                });
            });
        }
    })();
    /*]]>*/
</script>