VitaliyKovalenko1

Public Snippets 77

Blockshop theme Grid swatches with +/- response

{%- liquid
  assign color_t = 'products.color' | t
  assign compare_price_t = 'sections.onboarding.compare_price' | t
  assign from_t = 'products.from' | t
  assign new_t = 'products.new' | t
  assign off_t = 'products.off' | t
  assign out_of_stock_t = 'products.out_of_stock' | t
  assign price_t = 'sections.onboarding.price' | t
  assign sale_t = 'products.sale' | t
  assign select_options_t = 'products.select_options' | t

  unless section_id
    assign section_id = unique_handle
  endunless

Prestige Sticky Left Side Product page Desktop

 .Product__GalleryStickyWrapper .Product__Aside {
   display:none;
 }
@media screen and (min-width: 1008px) {
 .Product  .Product__Wrapper {
        max-width: 100%;
    flex-wrap: wrap;
    display: flex;
    position: relative;
    align-items: flex-start;
    padding-top: 50px;
  }
  .Product__GalleryStickyWrapper {
      position: sticky;
    top: calc(var(--header-height) + 5px);
    left: 0;
  width:50%;
}
  .Product__GalleryStickyWrapper   .Product__Gallery {
    margin-top:0;
  }
  .Prod

Venue Infinity Scroll



/* @preserve
 * https://github.com/Elkfox/Ajaxinate
 * Copyright (c) 2017 Elkfox Co Pty Ltd (elkfox.com)
 * MIT License (do not remove above copyright!)
 */

/* Configurable options;
 *
 * method: scroll or click
 * container: selector of repeating content
 * pagination: selector of pagination container
 * offset: number of pixels before the bottom to start loading more on scroll
 * loadingText: 'Loading', The text shown during when appending new content
 * callback: null, callback function af

Prestige Shipping Progress bar

      {%- if settings.cart_show_free_shipping_threshold and hide_progress_bar == false -%}
                {%- assign threshold_in_cents = settings.cart_free_shipping_threshold | times: 100 -%}

                       {%- assign calculated_total_price = 0 -%}

          {%- for line_item in cart.items -%}
            {%- if line_item.requires_shipping -%}
              {%- assign calculated_total_price = calculated_total_price | plus: line_item.final_line_price -%}
            {%- endif -%}
    

Focal Multiple product with metafield and custom alts

{%- assign color_label_list = 'general.label.color' | t | replace: ', ', ',' | downcase | split: ',' -%}
{%- assign color_white_label = 'general.label.white' | t | downcase -%}
{%- assign size_label_list = 'general.label.size' | t | replace: ', ', ',' | downcase | split: ',' -%}
{%- assign product_form_id = 'product-form-' | append: section.id | append: '-' | append: product.id -%}



{%  assign is__multiple_product = false %}
{%  assign multiple_products = product.metafields.custom.multiple_pro

Warehouse Range filters like price-range

.range_filter__group .collection__filter-checkbox-list {
  opacity:0;
  visibility:hidden;
  position:absolute;
  z-index:-1;
  width:1px;
  height:1px;
  overflow:hidden;
  padding:0;
  margin:0;
}
#mobile-collection-filters-form .filter_range_option {
      margin-top: 20px;
    display: block;
}

Warehouse old filtering to new theme

{%- comment -%}We start by creating a lot of useful variables !{%- endcomment -%}

{%- assign color_label = 'color,colour,couleur,cor,colore,farbe,색,色,カラー,färg,farve,szín,barva' | split: ',' -%}
{%- assign items_per_page = cart.attributes.collection_products_per_page | default: section.settings.default_products_per_page -%}
{%- assign quick_links_menu = section.settings.quick_links -%}


{%- if section.settings.show_filters -%}
  {%- if section.settings.filter_type == 'tag' -%}
    {%- for tag i

Focal Pick an option

{%- assign color_label_list = 'general.label.color' | t | replace: ', ', ',' | downcase | split: ',' -%}
{%- assign color_white_label = 'general.label.white' | t | downcase -%}
{%- assign size_label_list = 'general.label.size' | t | replace: ', ', ',' | downcase | split: ',' -%}
{%- assign product_form_id = 'product-form-' | append: section.id | append: '-' | append: product.id -%}


{%  assign show_pick_an_option = section.settings.show_pick_an_option %}
{% assign no_variants_product = product.

Warehouse Featured collection Infinity Scroll

{%  layout none %}

      {%- paginate collection.products by settings.products_count -%}
              {%- capture grid_classes -%}1/2 1/4--lap 1/{{ 6 | minus: 1 }}--desk 1/{{ 6 }}--wide{%- endcapture -%}

        {%  unless  paginate.next %}
       {%- capture grid_classes -%} last_paginate_item  1/2 1/4--lap 1/{{ 6 | minus: 1 }}--desk 1/{{ 6 }}--wide{%- endcapture -%}
          {%  endunless %}
{%  for product in collection.products %}
                {%- include 'product-item', product: prod

Prestige Sticky Header like nike.com

// find var HeaderSection

 if (this.options['isSticky']) {
        Stickyfill.addOne(this.element.parentNode);



      let lastScrollPosition =  window.scrollY;
      window.addEventListener('scroll', function () {
      const HeaderEl  = document.querySelector('#shopify-section-header');
      const CollectionToolbar = document.querySelector('.CollectionToolbar--top');
        
      if(HeaderEl) {
      
       let scrollPosition =  window.scrollY;
       let scrollThreshold = 10;
       
  

Update Cart Note with product property

// in succsess ajax add to cart 
 
 
        
            var cartContents = fetch('/cart.js')
            .then(response => response.json())
            .then(cartData => {
          
              var note = cartData.note;
              var properties = productData.properties;    
              var save_properties = false;
              var properties_text = ""
              
              for(var property in properties){
                if(property == "Monogram" && properties[property] != "")

Warehouse Grid add to cart with options and change price/sku/image

/**
* Include your custom JavaScript here.
*
* We also offer some hooks so you can plug your own logic. For instance, if you want to be notified when the variant
* changes on product page, you can attach a listener to the document:
*
* document.addEventListener('variant:changed', function(event) {
*   var variant = event.detail.variant; // Gives you access to the whole variant details
* });
*
* You can also add a listener whenever a product is added to the cart:
*
* document.addEventListener('pr

await fetch get

let response = await fetch(url, options); // завершается с заголовками ответа
let result = await response.json(); // читать тело ответа в формате JSON


or without await
fetch(url, options)
  .then(response => response.json())
  .then(result => /* обрабатываем результат */)

Scrolling text

<div class='scrolling_text_section' id="section_{{ section.id }}">
  <div class='scrolling_text_section_wrapper direction_{{ section.settings.direction }} speed_{{ section.settings.speed }}'>
    {%  if  section.settings.text != blank %}
    {%  for i in (1..4) %}
      <span class='scrolling_text'>
      {%  if section.settings.link != blank %}
        <a href="{{  section.settings.link }}">
          {%  endif %}
        {{  section.settings.text }}
      {%  if section.settings.link != blank 

Focal Product Page Shipping Estimator


  // js/custom-element/section/product/product-shipping-estimator.js
  var ProductShippingEstimator = class extends HTMLElement {
    connectedCallback() {
      this.submitButton = this.querySelector('[type="button"]');
      this.submitButton.addEventListener("click", this._estimateShipping.bind(this));
    }
    async _estimateShipping() {

      const zip = this.querySelector('[name="shipping-estimator[zip]"]').value,
        country = this.querySelector('[name="shipping-estimator[country]"

Prestige Top Bar FIlters 2.0 Popovers

.top_filters_nav {
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 10px; }
.top_filters_nav .top_filters_button {
  margin: 10px 3px 0;
  border-radius: 5px;
  background-color: #fff;
  border: 1px solid #dadada;
  font-size: 12px;
  padding: 7px 12px; }
  .top_filters_nav .top_filters_button svg {
    height: 6px;
    margin-left: 2px;
    pointer-events: none; }

.TopFiltersPopovers .Linklist__Item.Popover__Value {
/*     padding-left: 50px;
    padding-rig