Настройка или удаление кнопки «Купить», встроенной коллекции или встроенной корзины

Вы можете изменить внешний вид или поведение кнопки «Купить», встроенной коллекции или встроенной корзины, отредактировав код для вставки в исходном HTML-коде вашей веб-страницы. Вы также можете удалить встроенный элемент, убрав код с вашей веб-страницы.

Кнопка «Купить» отображает товар с кнопкой покупки. Встроенная коллекция отображает несколько товаров. Встроенная корзина отображает отдельную корзину, которую клиенты могут использовать на разных страницах.

Код для вставки — это фрагмент кода, который вы скопировали из панели администратора Shopify и вставили в HTML-код своей веб-страницы при создании кнопки «Купить» или корзины. Код для вставки написан на JavaScript — языке программирования, используемом для добавления интерактивных функций на веб-страницы.

На этой странице

О коде для вставки кнопки «Купить»

Каждая кнопка «Купить» состоит из отдельных частей, называемых компонентами. Компонент — это именованный раздел кода для вставки, который управляет одной частью функциональности кнопки «Купить». Например, когда вы добавляете на свою веб-страницу товар с корзиной, код для вставки генерирует следующие компоненты:

компонент product, который отображает информацию о товаре и кнопку покупки
компонент cart, который отображает содержимое корзины
компонент toggle корзины, который отображает значок для открытия корзины

Если компонент вашего товара открывает всплывающее окно с данными о товаре, код для вставки сгенерирует два дополнительных компонента: компонент modal для самого всплывающего окна и компонент modalProduct для информации о товаре внутри всплывающего окна.

В следующем фрагменте кода представлены отдельные компоненты для product и cart:

ShopifyBuy.UI.onReady(client).then(function (ui) {
  ui.createComponent('product', {
    id: 12345,
    options: {
      product: {
        buttonDestination: 'cart',
        contents: {
          description: true
        },
        text: {
          button: 'Add to Cart'
        },
        styles: {
          button: {
            'background-color': 'blue'
          }
        }
      },
      cart: {
        styles: {
          button: {
            'background-color': 'orange'
          }
        }
      }
    }
  });
});

Каждый компонент настраивается с помощью объекта конфигурации в коде для вставки. Объект представляет собой структурированную группу настроек в виде списка пар «ключ-значение»:

Ключ — это название настройки, например buttonDestination.
Значение — это то, какое значение задано для настройки, например 'cart'.

Объект похож на электронную таблицу: каждый ключ соответствует названию столбца, а каждое значение — содержимому ячейки. Чтобы изменить внешний вид или поведение кнопок «Купить», отредактируйте ключи и значения в объектах конфигурации.

Каждый компонент имеет множество редактируемых ключей. Полный список редактируемых ключей см. в документации для разработчиков. Чтобы настроить ключ, которого еще нет в вашем коде для вставки, добавьте этот ключ в соответствующий объект. Пример см. в разделе Изменение макета встроенного товара.

Настройка стилей компонентов

В каждом компоненте есть вложенный объект конфигурации styles, который управляет внешним видом компонента. Вложенный объект — это объект, помещенный внутрь другого объекта.

В объекте styles используется CSS — язык описания визуального стиля элементов веб-страницы. Каждый ключ верхнего уровня в объекте styles представляет элемент в компоненте, например заголовок или кнопку. Внутри этого ключа каждый вложенный ключ является свойством CSS (например, background-color или border), а значение — значением CSS.

options: {
  product: {
    styles: {
      button: {
        'background-color': 'red',
        'border-radius': '5px'
      }
    }
  }
}

В styles можно добавить любое допустимое свойство CSS. Убедитесь, что названия свойств с дефисами заключены в кавычки.

Для получения дополнительной информации о настройке CSS см. документацию для разработчиков.

Компоненты встроенной коллекции

Во встроенных коллекциях используются те же объекты конфигурации, что и для кнопок «Купить». Чтобы изменить макет или другие свойства товаров в коллекции, найдите объект конфигурации product и отредактируйте его так же, как вы бы редактировали встроенный товар. Чтобы изменить свойства самой коллекции, например текст кнопки Следующая страница, отредактируйте объект конфигурации productSet.

