nikikozak

/* Size Guide Modal Window */

.sizeguide_background {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 0;
  bottom: 0;

nikikozak

1. Include the component-size.guide.css file:

{{ 'component-size-guide.css' | asset_url | stylesheet_tag }}


2. After the closing endstyle tag, paste the following code:

<script src="{{ 'size-guide.js' | asset_url }}" defer="defer"></script>

{% comment %} Sizing chart {% endcomment %}

nikikozak

{
      "type": "variant_picker",
      "name": "t:sections.main-product.blocks.variant_picker.name",
      "limit": 1,
      "settings": [
        {
          "type": "select",
          "id": "picker_type",
          "options": [
            {

nikikozak

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({ ecommerce: null });
{% if first_time_accessed %}
  dataLayer.push({
    event: "purchase",
    ecommerce: {
        transaction_id: "{{ order.order_number }}",
        value: {{ total_price | times: 0.01 }},
        tax: {{ tax_price | times: 0.01 }},

nikikozak

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=XXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'XXXXXXXXX');
 
{% if first_time_accessed %}
  gtag("event", "purchase", {

nikikozak

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=XXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'XXXXXXXXX');
</script>

nikikozak

var links = document.links;
for (let i = 0, linksLength = links.length ; i < linksLength ; i++) {
  if (links[i].hostname !== window.location.hostname) {
    links[i].rel = 'nofollow noreferrer noopener';
  }
}

nikikozak

// Declare a variable in the main theme file. Put before the closing </head> tag.
<script> 
  var variantStock = {};
</script>

nikikozak

  // In the file, find the following function and replace the code with the following code snippet. 
  toggleAddButton(disable = true, text, modifyClass = true) {
    const productForm = document.getElementById(`product-form-${this.dataset.section}`);
    if (!productForm) return;
    const addButton = productForm.querySelector('[name="add"]');
    const addButtonText = productForm.querySelector('[name="add"] > span');

    const inventoryNotice = document.getElementById('inventoryNotice');
    const inventoryHtml = `Only ${variantStock[this.currentVariant.id]} in stock!`;
    const inventoryHighHtml = `More than 10 in stock!`;

nikikozak

{%- when 'inventory_notice' -%}
  {% assign current_variant = product.selected_or_first_available_variant %}
  <div id="inventoryNotice" class="price">
    {% if current_variant.available %}
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_quantity <= 10 %}
        Only {{ current_variant.inventory_quantity }} in stock!
      {% elsif current_variant.inventory_quantity > 10 %}
        More than 10 in stock!
      {% endif %}
    {% endif %}