Guest User

code multicolumn

a guest
Nov 5th, 2021
146
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. {{ 'section-multicolumn.css' | asset_url | stylesheet_tag }}
  2. <link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
  3. <noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>
  4.  
  5. <div class="multicolumn background-{{ section.settings.background_style }}{% if section.settings.title == blank %} no-heading{% endif %}">
  6.   <div class="page-width">
  7.     <div class="title-wrapper-with-link title-wrapper--self-padded-mobile{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}">
  8.       <h2 class="title">
  9.         {{ section.settings.title | escape }}
  10.       </h2>
  11.       {%- if section.settings.button_label != blank and section.settings.swipe_on_mobile -%}
  12.         <a href="{{ section.settings.button_link }}" class="link underlined-link large-up-hide">{{ section.settings.button_label | escape }}</a>
  13.       {%- endif -%}
  14.     </div>
  15.     <slider-component class="slider-mobile-gutter">
  16.       <ul class="multicolumn-list grid grid--1-col{% if section.blocks.size > 3 and section.settings.image_width != 'full' %} grid--2-col-tablet grid--4-col-desktop{% elsif section.blocks.size > 3 and section.settings.image_width == 'full' %} grid--2-col-tablet{% else %} grid--3-col-tablet{% endif %}{% if section.settings.swipe_on_mobile and section.blocks.size > 1 %} slider slider--mobile grid--peek{% endif %}"
  17.         id="Slider-{{ section.id }}"
  18.         role="list"
  19.       >
  20.         {%- liquid
  21.           assign highest_ratio = 0
  22.           for block in section.blocks
  23.             if block.settings.image.aspect_ratio > highest_ratio
  24.               assign highest_ratio = block.settings.image.aspect_ratio
  25.             endif
  26.           endfor
  27.         -%}
  28.         {%- for block in section.blocks -%}
  29.           <li class="multicolumn-list__item grid__item{% if section.settings.swipe_on_mobile %} slider__slide{% endif %}{% if section.settings.column_alignment == 'center' %} center{% endif %}" {{ block.shopify_attributes }}>
  30.             <div class="multicolumn-card">
  31.               <a href="{{ block.settings.url }}" style="text-decoration: none;color: rgba(var(--color-foreground),.75);">
  32.               {%- if block.settings.image != blank -%}
  33.                 {% if section.settings.image_ratio == 'adapt' or section.settings.image_ratio == 'circle' %}
  34.                   {% assign spaced_image = true %}
  35.                 {% endif %}
  36.                 <div class="multicolumn-card__image-wrapper multicolumn-card__image-wrapper--{{ section.settings.image_width }}-width{% if section.settings.image_width != 'full' or spaced_image %} multicolumn-card-spacing{% endif %}">
  37.                   <div class="media media--transparent media--{{ section.settings.image_ratio }}"
  38.                    {% if section.settings.image_ratio == 'adapt' %}
  39.                      style="padding-bottom: {{ 1 | divided_by: highest_ratio | times: 100 }}%;"
  40.                    {% endif %}>
  41.                     <img
  42.                      srcset="{%- if block.settings.image.width >= 275 -%}{{ block.settings.image | img_url: '275x' }} 275w,{%- endif -%}
  43.                         {%- if block.settings.image.width >= 550 -%}{{ block.settings.image | img_url: '550x' }} 550w,{%- endif -%}
  44.                         {%- if block.settings.image.width >= 710 -%}{{ block.settings.image | img_url: '710x' }} 710w,{%- endif -%}
  45.                         {%- if block.settings.image.width >= 1420 -%}{{ block.settings.image | img_url: '1420x' }} 1420w,{%- endif -%}
  46.                         {{ block.settings.image | img_url: 'master' }} {{ block.settings.image.width }}w"
  47.                       src="{{ block.settings.image | img_url: '550x' }}"
  48.                       sizes="(min-width: 990px) {% if section.blocks.size <= 2 %}710px{% else %}550px{% endif %},
  49.                        (min-width: 750px) {% if section.blocks.size == 1 %}710px{% else %}550px{% endif %},
  50.                        calc(100vw - 30px)"
  51.                      alt="{{ block.settings.image.alt }}"
  52.                      height="{{ block.settings.image.height }}"
  53.                      width="{{ block.settings.image.width }}"
  54.                      loading="lazy"
  55.                    >
  56.                   </div>
  57.                 </div>
  58.               {%- endif -%}
  59.               <div class="multicolumn-card__info">
  60.                 {%- if block.settings.title != blank -%}
  61.                   <h3>{{ block.settings.title | escape }}</h3>
  62.                 {%- endif -%}
  63.                 {%- if block.settings.text != blank -%}
  64.                   <div class="rte">{{ block.settings.text }}</div>
  65.                 {%- endif -%}
  66.               </div>
  67.               </a>
  68.             </div>
  69.           </li>
  70.         {%- endfor -%}
  71.       </ul>
  72.  
  73.       {%- if section.settings.swipe_on_mobile -%}
  74.         <div class="slider-buttons no-js-hidden medium-hide{% if section.blocks.size < 2 %} small-hide{% endif %}">
  75.           <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'accessibility.previous_slide' | t }}">{% render 'icon-caret' %}</button>
  76.           <div class="slider-counter caption">
  77.             <span class="slider-counter--current">1</span>
  78.             <span aria-hidden="true"> / </span>
  79.             <span class="visually-hidden">{{ 'accessibility.of' | t }}</span>
  80.             <span class="slider-counter--total">{{ section.blocks.size }}</span>
  81.           </div>
  82.           <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">{% render 'icon-caret' %}</button>
  83.         </div>
  84.       {%- endif -%}
  85.     </slider-component>
  86.     <div class="center{% if section.settings.swipe_on_mobile %} small-hide medium-hide{% endif %}">
  87.       {%- if section.settings.button_label != blank -%}
  88.         <a class="button button--primary"{% if section.settings.button_link == blank %} aria-disabled="true" role="link"{% else %} href="{{ section.settings.button_link }}"{% endif %}>
  89.           {{ section.settings.button_label | escape }}
  90.         </a>
  91.       {%- endif-%}
  92.     </div>
  93.   </div>
  94. </div>
  95.  
  96. {% schema %}
  97. {
  98.   "name": "t:sections.multicolumn.name",
  99.   "class": "spaced-section spaced-section--full-width",
  100.   "tag": "section",
  101.   "settings": [
  102.     {
  103.       "type": "text",
  104.       "id": "title",
  105.       "default": "Multicolumn",
  106.       "label": "t:sections.multicolumn.settings.title.label"
  107.     },
  108.     {
  109.       "type": "select",
  110.       "id": "image_width",
  111.       "options": [
  112.         {
  113.           "value": "third",
  114.           "label": "t:sections.multicolumn.settings.image_width.options__1.label"
  115.         },
  116.         {
  117.           "value": "half",
  118.           "label": "t:sections.multicolumn.settings.image_width.options__2.label"
  119.         },
  120.         {
  121.           "value": "full",
  122.           "label": "t:sections.multicolumn.settings.image_width.options__3.label"
  123.         }
  124.       ],
  125.       "default": "full",
  126.       "label": "t:sections.multicolumn.settings.image_width.label"
  127.     },
  128.     {
  129.       "type": "select",
  130.       "id": "image_ratio",
  131.       "options": [
  132.         {
  133.           "value": "adapt",
  134.           "label": "t:sections.multicolumn.settings.image_ratio.options__1.label"
  135.         },
  136.         {
  137.           "value": "portrait",
  138.           "label": "t:sections.multicolumn.settings.image_ratio.options__2.label"
  139.         },
  140.         {
  141.           "value": "square",
  142.           "label": "t:sections.multicolumn.settings.image_ratio.options__3.label"
  143.         },
  144.         {
  145.           "value": "circle",
  146.           "label": "t:sections.multicolumn.settings.image_ratio.options__4.label"
  147.         }
  148.       ],
  149.       "default": "adapt",
  150.       "label": "t:sections.multicolumn.settings.image_ratio.label"
  151.     },
  152.     {
  153.       "type": "select",
  154.       "id": "column_alignment",
  155.       "options": [
  156.         {
  157.           "value": "left",
  158.           "label": "t:sections.multicolumn.settings.column_alignment.options__1.label"
  159.         },
  160.         {
  161.           "value": "center",
  162.           "label": "t:sections.multicolumn.settings.column_alignment.options__2.label"
  163.         }
  164.       ],
  165.       "default": "left",
  166.       "label": "t:sections.multicolumn.settings.column_alignment.label"
  167.     },
  168.     {
  169.       "type": "select",
  170.       "id": "background_style",
  171.       "options": [
  172.         {
  173.           "value": "none",
  174.           "label": "t:sections.multicolumn.settings.background_style.options__1.label"
  175.         },
  176.         {
  177.           "value": "primary",
  178.           "label": "t:sections.multicolumn.settings.background_style.options__2.label"
  179.         },
  180.         {
  181.           "value": "secondary",
  182.           "label": "t:sections.multicolumn.settings.background_style.options__3.label"
  183.         }
  184.       ],
  185.       "default": "primary",
  186.       "label": "t:sections.multicolumn.settings.background_style.label"
  187.     },
  188.     {
  189.       "type": "text",
  190.       "id": "button_label",
  191.       "default": "Button label",
  192.       "label": "t:sections.multicolumn.settings.button_label.label"
  193.     },
  194.     {
  195.       "type": "url",
  196.       "id": "button_link",
  197.       "label": "t:sections.multicolumn.settings.button_link.label"
  198.     },
  199.     {
  200.       "type": "checkbox",
  201.       "id": "swipe_on_mobile",
  202.       "default": false,
  203.       "label": "t:sections.multicolumn.settings.swipe_on_mobile.label"
  204.     }
  205.   ],
  206.   "blocks": [
  207.     {
  208.       "type": "column",
  209.       "name": "t:sections.multicolumn.blocks.column.name",
  210.       "settings": [
  211.         {
  212.           "type": "image_picker",
  213.           "id": "image",
  214.           "label": "t:sections.multicolumn.blocks.column.settings.image.label"
  215.         },
  216.         {
  217.           "type": "text",
  218.           "id": "title",
  219.           "default": "Column",
  220.           "label": "t:sections.multicolumn.blocks.column.settings.title.label"
  221.         },
  222.         {
  223.           "type": "richtext",
  224.           "id": "text",
  225.           "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
  226.           "label": "t:sections.multicolumn.blocks.column.settings.text.label"
  227.         },
  228.         {
  229.           "type": "url",
  230.           "id": "link",
  231.           "label": "Link"
  232.         }
  233.       ]
  234.     }
  235.   ],
  236.   "presets": [
  237.     {
  238.       "name": "t:sections.multicolumn.presets.name",
  239.       "blocks": [
  240.         {
  241.           "type": "column"
  242.         },
  243.         {
  244.           "type": "column"
  245.         },
  246.         {
  247.           "type": "column"
  248.         }
  249.       ]
  250.     }
  251.   ]
  252. }
  253. {% endschema %}
  254.  
RAW Paste Data