Перемещение встроенного Javascript из компонента в файл Javascript для правильной компоновки с помощью Stencil CLI - PullRequest
Новая
       36

Перемещение встроенного Javascript из компонента в файл Javascript для правильной компоновки с помощью Stencil CLI

0 голосов
/ 04 октября 2019

Как мне переместить встроенный javascript из html-компонента в отдельный файл js, чтобы его можно было связывать и минимизировать?

Я редактирую BigCommerce и последнюю тему Cornerstone.

компонент представляет собой кнопку, которая добавляет 3 товара в корзину, отправив POST-запрос к API-интерфейсу магазина (он работает как задумано, мне просто нужно правильно переместить его в связке) 

<script>
    let lineItems = {
        "lineItems": [
            {
                "quantity": 1,
                "productId": 103
            },
            {
                "quantity": 1,
                "productId": 81
            },
            {
                "quantity": 1,
                "productId": 77,
                "variantId": 11
            }
        ]
    };

    function postData(url = ``, cartItems = {}) {
        return fetch(url, {
            method: "POST",
            credentials: "same-origin",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(cartItems),
        }).then(function (response) {
            redirectToCart();
        });
    }

    function redirectToCart() {
        window.location = "/cart.php";
    }

    function showLoadingOverlay() {
        document.getElementsByClassName("loadingOverlay").forEach(x => x.style.display = "block");
    }

    function addBundleToCart() {
        let cartID = "{{cart_id}}"
        let url = `/api/storefront/cart`;

        if (cartID.length > 0) {
            // cart wasn't empty, update url
            showLoadingOverlay();
            url = `/api/storefront/carts/${cartID}/items`
        }
        postData(url, lineItems)
            .then(data => console.log(JSON.stringify(data)))
            .catch(error => console.error(error));
    }
</script>

<button type="button" style="margin:0 auto;display:table; padding:20px; font-size: 1.5em; font-weight: bold; border: 3px solid rgba(128, 128, 128, 0.164)"
    onclick="addBundleToCart()" id="addToCart">ADD BUNDLE TO CART</button>

Iчитаю документацию и не очень понятно что делать. Я должен создать собственный шаблон, чтобы это работало? (Бренд, Категория, Страница, Продукт)

1 Ответ

1 голос
/ 04 октября 2019

Существует более одного способа справиться с этим, и я начну с того, как я бы порекомендовал в этих обстоятельствах:

Вы можете добавить часть кода своего кода в Витрию> Диспетчер сценариев и включить ее взаголовок страниц, где будет размещена кнопка. Возможно, вам придется поэкспериментировать с этим, насколько это будет работать лучше для вас. С оставшимся кодом для кнопки вы добавите его в файл темы .html, в котором вы хотите, чтобы кнопка появлялась, или в любое место, где принят HTML.

Если необходимо добавить это в связанную тему,Вы можете добавить файл .js в папку ресурсов и ссылаться на этот сценарий в файлах HTML, в которых используется кнопка. Я рекомендую взглянуть на помощников по рулю для инъекций, найденных здесь , в которых подробно описывается использование CDN для эффективной ссылки на ваш сценарий.

...