Некоторые ключи, такие как текст компонента, настраиваются через вложенные объекты. Например, текст кнопки Следующая страница находится внутри объекта text компонента productSet:

options: {
  productSet: {
    text: {
      nextPageButton: 'Continue'
    }
  }
}

Модальное окно с данными о товаре — это всплывающее окно, в котором отображается информация о товаре. Чтобы перенаправить клиента в модальное окно с данными о товаре, а не в корзину, отредактируйте код для вставки кнопки «Купить» в исходном HTML-коде вашей веб-страницы.

Шаги:

Откройте HTML-код страницы, содержащей встраиваемый товар, который вы хотите изменить.
Найдите объект конфигурации product.
Найдите в объекте ключ buttonDestination:

options: {
      product: {
        buttonDestination: 'cart'
      }
}

Измените значение этого ключа на 'modal', включая кавычки:

options: {
      product: {
        buttonDestination: 'modal'
      }
}

Сохраните изменения.

Изменение макета встроенного товара

При горизонтальном макете встроенного товара изображение располагается рядом с данными о товаре, а не над ними. Чтобы переключиться на этот макет, отредактируйте код для вставки кнопки «Купить» в исходном HTML-коде вашей веб-страницы.

Шаги:

Откройте HTML-код страницы, содержащей встраиваемый товар, который вы хотите изменить.
Найдите объект конфигурации product.
Добавьте ключ layout и установите значение 'horizontal'. Убедитесь, что значение включает кавычки, а предыдущая строка заканчивается запятой:

options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}

Сохраните изменения.

Изменение внешнего вида и поведения встроенной корзины

Чтобы изменить внешний вид или поведение корзины, отредактируйте объект конфигурации cart в вашем коде для вставки.

Шаги:

Откройте HTML-код страницы, содержащей корзину, которую вы хотите отредактировать.
Найдите объект конфигурации cart в вашем коде для вставки:

options: {
      cart: {
        startOpen: false
      }
}

Отредактируйте существующий ключ или добавьте новый, чтобы изменить внешний вид или поведение корзины. Полный список настраиваемых ключей см. в документации для разработчиков.
Сохраните изменения.

Удаление кнопки «Купить», встроенной коллекции или встроенной корзины

Чтобы удалить кнопку «Купить», встроенную коллекцию или встроенную корзину со своей веб-страницы, удалите её код для вставки из исходного HTML-кода.

Шаги:

Откройте исходный HTML-код веб-страницы, на которой находится кнопка «Купить», встроенная коллекция или встроенная корзина.
Удалите весь код для вставки из исходного HTML-кода, начиная с <script data-shopify-buy-ui> и заканчивая </script>. Ниже приведен пример кода для вставки кнопки «Купить»:

<script data-shopify-buy-ui>
   var scriptURL = "https://cndurl.com/buy-button-storefront.js";
    if (window.ShopifyBuy && window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      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 client = ShopifyBuy.buildClient({
        apiKey: 'your-api-key',
        domain: 'your-store.myshopify.com',
        appId: '6'
      });

      ShopifyBuy.UI.onReady(client).then(function (ui) {
        ui.createComponent('product', {
          id: 12345,
          options: {
            product: {
              buttonDestination: 'cart',
              contents: {
                description: true
              },
              text: {
                button: 'Add to Cart'
              },
              styles: {
                button: {
                  'background-color': 'blue'
                }
              }
            },
            cart: {
              styles: {
                button: {
                  'background-color': 'orange'
                }
              }
            }
          }
        });
      });
    }
</script>

Сохраните изменения.

Настройка или удаление кнопки «Купить», встроенной коллекции или встроенной корзины

На этой странице

О коде для вставки кнопки «Купить»

Настройка стилей компонентов

Компоненты встроенной коллекции

Замена ссылки на корзину встроенного товара на модальное окно с данными о товаре

Шаги:

Изменение макета встроенного товара

Шаги:

Изменение внешнего вида и поведения встроенной корзины

Шаги:

Удаление кнопки «Купить», встроенной коллекции или встроенной корзины

Шаги: