nikikozak

//subscribe to events

//Product viewed
analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
    event: "product_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,

nikikozak

 const variantAddInfo = document.getElementById(`variantAdditionalInfo`);
 if (variantMetafieldInfo[this.currentVariant.id] !== undefined) {
   variantAddInfo.textContent = variantMetafieldInfo[this.currentVariant.id];
 }

nikikozak

<script>
 var variantMetafieldInfo = {};
 {% for variant in product.variants %}
   variantMetafieldInfo[{{- variant.id -}}] = "{{ variant.metafields.custom.variant_additional_info }}";
 {% endfor %}
</script>

nikikozak

{%- when 'variant_additional_info'-%}
  {% for variant in product.variants %}
  {% if variant == product.selected_or_first_available_variant %}
    <div id="variantAdditionalInfo">
      {{ variant.metafields.custom.variant_additional_info }} 
    </div>
  {% endif %}
  {% endfor %} 

nikikozak

{
  "type": "variant_additional_info",
  "name": "Variant additional info",
  "limit": 1
},

nikikozak

.influencers_container_grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 3rem;
  margin-top: 60px;
  
}

.influencers_container_grid a {
  text-decoration: none;

nikikozak

{{ 'influencers.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: calc({{ section.settings.padding_top }}px * 0.75);
    padding-bottom: calc({{ section.settings.padding_bottom }}px  * 0.75);
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {

nikikozak

{%- when 'description' -%}
  {%- if product.description != blank -%}
    <div class="product__accordion accordion quick-add-hidden" {{ block.shopify_attributes }}>
      <details id="Details-{{ block.id }}-{{ section.id }}">
         <summary>
            <div class="summary__title">
               {% render 'icon-accordion', icon: block.settings.icon %}
               <h2 class="h4 accordion__title">
                  {{ block.settings.heading | default: block.settings.page.title }}
               </h2>

nikikozak

{
      "type": "description",
      "name": "t:sections.main-product.blocks.description.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Collapsible row",
          "info": "t:sections.main-product.blocks.collapsible_tab.settings.heading.info",

nikikozak

const sizeGuideButton = document.getElementById("sizeguide_button")
const sizeGuideImage = document.getElementById("sizeguide_image")
const sizeGuidePopup = document.getElementById("sizeguide_popup")

// Get the image URL from the block settings
sizeGuideImage.src = sizeGuideButton.dataset.imageUrl

// Install event listeners
sizeGuideButton.addEventListener("click", showSizeGuide)
sizeGuidePopup.addEventListener("click", hideSizeGuide)